\n\t\t
\n\t\t\t\n\t\t\t{renderHeader()}\n\t\t
\n\t\t
\n\t\t\t
\n\t\t\t{renderBody()}\n\t\t
\n\t
\n};\n\nexport default Numbers;\n","import { makeStyles } from \"@material-ui/core/styles\";\nimport { font } from \"config/styles\";\nimport bg_title_top from 'assets/img/home/tittle.png';\n\nexport const useStyles = makeStyles((theme) => ({\n winners: {\n position: 'relative',\n display: 'flex',\n width: '100%',\n borderRadius: '5px',\n justifyContent:'center',\n flexDirection: 'column',\n alignItems: 'flex-start',\n // backgroundColor: '#2e041c',\n backgroundColor: 'rgba(167, 204, 206, 0.6)',\n [theme.breakpoints.down('sm')]: {\n // maxWidth: '1560px',\n // width: '100%',\n },\n },\n\n winner_title: {\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n verticalAlign:'center',\n \n width: '300px',\n height: '50px',\n backgroundPosition: '50% 50%',\n backgroundRepeat: 'no-repeat',\n backgroundSize: '100% 100%',\n backgroundImage: `url(${bg_title_top})`,\n \n [theme.breakpoints.down('sm')]: {\n width: '250px',\n height: '50px',\n },\n [theme.breakpoints.down('xs')]: {\n width: '180px',\n height: '40px',\n },\n '& span': {\n // display: 'flex',\n textTransform: 'uppercase',\n alignItems: 'flex-start',\n justifyContent: 'flex-end',\n fontFamily: font.boldFamily,\n marginRight: '10%',\n height: 'auto',\n color: 'white',\n display: 'inline-block',\n verticalAlign:'middle',\n fontSize: '18px',\n [theme.breakpoints.down('sm')]: {\n fontSize: '2.4vw',\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: '2.6vw',\n }\n }\n },\n\n winner_period: {\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end',\n verticalAlign:'center',\n width: '50%',\n [theme.breakpoints.down('xs')]: {\n // justifyContent: 'center',\n // width: '100%'\n },\n '& span': {\n // display: 'flex',\n textTransform: 'uppercase',\n alignItems: 'flex-start',\n justifyContent: 'flex-end',\n fontFamily: font.boldFamily,\n marginRight: '10px',\n height: 'auto',\n display: 'inline-block',\n verticalAlign:'middle',\n fontSize: '18px',\n color: 'black',\n [theme.breakpoints.down('sm')]: {\n fontSize: '2.4vw',\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: '2.6vw',\n }\n }\n },\n\n title_container: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n verticalAlign:'center',\n \n width: '100%',\n // height: '50px',\n // backgroundPosition: '50% 50%',\n // backgroundRepeat: 'no-repeat',\n // backgroundSize: '100% 100%',\n // backgroundImage: `url(${bg_title_top})`,\n },\n\n winners__table__wrapper: {\n position: 'relative',\n backgroundPosition: 'center center',\n backgroundRepeat: 'no-repeat',\n backgroundAttachment: 'scroll',\n backgroundSize: \"auto 100%\",\n // backgroundColor: '#fff',\n animation: 'fadeIn ease-in .5s',\n transition: 'all .5s ease-in-out',\n width: '100%',\n display: 'flex',\n alignItems:'center',\n flexDirection: 'row',\n flexWrap: 'wrap',\n justifyContent: 'space-around',\n padding: '20px',\n [theme.breakpoints.down('sm')]: {\n fontSize: font.nomalSize__mobile,\n\n },\n },\n\n winners__table: {\n display: 'flex',\n justifyContent: 'center',\n flex: '1',\n zIndex: 2\n // backgroundColor: '#2e041c',\n \n },\n image_bg: {\n display: 'flex',\n position: 'absolute',\n height: '100%',\n zIndex: 0,\n },\n\n image_title: {\n // position: 'absolute',\n height: '60%',\n width: 'auto',\n marginRight: '10px'\n // zIndex: 0,\n },\n contanner__image: {\n display: 'flex',\n position: 'relative',\n height: '100%',\n width: '80px',\n },\n\n image_ball: {\n position: 'absolute',\n zIndex: 1,\n top: '-5%',\n left: '85%',\n height: '80px',\n width: 'auto',\n [theme.breakpoints.down('sm')]: {\n height: '60px',\n },\n [theme.breakpoints.down('xs')]: {\n margin:'2px 2px 0px 2px',\n height: '50px',\n }\n },\n}));\n","import React from 'react';\nimport TableNumber from 'components/Numbers';\nimport { useStyles } from './styles';\nimport Image from 'react-image-webp';\nimport './styles.css'\n\nimport calendar from 'assets/img/home/ic_calendar.png';\nimport calendarWepb from 'assets/imgWebp/ic_calendar.webp';\n\n\nconst TableTopThree = ({data = [], period = {period : '', date: ''}}) => {\n const classes = useStyles()\n let periodInfo = `Period: ${period.period}`\n\tif (!period) {\n\t\tperiod = {period : '', date: ''}\n\t}\n return
\n
\n
\n \n \n {period.date}\n \n
\n
\n \n {periodInfo}\n \n
\n
\n
\n {\n data.map((item, index)=> {\n return
\n })\n }\n
\n
\n};\n\nexport default TableTopThree;\n","import { makeStyles } from \"@material-ui/core/styles\";\nimport { font } from \"config/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n container_page: {\n display: 'flex',\n justifyContent: 'flex-start',\n flexDirection: 'column',\n alignItems: 'flex-start',\n minHeight: '100%',\n },\n multi_prize_container: {\n display: 'flex',\n width: '100%',\n justifyContent: 'flex-end',\n flexDirection: 'row',\n alignItems: 'flex-start',\n alignSelf: 'stretch',\n marginBottom: '15px',\n [theme.breakpoints.down('sm')]: {\n justifyContent: 'center',\n },\n '& span': {\n padding: '0 0 0 15px',\n [theme.breakpoints.down('sm')]: {\n padding: '0 0 0 10px',\n fontSize: font.nomalSize__mobile,\n },\n },\n '& :nth-child(1)': {\n color: '#fff' \n },\n '& :nth-child(2)': {\n color: '#1ab50d' \n },\n\n '& :nth-child(3)': {\n color: '#ffbb02'\n },\n },\n menus: {\n display: 'flex',\n position: 'relative',\n justifyContent: 'space-around',\n flexDirection: 'column',\n flexFlow: 'column',\n alignItems: 'center',\n width: '200px',\n height: '490px', \n marginRight: '10px',\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n marginRight: '0',\n flexDirection: 'row',\n height: '40px', \n },\n [theme.breakpoints.down('xs')]: {\n marginRight: '0',\n width: '100%',\n height: '28px', \n }\n },\n\n\n content: {\n display: 'flex',\n width: '100%',\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'column',\n [theme.breakpoints.down('sm')]: {\n padding: '0 10px 10px 10px'\n },\n [theme.breakpoints.down('xs')]: {\n // padding: '10px'\n // width: 'calc(100% -120px)',\n }\n },\n\n timer__container: {\n display: 'flex',\n width: '100%',\n justifyContent: 'flex-start',\n alignItems: 'center',\n marginBottom: '80px',\n [theme.breakpoints.down('xs')]: {\n justifyContent: 'center',\n marginBottom: '20px',\n }\n }\n\n}));\n","import axios from 'axios';\nimport { KEY_NAME, KEY_TOKEN } from 'config/localStorageKey';\n\nconst HTTPService = {\n\tsendRequest: (url, method, headerParams, body, { timeout = 60000 } = {}, responseType = 'json') => {\n\t\tconst headers = headerParams || {};\n\t\tconst request = {url, method, timeout, headers, responseType};\n\t\tif (!method.match(/get|head|delete/)) {\n\t\t\trequest.data = body || {};\n\t\t}\n\t\tif (method === 'delete') {\n\t\t\trequest.params = body;\n\t\t}\n\t\treturn new Promise((resolve) => {\n\t\t\taxios.request(request).then((res) => {\n\t\t\t\tif (res.status >= 200 && res.status < 300) {\n\t\t\t\t\tresolve(res);\n\t\t\t\t} else {\n\t\t\t\t\tresolve({ isError: true, ...res.data });\n\t\t\t\t}\n\t\t\t}).catch(err => resolve({ isError: true, err }));\n\t\t});\n\t},\n\n\tsendGetReqeust: (url, headerParams, body)=> {\n\t\treturn HTTPService.sendRequest(url, 'GET', headerParams, body)\n\t},\n\n\tsendPostReqeust: (url, headerParams, body)=> {\n\t\treturn HTTPService.sendRequest(url, 'POST', headerParams, body)\n\t},\n\n\tsendRequestWithToken: (method, headerParams, body, { timeout = 60000 } = {}, responseType = 'json') => {\n\t\tconst headers = headerParams || {};\n\t\tconst name = localStorage.getItem(KEY_NAME);\n\t\tconst token = localStorage.getItem(KEY_TOKEN);\n\t\tconst auth = {\n\t\t\t'AUTH-USERNAME': name,\n\t\t\t'AUTH-TOKEN': token,\n\t\t};\n\n\t\treturn HTTPService.sendRequest(method, { ...headers, ...auth }, body, { timeout }, responseType);\n\t},\n\n\tdownloadFile: (method, url, headerParams, body, fileName, { timeout = 60000 } = {}, responseType = 'blob') => {\n\t\tconst headers = headerParams || {};\n\t\tconst token = JSON.parse(localStorage.token || localStorage.verifyToken || '{}');\n\t\theaders.authorization = `${token.token_type} ${token.access_token}`;\n\t\treturn HTTPService.sendRequest(method, url, headers, body, { timeout }, responseType)\n\t\t\t.then((response) => {\n\t\t\t\tconst endp = window.URL.createObjectURL(new Blob([response.data]));\n\t\t\t\tconst link = document.createElement('a');\n\t\t\t\tlink.href = endp;\n\t\t\t\tlink.setAttribute('download', `${fileName}.pdf`);\n\t\t\t\tdocument.body.appendChild(link);\n\t\t\t\tlink.click();\n\t\t\t});\n\t},\n\n\tupload: (method, url, data, onUpload) => new Promise((resolve) => {\n\t\tconst token = JSON.parse(localStorage.token || '{}');\n\t\taxios({\n\t\t\turl,\n\t\t\tmethod,\n\t\t\theaders: {\n\t\t\t\t'Content-Type': data.type,\n\t\t\t\t'Access-Control-Allow-Origin': '*',\n\t\t\t\tauthorization: `${token.token_type} ${token.access_token}`,\n\t\t\t},\n\t\t\tdata,\n\t\t\tonUploadProgress: e => onUpload && onUpload(e),\n\t\t})\n\t\t\t.then(res => resolve(res))\n\t\t\t.catch(err => resolve({ isError: true, ...err.response }));\n\t}),\n};\n\nexport default HTTPService;\n","export const KEY_NAME = 'user_kasldkj';\nexport const KEY_TOKEN = 'Tokajksdhe';\nexport const KEY_LANGUAGE = 'lajkashdkjahs';\n","\nimport HTTPService from './HTTPServices';\nconst ApiDomain = process.env.REACT_APP_API_DOMAIN;\n\nconst Api = {};\nApi.requestHomePage = function () {\n return HTTPService.sendPostReqeust(ApiDomain + '/result')\n};\n\nApi.requestPageResult = function () {\n return HTTPService.sendPostReqeust(ApiDomain + '/result_paging')\n}\n\n\n\nApi.requestMeta = function (endpoint = '') {\n return HTTPService.sendPostReqeust(ApiDomain + '/metadata', undefined, {endpoint})\n}\n\nexport default Api;","import { makeStyles } from \"@material-ui/core/styles\";\nimport { font } from \"config/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n container_page: {\n position: 'relative',\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'flex-start',\n flexDirection: 'column',\n [theme.breakpoints.down('xs')]: {\n alignItems: 'center',\n \n }\n },\n timer_title: {\n zIndex: 1,\n display: 'flex',\n width: '100%',\n alignItems: 'center',\n justifyContent: 'flex-start',\n textTransform: 'uppercase',\n '& span': {\n padding:'5px',\n color: 'black',\n fontSize: '16px',\n fontFamily: font.boldFamily,\n [theme.breakpoints.down('sm')]: {\n fontSize: '2.0vw',\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: '12px',\n }\n },\n [theme.breakpoints.down('sm')]: {\n margin: '0 10px 0 10px',\n },\n [theme.breakpoints.down('sm')]: {\n margin: '0 10px 0 20px',\n }\n },\n \n timer__bg: {\n position: 'relative',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n width: '115px',\n height: '102px',\n [theme.breakpoints.down('sm')]: {\n\t\t\t// width: '8vw',\n // height: '8vw',\n width: '94px',\n height: '83px',\n },\n [theme.breakpoints.down('xs')]: {\n\t\t\twidth: '84px',\n height: '74px',\n },\n \n '& span': {\n zIndex: 1,\n fontSize: '60px',\n paddingBottom: '10px',\n // fontFamily: 'Digital',\n fontFamily: font.boldFamily,\n [theme.breakpoints.down('sm')]: {\n fontSize: '55px',\n paddingBottom: '10px'\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: '50px',\n paddingBottom: '5px'\n }\n },\n '& pre': {\n position: 'absolute',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n bottom: '5px',\n fontSize: '12px',\n [theme.breakpoints.down('sm')]: {\n fontSize: '10px',\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: '8px',\n bottom: '4px',\n }\n }\n },\n\n timer__bg__point: {\n position: 'relative',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n width: '15px',\n height: '30px',\n '& span': {\n zIndex: 1,\n fontSize: '50px',\n fontFamily: 'Digital',\n [theme.breakpoints.down('sm')]: {\n fontSize: '4.5vw',\n }\n }\n },\n content: {\n display: 'flex',\n margin: '1px',\n justifyContent: 'center',\n alignItems: 'center',\n color: 'white',\n fontSize: font.nomalSize,\n '& span': {\n margin: '1px',\n textAlign: 'left',\n },\n [theme.breakpoints.down('sm')]: {\n fontSize: font.nomalSize__mobile,\n margin: '0 10px 0 10px',\n }\n },\n\n date_content: {\n display: 'flex',\n margin: '1px',\n color: 'white',\n fontSize: font.nomalSize,\n fontFamily: font.boldFamily,\n '& span': {\n margin: '1px',\n textAlign: 'center',\n fontSize: font.nomalSize,\n fontFamily: font.boldFamily,\n [theme.breakpoints.down('sm')]: {\n fontSize: font.nomalSize__mobile,\n }\n },\n },\n content_center: {\n display: 'flex',\n justifyContent:'flex-start',\n alignItems:'flex-start',\n fontSize: font.nomalSize,\n margin: '10px',\n whiteSpace: 'pre-wrap',\n textAlign: 'left',\n [theme.breakpoints.down('sm')]: {\n fontSize: font.nomalSize__mobile,\n margin: '0 20px 0 20px',\n }\n },\n\n imageItemFlag: {\n position: 'absolute',\n left: '50%',\n bottom: '50%',\n transform: 'translate(-50%, 50%)',\n height: '100%',\n // margin: '5px',\n zIndex: 0,\n },\n imageClamp: {\n position: 'absolute',\n left: '50%',\n bottom: '80%',\n transform: 'translate(-50%, 50%)',\n height: '200px',\n zIndex: 0,\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\theight: '160px',\n\t\t},\n\t\t[theme.breakpoints.down('xs')]: {\n\t\t\theight: '20vw',\n\t\t}\n }\n \n}));\n","import React, {useState, useRef, useEffect} from \"react\";\nimport Image from 'react-image-webp';\nimport { useTranslation } from 'react-i18next';\nimport { useStyles } from './styles';\n\nimport label from 'assets/img/lives/box_clock.png';\nimport labelWepb from 'assets/imgWebp/box_clock.webp';\n\nimport pont from 'assets/img/lives/point_time.png';\nimport pontWepb from 'assets/imgWebp/point_time.webp';\n\nfunction useInterval(callback, delay) {\n\tconst savedCallback = useRef();\n\t\n\tconst tick = ()=> {\n\t\tif (savedCallback.current) {\n\t\t\tsavedCallback.current();\n\t\t}\n\t}\n\t// Remember the latest callback.\n\tuseEffect(() => {\n\t savedCallback.current = callback;\n\t}, [callback]);\n\t\n\t// Set up the interval.\n\tuseEffect(() => {\n\t if (delay !== null) {\n\t\tlet id = setInterval(tick, delay);\n\t\treturn () => clearInterval(id);\n\t }\n\t}, [delay]);\n}\n \nconst TimerView = ({data = {}}) => {\n\tconst classes = useStyles()\n\tconst {t} = useTranslation();\n\tconst [dataTimer, setDataTimer] = useState({})\n\tconst [timer, setTimer] = useState({\n\t\tseconds: '00',\n\t\thours: '00',\n\t\tminutes: '00',\n\t\tcanReloadPage: false,\n\t})\n\n\tconst handleTimer = ()=> {\n\t\tlet timeUntilNextResultSeconds = dataTimer.timeUntilNextResultSeconds\n\t\tif (timeUntilNextResultSeconds && timeUntilNextResultSeconds > 0) {\n\t\t\t\ttimeUntilNextResultSeconds -= 1\n\t\t\t\tlet hours = parseInt(timeUntilNextResultSeconds / (60 * 60 ), 10)\n\t\t\t\ttimeUntilNextResultSeconds -= (hours * 60 * 60)\n\t\t\t\tlet minutes = parseInt(timeUntilNextResultSeconds / 60, 10)\n\t\t\t\ttimeUntilNextResultSeconds -= minutes * 60\n\t\t\t\tlet seconds = parseInt(timeUntilNextResultSeconds , 10)\n\t\t\n\t\t\t\tminutes = minutes < 10 ? \"0\" + minutes : minutes;\n\t\t\t\tseconds = seconds < 10 ? \"0\" + seconds : seconds;\n\t\t\t\thours = hours < 10 ? \"0\" + hours : hours;\n\t\t\n\t\t\t\tsetDataTimer({\n\t\t\t\t\t...data,\n\t\t\t\t\ttimeUntilNextResultSeconds: dataTimer.timeUntilNextResultSeconds - 1\n\t\t\t\t})\n\t\t\t\t\n\t\t\t\tsetTimer({\n\t\t\t\t\tseconds,\n\t\t\t\t\thours,\n\t\t\t\t\tminutes,\n\t\t\t\t\tcanReloadPage: true,\n\t\t\t\t})\n\t\t\t} else {\n\t\t\t\tif (timer.canReloadPage) {\n\t\t\t\t\twindow.location.reload();\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\tsetTimer({\n\t\t\t\t\tseconds: '00',\n\t\t\t\t\thours: '00',\n\t\t\t\t\tminutes: '00',\n\t\t\t\t\tcanReloadPage: false,\n\t\t\t\t})\n\t\t\t}\n\t}\n\t\n \tuseInterval(handleTimer, 1000);\n \n \tuseEffect(() => {\n\t\tsetDataTimer(data);\n\t}, [data])\n\n return (\n\t
\n \t\t
\n \t\t\n \t\t\t{t('TimeRemaning')}\n \t\t
\n\t\t \t
\n\t\t\t \t
\n\t\t\t\t
\n\t\t\t\t
{timer.hours}\n\t\t\t\t
{t('hour')}\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t \t
\n\t\t\t \t\t
\n\t\t\t\t\t
{timer.minutes}\n\t\t\t\t\t
{t('minute')}\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t \t
\n\t\t\t \t\t
\n\t\t\t\t\t
{timer.seconds}\n\t\t\t\t\t
{t('second')}\n\t\t\t\t
\n\t\t
\n\t\t
\n\t\t \t{dataTimer.date}\n\t\t
\n
\n )\n};\n\nexport default TimerView\n","import React, { useContext, useState, useEffect } from 'react';\nimport { AuthContext } from 'context/AuthContext'\nimport { Background, RouterContext } from 'context/RouterContext';\nimport { get } from 'lodash';\nimport TableTopThreeView from './../Home/TableTopThree'\nimport { useStyles } from './styles';\nimport Api from 'services/Api';\nimport TimerView from './../TimerView';\n\nconst Home = (props) => {\n\tconst classes = useStyles()\n\tconst Router = useContext(RouterContext);\n\tconst authContent = useContext(AuthContext);\n\tconst [mapDataDefault, setMapDataDefault] = useState({\n\t\tdrawTime: {},\n\t\tprizeList: [],\n\t\tsinglePrizes: []\n\t})\n\n\tuseEffect(() => {\n\t\tApi.requestHomePage().then((res) => {\n\t\t\tconst isSuccess = get(res, 'data.success', false);\n\t\t\tif (isSuccess) {\n\t\t\t\tconst data = get(res, 'data.data', {});\n\t\t\t\tconst hData = authContent.mapDataHomePage(data)\n\t\t\t\tauthContent.resultHomeData = hData;\n\t\t\t\tsetMapDataDefault(hData)\n\t\t\t}\n\t\t});\n\t}, [authContent]);\n\n\tuseEffect(()=> {\n\t\tRouter.setBackground(Background.home);\n\t}, [Router])\n\t\n\t//============================//\n\t//\n\t//============================//\n\t\n\treturn(\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\t\n\t\t\t\t
\n\t\t\t\n\t\t\t
\n\t\t
\n\t)\n};\n\nexport default Home\n","import { makeStyles } from \"@material-ui/core/styles\";\nimport { font, color } from \"../../config/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n\tdropDownLanguage: {\n\t\tposition: 'relative',\n\t\tdisplay: 'inline-flex',\n\t\talignItems: 'center',\n\t\tjustifyContent: 'space-between',\n\t\tminWidth: '210px',\n\t\theight: '40px',\n\t\tmaxHeight: '100%',\n\t\tbackgroundColor: 'transparent',\n\t\tborderRadius: '5px',\n\t\tpadding: '10px',\n\t\tcursor: 'pointer',\n\t\tborder: `1px solid #000`,\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\tdisplay: 'flex',\n\t\t\tminWidth: '160px',\n\t\t\theight: '30px',\n\t\t\tmarginLeft: '10px',\n\t\t\tpadding: '0 5px 0 5px',\n\t\t\tmaxWidth: '160px',\n\t\t\tmaxHeight: '40px',\n\t\t},\n\t\t[theme.breakpoints.down('xs')]: {\n\t\t\tdisplay: 'flex',\n\t\t\tminWidth: '130px',\n\t\t\theight: '25px',\n\t\t\tmarginLeft: '0px',\n\t\t\tpadding: '0 5px 0 5px',\n\t\t\tmaxWidth: '130px',\n\t\t\tmaxHeight: '40px',\n\t\t},\n\t},\n\n\tlanguage__countryFlag: {\n\t\theight: '100%',\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\theight: '43%',\n\t\t}\n\t},\n\t\n\tdropDownLanguage__countryFlag: {\n\t\theight: '100%',\n\t\t[theme.breakpoints.down('xs')]: {\n\t\t\theight: '70%',\n\t\t}\n\t},\n\n\tdropDownLanguage__countryText: {\n\t\tpadding: '0 10px',\n\t\tcolor: color.black,\n\t\tfontSize: font.nomalSize,\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\tpadding: '0 1vw',\n\t\t\tfontSize: '14px',\n\t\t},\n\t\t[theme.breakpoints.down('xs')]: {\n\t\t\tpadding: '0 1vw',\n\t\t\tfontSize: '12px',\n\t\t},\n\t},\n\n\tlistLanguageDropdown: {\n\t\tposition: 'absolute',\n\t\ttop: '110%',\n\t\twidth: '100%',\n\t\tleft: 0,\n\t\tminWidth: '210px',\n\t\tbackgroundColor: 'rgba(0, 0, 0, 0.4);',\n\t\tborderRadius: '5px',\n\t\tzIndex: '1101',\n\t\t// border: `1px solid #000`,\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\tminWidth: '160px',\n\t\t\tmaxWidth: '160px',\n\t\t},\n\t\t[theme.breakpoints.down('xs')]: {\n\t\t\tminWidth: '130px',\n\t\t\tmaxWidth: '130px',\n\n\t\t},\n\t},\n\n\titemLanguageDropdown: {\n\t\tdisplay: 'inline-flex',\n\t\talignItems: 'center',\n\t\theight: '45px',\n\t\tpadding: '10px 10px',\n\t\twidth: '100%',\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\tminWidth: '160',\n\t\t\theight: '30px',\n\t\t\tpadding: '5px',\n\t\t},\n\t\t'&:hover': {\n\t\t\tbackgroundColor: 'rgba(0, 0, 0, 0.6);',\n\t\t\t// borderRadius: '5px',\n\t\t}\n\t},\n\n\titemLanguageDropdown_selected: {\n\t\tdisplay: 'inline-flex',\n\t\talignItems: 'center',\n\t\theight: '45px',\n\t\tpadding: '10px 10px',\n\t\twidth: '100%',\n\t\tbackgroundColor: 'rgba(0, 0, 0, 0.6);',\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\tminWidth: '160',\n\t\t\theight: '30px',\n\t\t\tpadding: '5px',\n\t\t}\n\t},\n\n\titemLanguageDropdown_language: {\n\t\tmarginLeft: '20px',\n\t\tcolor: color.white,\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\t// marginLeft: '6.25vw',\n\t\t\tmarginLeft: '10px',\n\t\t},\n\t\t[theme.breakpoints.down('xs')]: {\n\t\t\t// marginLeft: '6.25vw',\n\t\t\tmarginLeft: '5px',\n\t\t},\n\t},\n\n\tdropDownLanguage__dropdownIcon: {\n\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\t// width: '3.125vw',\n\t\t\t// height: '3.125vw',\n\t\t},\n\t}\n}));\n","import React, { useEffect, useState, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport HTTPService from 'services/HTTPServices';\nimport useOnClickOutside from \"shared/hooks/useOnClickOutside\";\nimport { KEY_LANGUAGE } from 'config/localStorageKey';\n\nimport EnglandFlag from 'assets/img/flags/flag_en_icon.png';\nimport VietnameseFlag from 'assets/img/flags/flag_vi_icon.png';\nimport IconDropdown from 'assets/img/flags/icon_check.png';\nimport IconLanguage from 'assets/img/flags/ic_langu.png';\nimport { useStyles } from \"./styles\";\n\nconst ApiDomain = process.env.REACT_APP_API_DOMAIN;\n\nconst listLanguage = [\n\t{\n\t\tid: 1,\n\t\tlanguage: \"English\",\n\t\tflag: EnglandFlag,\n\t\ticonLang: IconLanguage,\n\t\tcode: \"en\"\n\t},\n\t{\n\t\tid: 2,\n\t\tlanguage: \"Vietnamese\",\n\t\tflag: VietnameseFlag,\n\t\ticonLang: IconLanguage,\n\t\tcode: \"vi\"\n\t}\n];\n\nexport const updateLanguage = () => {\n\tconst language = localStorage.getItem(KEY_LANGUAGE);\n\n\treturn HTTPService.sendRequestWithToken('POST', ApiDomain + '/api/v1/profile/change-language', undefined, {\n\t\tlanguage: language\n\t})\n};\n\nconst ChangeLanguage = () => {\n\tconst classes = useStyles();\n\tconst { i18n } = useTranslation();\n\tconst [openDropdownLanguage, setOpenDropdownLanguage] = useState(false);\n\tconst [currentLanguage, setCurrentLanguage] = useState(listLanguage[0]);\n\tconst refDropdownLanguage = useRef();\n\n\tuseEffect(() => {\n\t\tconst i18nextLng = localStorage.getItem(KEY_LANGUAGE);\n\t\tif (i18nextLng) {\n\t\t\tconst language = listLanguage.find(lang => lang.code === i18nextLng);\n\t\t\tif (language) {\n\t\t\t\treturn setCurrentLanguage(language);\n\t\t\t}\n\t\t}\n\t\treturn setCurrentLanguage(listLanguage[0]);\n\t}, []);\n\n\tuseOnClickOutside(refDropdownLanguage, () => setOpenDropdownLanguage(false));\n\n\tconst selectLanguage = language => {\n\t\tsetCurrentLanguage(language);\n\t\tsetOpenDropdownLanguage(false);\n\t\ti18n.changeLanguage(language.code);\n\t\tlocalStorage.setItem(KEY_LANGUAGE, language.code);\n\t};\n\n\tconst renderListLanguage = () => {\n\t\tif (openDropdownLanguage) {\n\t\t\tconst i18nextLng = localStorage.getItem(KEY_LANGUAGE);\n\t\t\treturn (\n\t\t\t\t
\n\t\t\t\t\t{listLanguage.map(item => {\n\t\t\t\t\t\tlet classLaguage = classes.itemLanguageDropdown\n\t\t\t\t\t\tif (item.code === i18nextLng) {\n\t\t\t\t\t\t\tclassLaguage = classes.itemLanguageDropdown_selected\n\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t
selectLanguage(item)}>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t{item.language}\n\t\t\t\t\t\t\n\t\t\t\t\t)}\n\t\t\t\t\t)}\n\t\t\t\t