\n\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\";\n\nexport const useStyles = makeStyles((theme) => ({\n winners: {\n position: 'relative',\n display: 'flex',\n flex: '100%',\n justifyContent:'center',\n flexDirection: 'column',\n alignItems: 'flex-start',\n marginBottom: '15px',\n [theme.breakpoints.down('sm')]: {\n marginBottom: '10px',\n maxWidth: '1560px',\n width: '100%',\n },\n [theme.breakpoints.down('xs')]: {\n maxWidth: '1560px',\n width: '100%',\n marginBottom: '5px',\n }\n },\n\n winner_title: {\n position: 'relative',\n display: 'flex',\n alignItems: 'flex-end',\n justifyContent: 'center',\n width: '100%',\n [theme.breakpoints.down('xs')]: {\n justifyContent: 'center',\n width: '100%'\n },\n '& span': {\n display: 'flex',\n alignItems: 'flex-start',\n justifyContent: 'center',\n flexDirection: 'column',\n textDecoration: 'underline',\n margin: '0px',\n color: '#3d3939',\n fontSize: '36px',\n [theme.breakpoints.down('sm')]: {\n fontSize: '33px',\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: '28px',\n },\n }\n },\n title_group: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent:'center',\n alignItems: 'center'\n }, \n\n underText: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n margin: '0px',\n color: '#ea9e00',\n width: '100%',\n // marginTop: '5px',\n marginBottom: '3px',\n fontSize: '14px',\n [theme.breakpoints.down('sm')]: {\n fontSize: '13px',\n // marginTop: '3px',\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: '11px',\n // marginTop: '2px',\n }\n },\n\n winners__table__wrapper: {\n display: 'flex',\n width: '100%',\n borderRadius: '5px',\n backgroundColor: '#ff9933',\n justifyContent: 'space-around',\n [theme.breakpoints.down('sm')]: {\n flexWrap: 'wrap',\n borderRadius: '0px',\n fontSize: font.nomalSize__mobile,\n },\n },\n\n winners__table: {\n display: 'flex',\n justifyContent: 'center',\n flex: '1',\n // backgroundColor: '#2e041c',\n \n },\n winner1stCol: {\n paddingLeft: '20px',\n [theme.breakpoints.down('sm')]: {\n paddingLeft: '6.25vw',\n },\n },\n\n contanner__image: {\n display: 'flex',\n position: 'relative',\n height: '100%',\n width: '70px',\n [theme.breakpoints.down('sm')]: {\n width: '70px',\n },\n [theme.breakpoints.down('xs')]: {\n width: '60px',\n },\n },\n\n image_title: {\n position: 'absolute',\n bottom: '0px',\n left: '0px',\n height: '70px',\n width: 'auto',\n margin:'2px 2px 0px 2px',\n [theme.breakpoints.down('sm')]: {\n margin:'2px 2px 0px 2px',\n height: '70px',\n },\n [theme.breakpoints.down('xs')]: {\n margin:'2px 2px 0px 2px',\n height: '60px',\n }\n },\n}));\n","import React from 'react';\nimport TableNumber from 'components/Numbers';\nimport { useStyles } from './styles';\nimport Image from 'react-image-webp';\nimport { useTranslation } from 'react-i18next';\n\nimport Top1 from 'assets/img/home/champion_icon.png';\nimport Top1Wepb from 'assets/imgWebp/champion_icon.webp';\n\nimport './styles.css'\n\nconst TableTopThree = ({data, period = {date: '', code: ''}}) => {\n const classes = useStyles()\n const {t} = useTranslation()\n \n const renderTitle = () => {\n let TimePeriod = '------------';\n if (period && period.date) {\n TimePeriod = `${period.date} - ${period.code}`\n }\n\n return (\n
\n
\n \n
\n
\n
\n {t('LastestResult')}\n \n
\n {TimePeriod}\n \n
\n \n
\n )\n }\n\n return
\n {renderTitle()}\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\";\n\nimport {font } from \"config/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n winners: {\n width: '100%',\n // padding: '5px',\n marginBottom: '15px',\n borderRadius: '5px',\n [theme.breakpoints.down('sm')]: {\n marginBottom: '10px',\n },\n [theme.breakpoints.down('xs')]: {\n marginBottom: '5px',\n }\n },\n\n\n winners__table__wrapper: props => ( {\n display: 'flex',\n width: '100%',\n backgroundColor: '#c1b8ae',\n padding: '10px 0 10px 0',\n borderRadius: '5px',\n justifyContent: 'space-around',\n [theme.breakpoints.down('sm')]: {\n borderRadius: '0px',\n fontSize: font.nomalSize__mobile,\n },\n }),\n\n winners__table: {\n display: 'flex',\n width: '100%',\n margin: '1px',\n flexDirection: 'row',\n justifyContent: 'space-around',\n alignItems: 'center', \n flexWrap: 'wrap',\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n flexWrap: 'wrap',\n },\n },\n\n winner_title: {\n position: 'relative',\n display: 'flex',\n alignItems: 'flex-end',\n marginLeft: '10px',\n '& span': {\n fontFamily: 'CenturyGothicBold',\n margin: '0px',\n color: '#3b3939',\n paddingBottom: '5px',\n fontSize: font.bigSize,\n [theme.breakpoints.down('sm')]: {\n fontSize: font.bigSize__mobile,\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: '4.2vw',\n paddingBottom: '3px',\n }\n }\n },\n\n image_title: {\n height: '12px',\n width: 'auto',\n margin:'2px 2px 0px 2px',\n [theme.breakpoints.down('sm')]: {\n margin:'2px 2px 0px 2px',\n }\n },\n table_container_numers: {\n display: 'flex',\n alignItems:'center',\n justifyContent: 'center',\n flexDirection: 'colum',\n marginTop:'5px',\n marginBottom:'5px',\n },\n table_number: {\n display: 'flex',\n alignItems:'center',\n justifyContent: 'center',\n borderRadius: '50%',\n width: '38px',\n height: '38px',\n fontSize: '28px',\n padding: '1px',\n margin: '5px',\n // fontFamily: font.boldFamily,\n // boxSizing: 'content-box',\n color: '#000',\n backgroundColor: '#fff',\n [theme.breakpoints.down('sm')]: {\n // borderRadius: '4px',\n fontSize: '24px',\n width: '30px',\n height: '30px',\n margin: '2px',\n },\n [theme.breakpoints.down('xs')]: {\n // borderRadius: '2px',\n fontSize: '4.5vw',\n width: '6vw',\n height: '6vw',\n margin: '1px',\n }\n }\n}));\n","import React from 'react';\nimport { useTheme } from '@material-ui/core/styles';\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\nimport { useStyles } from './styles';\n\nimport './styles.css'\nimport { map } from 'lodash';\n\nconst TableWinners = ({ data, index }) => {\n const props = {index}\n const classes = useStyles(props);\n const theme = useTheme();\n const matches = useMediaQuery(theme.breakpoints.down('sm'));\n\n const mapDataToTable = (data = [], header = []) => {\n if (data.length > 0) {\n let colum = 3;\n if (matches) {\n colum = Math.round(data.length / 2);\n }\n const body = [];\n for (let i = 0; i < 10 ; i+=colum) {\n const b = data.slice(i,i + colum)\n if (b.length > 0) {\n body.push(b)\n } else {\n break\n }\n }\n return {\n header,\n body\n };\n }\n\n return {\n header,\n body: data\n };\n };\n\n const renderTableDesktop = () => {\n const items = data.resuls;\n const table1 = mapDataToTable(items)\n return (\n
\n
\n {/*
*/}\n {map(table1.body, (itemArr, index)=> {\n return
\n {map(itemArr, (numbers,indexNumber)=> {\n return
{map(numbers, (number, z)=>{number})}
\n })}\n
\n })}\n
\n
\n )\n };\n\n const renderTitle = () => {\n return (\n
\n \n {data.name}\n \n
\n )\n }\n\n return
\n {renderTitle()}\n {renderTableDesktop()}\n
\n};\n\nexport default TableWinners;\n","import { makeStyles } from \"@material-ui/core/styles\";\n\nimport {font } from \"config/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n winners: {\n display: 'flex',\n position: 'absolute',\n right: '10px',\n bottom: '40%',\n width: 'auto',\n fontSize: '30px',\n justifyContent: 'flex-start',\n alignItems: 'flex-start',\n flexDirection:'column',\n minWidth: '120px',\n maxWidth: '200px',\n backgroundColor: '#c1b8ae',\n borderRadius: '5px',\n zIndex: '2',\n transform: \"translate(0, 50%)\",\n [theme.breakpoints.down('sm')]: {\n minWidth: '50px',\n // maxWidth: '150px',\n border: `1px solid #fff`,\n backgroundColor: '#fff',\n },\n [theme.breakpoints.down('xs')]: {\n minWidth: '90px',\n maxWidth: '150px',\n backgroundColor: '#fff',\n border: `1px solid #fff`,\n }\n },\n\n\n winners__table__wrapper: props => ( {\n display: 'flex',\n width: '100%',\n padding: '10px',\n justifyContent: 'space-around',\n [theme.breakpoints.down('sm')]: {\n fontSize: font.nomalSize__mobile,\n padding: '5px',\n },\n }),\n\n winners__table: {\n display: 'inline-block',\n width: '100%',\n margin: '1px',\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n },\n },\n\n winner_title: {\n position: 'relative',\n display: 'flex',\n width: '100%',\n alignItems: 'flex-start',\n justifyContent: 'center',\n flexDirection: 'column',\n padding: '10px',\n backgroundImage: 'linear-gradient(to bottom, #f59b07 , #ec7a00)',\n borderTopLeftRadius: '5px',\n borderTopRightRadius: '5px',\n [theme.breakpoints.down('sm')]: {\n padding: '5px',\n },\n '& span': {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n fontFamily: font.boldFamily,\n margin: '0px',\n color: 'white',\n fontSize: font.nomalSize,\n [theme.breakpoints.down('sm')]: {\n // fontSize: font.nomalSize__mobile,\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: font.nomalSize__mobile,\n }\n }\n },\n\n rowSingle: {\n display: 'flex',\n alignItems: 'flex-start',\n justifyContent: 'center',\n '& pre': {\n display: 'flex',\n flex: '0.5',\n alignItems: 'center',\n justifyContent: 'flex-start',\n margin: '0px',\n color: 'black',\n // fontFamily: font.boldFamily,\n fontSize: font.nomalSize,\n [theme.breakpoints.down('sm')]: {\n // fontSize: font.nomalSize__mobile,\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: font.nomalSize__mobile,\n }\n },\n '& :nth-child(2)': {\n justifyContent: 'flex-end',\n },\n },\n rowMulti: {\n display: 'flex',\n width: '100%',\n alignItems: 'flex-start',\n justifyContent: 'center',\n flexDirection: 'column',\n '& span': {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n // fontFamily: font.boldFamily,\n margin: '0px',\n color: 'black',\n fontSize: font.nomalSize,\n [theme.breakpoints.down('sm')]: {\n // fontSize: font.nomalSize__mobile,\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: font.nomalSize__mobile,\n }\n }\n },\n rowMultiItenm: {\n display: 'flex',\n alignItems: 'flex-start',\n justifyContent: 'flex-start',\n flexDirection: 'row',\n flexWrap: 'wrap',\n width: '100%',\n '& span': {\n display: 'flex',\n width: '50%',\n alignItems: 'center',\n justifyContent: 'center',\n // fontFamily: font.boldFamily,\n margin: '0px',\n color: 'black',\n fontSize: font.nomalSize,\n [theme.breakpoints.down('sm')]: {\n fontSize: font.nomalSize__mobile,\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: font.nomalSize__mobile,\n }\n }\n },\n\n image_title: {\n height: '12px',\n width: 'auto',\n margin:'2px 2px 0px 2px',\n [theme.breakpoints.down('sm')]: {\n margin:'2px 2px 0px 2px',\n }\n },\n bold__content: {\n fontFamily: font.boldFamily,\n // marginRight: '10px'\n paddingRight: '10px'\n }\n\n}));\n","import React, { useState, useEffect } from 'react';\nimport { map, get } from 'lodash';\nimport { useTranslation } from 'react-i18next';\nimport { useStyles } from './styles';\n\nconst DialogDetail = ({ data, index }) => {\n\tconst props = { index }\n\tconst {t} = useTranslation()\n\tconst classes = useStyles(props);\n\tconst [mapDataDialog, setMapDataDialog] = useState({\n\t\tprizeList: [],\n\t\tsinglePrizes: []\n\t})\n\n\tuseEffect(()=> {\n\t\tconst mData = mapDataResult(data)\n\t\tsetMapDataDialog(mData)\n\t}, [data])\n\n\tconst mapDataResult = function (data) {\n\t\tconst periodNext = get(data, 'draw_no', 'N/A')\n\t\tconst periodDate = get(data, 'date_detail', 'N/A')\n\t\tconst prizeListData = get(data, 'prizeList', [])\n\t\tconst singlePrizeListData = get(data, 'singlePrizeList', [])\n\t\tconst singlePrizes = map(singlePrizeListData, (item, index) => {\n\t\t\treturn {\n\t\t\t\t...item,\n\t\t\t\tindex: index + 1,\n\t\t\t\tnumbers: item.result\n\t\t\t}\n\t\t})\n\n\t\tconst prizeList = map(prizeListData, (item, index) => {\n\t\t\treturn {\n\t\t\t\t...item,\n\t\t\t\tid: index,\n\t\t\t\tresuls: item.result.map((ressultString) => {\n\t\t\t\t\treturn ressultString\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\n\t\treturn {\n\t\t\tperiodDate,\n\t\t\tperiod: periodNext,\n\t\t\tsinglePrizes,\n\t\t\tprizeList\n\t\t}\n\t}\n\n\tconst renderContent = () => {\n\t\tconst {singlePrizes, prizeList} = mapDataDialog\n\t\treturn (\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t{map(singlePrizes, (item, index)=>{\n\t\t\t\t\t\treturn
\n\t\t\t\t\t\t\t
{item.name}\n\t\t\t\t\t\t\t
{item.result}\n\t\t\t\t\t\t
\n\t\t\t\t\t})}\n\t\t\t\t\t
\n\t\t\t\t\t{map(prizeList, (multpPrize, i)=>{\n\t\t\t\t\t\treturn
\n\t\t\t\t\t\t\t
{multpPrize.name}\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t{map(multpPrize.resuls, (number, j)=>{\n\t\t\t\t\t\t\t\treturn {number}})}\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t})}\n\t\t\t\t
\n\t\t\t
\n\t\t)\n\t};\n\n\tconst renderTitle = () => {\n\t\tconst drawTitle = `${t('DrawNo')}${mapDataDialog.period}`\n\t\tconst drawDate = `${mapDataDialog.periodDate}`\n\t\treturn (\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t{drawTitle}\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t{drawDate}\n\t\t\t\t\n\t\t\t
\n\t\t)\n\t}\n\n\treturn
\n\t\t{renderTitle()}\n\t\t{renderContent()}\n\t
\n};\n\nexport default DialogDetail;\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 alignItems: 'flex-start',\n minHeight: '100%',\n flexDirection: 'column',\n [theme.breakpoints.down('sm')]: {\n // backgroundColor: color.mainBackground\n }\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 flexFlow: 'column',\n alignItems: 'center',\n width: '100%',\n marginRight: '0',\n flexDirection: 'row',\n height: '35px',\n marginBottom: '10px',\n [theme.breakpoints.down('sm')]: {\n backgroundColor: '#e1e1df',\n justifyContent: 'space-around',\n width: '100%',\n marginRight: '0',\n flexDirection: 'row',\n height: '35px', \n marginBottom: '5px',\n marginTop: '5px'\n },\n [theme.breakpoints.down('xs')]: {\n justifyContent: 'space-around',\n backgroundColor: '#e1e1df',\n marginBottom: '5px',\n marginTop: '5px',\n marginRight: '0',\n width: '100%',\n height: '30px', \n }\n },\n\n content: {\n display: 'inline-block',\n justifyContent: 'center',\n alignItems: 'center',\n width: '100%',\n [theme.breakpoints.down('sm')]: {\n \n },\n [theme.breakpoints.down('xs')]: {\n // width: 'calc(100% -120px)',\n }\n },\n\n menuItem : {\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n fontSize: font.nomalSize,\n height: '100%',\n padding: '0px 10px 0px 10px',\n cursor: 'pointer',\n zIndex: '1',\n color: 'black',\n borderRadius: '5px',\n marginRight: '10px',\n [theme.breakpoints.down('sm')]: {\n marginRight: '0px',\n justifyContent: 'center',\n padding: '5px 10px 5px 10px',\n fontSize: font.nomalSize__mobile,\n },\n [theme.breakpoints.down('xs')]: {\n justifyContent: 'center',\n padding: '10px 2px 10px 2px',\n marginRight: '0px',\n fontSize: '2.5vw',\n }\n },\n menuItemSelected: {\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n fontSize: font.nomalSize,\n height: '100%',\n cursor: 'pointer',\n zIndex: '1',\n color: 'black',\n borderRadius: '20px',\n padding: '0px 10px 0px 10px',\n backgroundColor: '#ff9933',\n marginRight: '10px',\n [theme.breakpoints.down('sm')]: {\n borderRadius: '0px',\n justifyContent: 'center',\n padding: '0px 10px 0px 10px',\n fontSize: font.nomalSize__mobile,\n backgroundColor: '#ff9933',\n },\n [theme.breakpoints.down('xs')]: {\n borderRadius: '0px',\n justifyContent: 'center',\n padding: '10px 2px 10px 2px',\n fontSize: '2.5vw',\n backgroundColor: '#ff9933',\n } \n },\n dialog_result: {\n display: 'flex',\n position: 'absolute',\n right: '0',\n fontSize: '30px',\n justifyContent: 'flex-start',\n alignItems: 'flex-start',\n flexDirection:'column'\n }\n}));\n","import React, { useContext, useState, useEffect } from 'react';\nimport { AuthContext } from 'context/AuthContext'\nimport { useTranslation } from 'react-i18next';\nimport { map, get } from 'lodash';\nimport RTable from './../Results/RTable';\nimport TableTopThreeView from './../Home/TableTopThree'\nimport TableWinners from './../Home/TableWinners'\nimport DialogDetail from './../Home/DialogDetail'\nimport {stringToArray} from './../../utils'\nimport { Hidden } from '@material-ui/core';\nimport { useStyles } from './styles';\nimport Api from 'services/Api';\n\nconst Home = (props) => {\n\tconst classes = useStyles()\n\tconst authContent = useContext(AuthContext);\n\tconst { resultHomeData } = authContent\n\tconst [daySelected, setDaySelected] = useState('')\n\tconst [selectIndex, setSelectIndex] = useState(-1)\n\tconst [dataDayOfWeek, setDataDayOfWeek] = useState(null)\n\tconst [dataSelectToShow, setDataSelectToShow] = useState(null)\n\tconst [mapDataDefault, setMapDataDefault] = useState({\n\t\tdrawTime: {},\n\t\tprizeList: [],\n\t\tsinglePrizes: []\n\t})\n\tconst [dataMap, setDataMap] = useState({\n\t\theader: [],\n\t\tbody: []\n\t})\n\t\n\tconst {t} = useTranslation()\n\tuseEffect(()=> {\n\t\tif (daySelected === '') {\n\t\t\tsetMapDataDefault(resultHomeData);\n\t\t}\n\n\t\tauthContent.homeFunc = () => {\n\t\t\tsetDaySelected('')\n\t\t}\n\t\t\n\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [resultHomeData.prizeList, t])\n\n\tconst days = ['Mon','Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];\n\tconst header = [t('Day'), t('Date'), t('Result'), t('Prize')]\n\tconst mapDataToTable = (data) => {\n\t\tconst body = map(data, (resul, index) => {\n\t\t\treturn [\n\t\t\t\tt(resul.dayOfWeek),\n\t\t\t\tresul.date,\n\t\t\t\tstringToArray(resul.result),\n\t\t\t\tresul.prize_name\n\t\t\t]\n\t\t})\n\t\t\n\t\treturn {\n\t\t\theader,\n\t\t\tbody\n\t\t}\n\t}\n\n\t//============================//\n\t//\n\t//============================//\n\tconst handleSelected = (select) => {\n\t\tif (select !== daySelected) {\n\t\t\tsetDaySelected(select);\n\t\t\tsetDataSelectToShow(null);\n\t\t\tsetSelectIndex(-1);\n\t\t\tApi.requestPageResult(select).then((res) => {\n\t\t\t\tconst isSuccess = get(res, 'data.success', false);\n\t\t\t\tif (isSuccess) {\n\t\t\t\t\tconst data = get(res, 'data.data', {});\n\t\t\t\t\tconst hData = mapDataToTable(data)\n\t\t\t\t\tsetDataMap(hData)\n\t\t\t\t\tsetDataDayOfWeek(data)\n\t\t\t\t} else {\n\t\t\t\t\tconst hData = mapDataToTable([])\n\t\t\t\t\tsetDataMap(hData)\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\tconst handleMouseMove = (index)=> {\n\t\tif (selectIndex === -1) {\n\t\t\tif (dataDayOfWeek && dataDayOfWeek.length > index && index >= 0) {\n\t\t\t\tconst data = dataDayOfWeek[index]\n\t\t\t\tif (data !== dataSelectToShow) {\n\t\t\t\t\tsetDataSelectToShow(data);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tconst handleMouseLeve = (index)=> {\n\t\tif (selectIndex === -1) {\n\t\t\tsetDataSelectToShow(null);\n\t\t}\n\t}\n\t//============================//\n\t//\n\t//============================//\n\tconst handleShowResultDialog = (index)=> {\n\t\tif (dataDayOfWeek && dataDayOfWeek.length > index && index >= 0) {\n\t\t\tconst data = dataDayOfWeek[index]\n\t\t\tsetDataSelectToShow(data);\n\t\t} else {\n\t\t\tsetDataSelectToShow(null);\n\t\t}\n\t\tsetSelectIndex(index);\n\t}\n\n\tconst renderDialogDetailResult = ()=> {\n\t\tif (dataSelectToShow) {\n\t\t\treturn
\n\t\t}\n\t\treturn null\n\t}\n\t\n\tconst renderFirstMultPrize = ()=> {\n\t\tif (mapDataDefault.prizeList && mapDataDefault.prizeList.length > 0) {\n\t\t\treturn <>\n\t\t\t{\n\t\t\t\tmap(mapDataDefault.prizeList, (item, index) => {\n\t\t\t\t\treturn
\n\t\t\t\t})\n\t\t\t}\n\t\t\t\n\t\t}\n\t\treturn null;\n\t}\n\n\tconst handleRenderResult = () => {\n\t\tif (daySelected === '') {\n\t\t\treturn <>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t{renderFirstMultPrize()}\n\t\t\t\n\t\t} else {\n\t\t\treturn <>\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{renderDialogDetailResult()}\n\t\t\t\t
\n\t\t\t\n\t\t}\n\t}\n\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\t\tdays.map((day, index) =>\n\t\t\t\t\t\t{\t\n\t\t\t\t\t\t\tlet classSelected = classes.menuItem\n\t\t\t\t\t\t\tif (day === daySelected) {\n\t\t\t\t\t\t\t\tclassSelected = classes.menuItemSelected\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn
handleSelected(day)}> {t(day)}
\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t\t{handleRenderResult()}\n\t\t\t\t
\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t{\n\t\t\t\t\t\tdays.map((day, index) =>\n\t\t\t\t\t\t{\t\n\t\t\t\t\t\t\tlet classSelected = classes.menuItem\n\t\t\t\t\t\t\tif (day === daySelected) {\n\t\t\t\t\t\t\t\tclassSelected = classes.menuItemSelected\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn
handleSelected(day)}> {t(day)}
\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\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\";\n\nimport { font } from \"config/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n container_page: {\n margin: '0 10px 0 10px',\n [theme.breakpoints.down('sm')]: {\n margin: '0 10px 0 10px',\n },\n [theme.breakpoints.down('xs')]: {\n\t\t\tmargin: '0 10px 0 10px',\n\t\t}\n },\n howtoplay_title: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n textTransform: 'uppercase',\n '& span': {\n color: 'black',\n padding:'5px',\n paddingLeft:'0px',\n fontSize: '25px',\n fontFamily: font.boldFamily,\n [theme.breakpoints.down('sm')]: {\n fontSize: '3.0vw',\n }\n },\n [theme.breakpoints.down('sm')]: {\n margin: '0 10px 0 10px',\n }\n },\n\n lable_image: {\n height: '12px',\n width: 'auto',\n margin:'2px 2px 0px 0px'\n },\n\n content: {\n display: 'flex',\n margin: '1px',\n color: 'black',\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 content_center: {\n display: 'flex',\n justifyContent:'flex-start',\n alignItems:'flex-start',\n fontSize: font.nomalSize,\n margin: '5px 0px 0 0px',\n whiteSpace: 'pre-wrap',\n color: 'black',\n textAlign: 'justify',\n textJustify: 'inter-word',\n [theme.breakpoints.down('sm')]: {\n fontSize: font.nomalSize__mobile,\n margin: '3px 0px 0 0px',\n }\n },\n content__image: {\n display: 'flex',\n justifyContent:'center',\n alignItems:'flex-start',\n margin: '1px',\n [theme.breakpoints.down('sm')]: {\n fontSize: font.nomalSize__mobile,\n margin: '0 10px 0 10px',\n }\n },\n imageItemFlag: {\n height: '200px',\n\t\tmargin: '5px',\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\theight: '150px',\n\t\t},\n\t\t[theme.breakpoints.down('xs')]: {\n\t\t\theight: '20vw',\n\t\t}\n },\n content_title: {\n fontSize: font.nomalSize,\n fontFamily: font.boldFamily,\n margin: '20px 0 0 0',\n whiteSpace: 'pre-wrap',\n [theme.breakpoints.down('sm')]: {\n fontSize: font.nomalSize__mobile,\n margin: '10px 0 10px 0',\n }\n },\n content_group: {\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'flex-start',\n flexDirection: 'row',\n },\n}));\n","import React from \"react\";\nimport Image from 'react-image-webp';\nimport { useTranslation } from 'react-i18next';\nimport { useStyles } from './styles';\n\nimport clamp from 'assets/img/common/res.png';\nimport clampWepb from 'assets/imgWebp/res.webp';\n\nconst HowToPlay = () => {\n const classes = useStyles()\n const {t} = useTranslation();\n \n return (\n
\n
\n \n {t('ResponsiblePlay')}\n
\n
\n
\n \n {t('ResponseTitle1')}\n \n \n {t('ResponseContent1')}\n \n \n
\n
\n
\n \n {t('ResponseTitle2')}\n \n \n
\n {t('ResponseContent2')}\n \n
\n \n
\n
\n
\n
\n
\n \n {t('ResponseTitle3')}\n \n \n {t('ResponseContent3')}\n \n \n
\n
\n
\n \n {t('ResponseTitle4')}\n \n \n {t('ResponseContent4')}\n \n \n
\n
\n
\n \n {t('ResponseTitle5')}\n \n \n {t('ResponseContent5')}\n \n \n
\n
\n
\n \n {t('ResponseTitle6')}\n \n \n {t('ResponseContent6')}\n \n \n
\n
\n
\n )\n};\n\nexport default HowToPlay\n","import { makeStyles } from \"@material-ui/core/styles\";\n\nimport { color, font } from \"config/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n container_page: {\n [theme.breakpoints.down('sm')]: {\n backgroundColor: color.mainBackground\n }\n },\n about_title: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n textTransform: 'uppercase',\n '& span': {\n padding:'5px',\n fontSize: '40px',\n fontFamily: font.boldFamily,\n [theme.breakpoints.down('sm')]: {\n fontSize: '4.5vw',\n }\n },\n [theme.breakpoints.down('sm')]: {\n margin: '0 20px 0 20px',\n }\n\n },\n\n lable_image: {\n height: '12px',\n width: 'auto',\n margin:'2px 2px 0px 0px'\n },\n\n content: {\n display: 'flex',\n margin: '1px',\n color: 'black',\n fontSize: '40px',\n '& span': {\n fontSize: '40px',\n color: 'black',\n textAlign: 'left',\n [theme.breakpoints.down('sm')]: {\n fontSize: '4.5vw',\n }\n },\n [theme.breakpoints.down('sm')]: {\n fontSize: '4.5vw',\n margin: '0 10px 0 10px',\n }\n },\n content_title: {\n fontSize: font.nomalSize,\n fontFamily: font.boldFamily,\n margin: '20px 0 0 0',\n whiteSpace: 'pre-wrap',\n [theme.breakpoints.down('sm')]: {\n fontSize: font.nomalSize__mobile,\n margin: '10px 0 10px 0',\n }\n },\n content_center: {\n fontSize: font.nomalSize,\n whiteSpace: 'pre-wrap',\n \n textAlign: 'justify',\n textJustify: 'inter-word',\n\n [theme.breakpoints.down('sm')]: {\n fontSize: font.nomalSize__mobile,\n // margin: '0 20px 0 20px',\n }\n },\n content_group: {\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'flex-start',\n flexDirection: 'row'\n },\n imageItem: {\n height: '300px',\n\t\tmargin: '5px',\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\theight: '250px',\n\t\t},\n\t\t[theme.breakpoints.down('xs')]: {\n\t\t\theight: '25vw',\n\t\t}\n }\n}));\n","import React from \"react\";\nimport { useTranslation } from 'react-i18next';\nimport { useStyles } from './styles';\nimport Image from 'react-image-webp';\n\nimport clamp from 'assets/img/common/about_us.png';\nimport clampWepb from 'assets/imgWebp/about_us.webp';\n\nconst AboutUs = () => {\n const classes = useStyles()\n const {t} = useTranslation();\n \n return (\n
\n
\n \n
\n
\n
\n \n
\n {t('AboutUsContent')}\n \n
\n
\n
\n
\n )\n};\n\nexport default AboutUs\n","import { makeStyles } from \"@material-ui/core/styles\";\n\nimport { color, font } from \"config/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n menu__list: {\n display: 'flex',\n padding: '20px 0 10px',\n alignItems: 'center',\n justifyContent: 'space-between',\n [theme.breakpoints.down('sm')]: {\n padding: '0px 0 0px',\n }\n },\n menu__routers: {\n display: 'flex',\n padding: '20px 0 10px',\n alignItems: 'center',\n justifyContent:'center',\n [theme.breakpoints.down('sm')]: {\n fontSize: '2.5vw',\n width: '100%',\n height: '40px',\n padding: '0px 0px 0px 0px',\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: '2.5vw',\n width: '100%',\n height: '30px',\n padding: '0px 0px 0px 0px',\n }\n },\n menu__item_language: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'flex-start',\n marginRight: '45px',\n color: color.black,\n [theme.breakpoints.down('sm')]: {\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n marginRight: '0px',\n width: '34%',\n fontSize: '2.0vw',\n height: '100%',\n color: 'black',\n },\n [theme.breakpoints.down('xs')]: {\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n marginRight: '0px',\n width: '34%',\n fontSize: '2.5vw',\n height: '100%',\n color: 'black',\n }\n },\n\n menu__item: {\n marginRight: '45px',\n color: color.black,\n [theme.breakpoints.down('sm')]: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n marginRight: '0px',\n width: '34%',\n fontSize: '2.0vw',\n height: '100%',\n color: 'black',\n },\n [theme.breakpoints.down('xs')]: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n marginRight: '0px',\n width: '34%',\n fontSize: '2.5vw',\n height: '100%',\n color: 'black',\n }\n },\n\n menu__item_selected: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'flex-start',\n color: color.black,\n fontFamily: font.boldFamily,\n '& .after': {\n display: 'none',\n border: `1px solid #ff9933`,\n borderRadius: '5px',\n backgroundColor: '#ff9933',\n width: '23px',\n height: '3px',\n marginTop: '2px',\n },\n [theme.breakpoints.down('sm')]: {\n justifyContent: 'center',\n alignItems: 'flex-start',\n color: '#fff',\n marginRight: '0px',\n // width: '100%',\n height: '100%',\n '& .after': {\n display: 'flex',\n position: 'absolute',\n top: '70%',\n border: `1px solid #ff9933`,\n backgroundColor: '#ff9933',\n }\n }\n },\n\n menu__item_link: {\n position: 'relative',\n display: 'flex',\n color: color.black,\n fontSize: '18px',\n whiteSpace: 'nowrap',\n [theme.breakpoints.down('sm')]: {\n color: 'black',\n fontSize: '18px',\n justifyContent: 'center',\n alignItems: 'center',\n marginRight: '0px',\n // width: '100%',\n height: '100%',\n },\n [theme.breakpoints.down('xs')]: {\n color: 'black',\n fontSize: '12px',\n justifyContent: 'center',\n // alignItems: 'center',\n marginRight: '0px',\n // width: '100%',\n height: '100%',\n },\n }\n}));\n","import React, { useContext } from 'react';\nimport { NavLink } from 'react-router-dom';\nimport { useTranslation } from 'react-i18next';\nimport ChangeLanguage from './../../components/ChangeLanguage';\nimport { AuthContext } from 'context/AuthContext'\nimport { useStyles } from \"./styles\"\nimport { Hidden } from '@material-ui/core';\n\nconst Menu = () => {\n\tconst classes = useStyles();\n\tconst authContext = useContext(AuthContext);\n\tconst { t } = useTranslation();\n\tconst handleClick = () => {\n\t\tif (authContext.homeFunc) {\n\t\t\tauthContext.homeFunc();\n\t\t}\n\t}\n\treturn
\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t
\n\t\t\t
\n\t\t\t\t
{t('headerHome')}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\n\t\t\t
\n\t\t\t\t
{t('ResponsiblePlay')}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\n\t\t\t
\n\t\t\t\t
{t('AboutUs')}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t
\n};\n\nexport default Menu\n","import { makeStyles } from \"@material-ui/core/styles\";\nimport {font } from \"config/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n\tfooter: {\n\t\tdisplay: 'flex',\n\t\tjustifyContent: 'flex-end',\n\t\talignItems: 'flex-end',\n\t\tflexDirection: 'column',\n\t\t// height: layout.footerHeight,\n\t\theight: '100%',\n\t\tbackgroundColor: '#dcdcda',\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\t// height: '80px',\n\t\t\t// padding: '1vw 0',\n\t\t},\n\t\t[theme.breakpoints.down('xs')]: {\n\t\t\t// height: '60px',\n\t\t\t// padding: '1vw 0',\n\t\t}\n\t},\n\tfooterClass: {\n\t\tdisplay: 'flex',\n\t\twidth: \"100%\",\n\t\theight: \"100%\",\n\t\talignItems: 'center',\n\t\tjustifyContent: 'center',\n\t\tflexDirection: 'column',\n\t\ttextAlign: 'center',\n\t},\n\n\tfooterLeft: {\n\t\twidth: \"100%\",\n\t\tdisplay: 'flex',\n\t\talignItems: \"center\",\n\t\tjustifyContent: 'center'\n\t},\n\tfooterTextLeft: {\n\t\tdisplay: 'flex',\n\t\talignItems: \"center\",\n\t\tjustifyContent: 'center',\n\t\tflexDirection: 'row',\n\t\tflexWrap: 'wrap',\n\t\tfontSize: font.smallSize,\n\t\tmargin: '0px 20px 0 20px',\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\tfontSize: font.smallSize__mobile,\n\t\t}\n\t},\n\n\tfooterRight: {\n\t\twidth: \"100%\",\n\t\tdisplay: 'flex',\n\t\talignItems: \"center\",\n\t\tjustifyContent: 'center',\n\t\tfontSize: font.smallSize,\n\t\tcolor: 'black',\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\tfontSize: '2vw',\n\t\t\talignItems: \"center\",\n\t\t},\n\t\t'& pre': {\n\t\t\tfontSize: font.nomalSize,\n\t\t\t[theme.breakpoints.down('sm')]: {\n\t\t\t\tfontSize: '2vw',\n\t\t\t},\n\t\t}\n\t},\n\tfotter_containner_bottom: {\n\t\tdisplay: 'flex',\n\t\theight: '20px',\n\t\twidth: '100%',\n\t\tbackgroundColor: '#cacdc6',\n\t\tfontSize: font.smallSize,\n\t\t// height: '30%'\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\tfontSize: '2vw',\n\t\t\talignItems: \"center\",\n\t\t},\n\t\t'& pre': {\n\t\t\tfontSize: font.nomalSize,\n\t\t\t[theme.breakpoints.down('sm')]: {\n\t\t\t\tfontSize: '2vw',\n\t\t\t},\n\t\t}\n\t},\n\n\tfotter_containner_top: {\n\t\tdisplay: 'flex',\n\t\twidth: '100%',\n\t\theight: '100%'\n\t},\n\tfooterBottomContent: {\n\t\twidth: \"100%\",\n\t\theight: '30%',\n\t\tdisplay: 'flex',\n\t\talignItems: \"center\",\n\t\tjustifyContent: 'center',\n\t\tbackgroundColor: '#cacdc6',\n\t\tfontSize: font.smallSize,\n\t\tcolor: 'black',\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\tfontSize: '1.6vw',\n\t\t\talignItems: \"center\",\n\t\t},\n\t\t'& pre': {\n\t\t\tfontSize: font.nomalSize,\n\t\t\t[theme.breakpoints.down('sm')]: {\n\t\t\t\tfontSize: '1.6vw',\n\t\t\t},\n\t\t}\n\t},\n\n\tfooterDeposit: {\n\t\tmarginTop: '10px'\n\t},\n\t\n\timageItem: {\n\t\theight: '60px',\n\t\tmargin: '5px',\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\theight: '55px',\n\t\t\tmargin: '2px',\n\t\t},\n\t\t[theme.breakpoints.down('xs')]: {\n\t\t\theight: '8.5vw',\n\t\t\tmargin: '1px',\n\t\t}\n\t},\n\timageItemFlag: {\n\t\theight: '20px',\n\t\tmargin: '5px',\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\theight: '20px',\n\t\t},\n\t\t[theme.breakpoints.down('xs')]: {\n\t\t\theight: '4vw',\n\t\t}\n\t}\n\n}));\n","import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport Image from 'react-image-webp';\nimport { StyledContainerFooter } from \"config/styles\";\nimport { useStyles } from \"./styles\";\n\nimport bfooterPng1 from 'assets/img/footer/B1.png';\nimport bfooterPng1Wepb from 'assets/imgWebp/B1.webp';\nimport bfooterPng2 from 'assets/img/footer/B2.png';\nimport bfooterPng2Wepb from 'assets/imgWebp/B2.webp';\nimport bfooterPng3 from 'assets/img/footer/B3.png';\nimport bfooterPng3Wepb from 'assets/imgWebp/B3.webp';\nimport bfooterPng4 from 'assets/img/footer/B4.png';\nimport bfooterPng4Wepb from 'assets/imgWebp/B4.webp';\nimport bfooterPng5 from 'assets/img/footer/B5.png';\nimport bfooterPng5Wepb from 'assets/imgWebp/B5.webp';\n\nconst footerDataPayment = [\n\t{\n\t\tid: 1,\n\t\tname: 'company1',\n\t\turl: bfooterPng1,\n\t\twebUrl: bfooterPng1Wepb\n\t}, {\n\t\tid: 2,\n\t\tname: 'company2',\n\t\turl: bfooterPng2,\n\t\twebUrl: bfooterPng2Wepb\n\t} , {\n\t\tid: 3,\n\t\tname: 'company2',\n\t\turl: bfooterPng3,\n\t\twebUrl: bfooterPng3Wepb\n\t} , {\n\t\tid: 4,\n\t\tname: 'company2',\n\t\turl: bfooterPng4,\n\t\twebUrl: bfooterPng4Wepb\n\t} , {\n\t\tid: 5,\n\t\tname: 'company2',\n\t\turl: bfooterPng5,\n\t\twebUrl: bfooterPng5Wepb\n\t}\n]\n\nconst Footer = () => {\n\tconst { t } = useTranslation()\n\tconst classes = useStyles();\n\tconst handleClickImage = (e)=> {\n\t\tconsole.log('click image');\n\t}\n\tconst companyName = t('CompanyName')\n\tlet footerContent = t('FooterCopyright');\n\tfooterContent = footerContent.replace('[company_name]',companyName)\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\t
{t('FooterText')}\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tfooterDataPayment.map((itemIcon, index)=>)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t{footerContent}\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t
\n\t
\n};\n\nexport default Footer\n","import { makeStyles } from \"@material-ui/core/styles\";\nimport {layout } from \"config/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n containner: {\n position: 'relative',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'flex-end',\n width: '100%',\n minHeight: layout.headerHeighBg,\n marginBottom: '5px',\n [theme.breakpoints.down('sm')]: {\n minHeight: layout.headerHeighBg__mobile,\n '& ball__left': {\n display: 'flex'\n }\n },\n },\n \n img_logo: {\n position: 'absolute',\n left: '0',\n bottom: '0',\n width: '25%',\n [theme.breakpoints.down('sm')]: {\n transform: 'translateX(-50%)',\n width: '40%',\n left: '50%',\n bottom: '1%',\n },\n [theme.breakpoints.down('xs')]: {\n transform: 'translateX(-50%)',\n width: '45%',\n left: '50%',\n bottom: '1%',\n },\n },\n}));\n","import React from 'react';\nimport Image from 'react-image-webp';\nimport Logo from 'assets/img/home/logo.png';\nimport LogoWepb from 'assets/imgWebp/logo.webp';\nimport { useStyles } from './styles'\n\nconst LogoCompany = () => {\n const classes = useStyles();\n \n return (\n <>\n
\n \n
\n \n )\n};\n\nexport default LogoCompany\n","import { makeStyles } from \"@material-ui/core/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n loading: {\n position: 'fixed',\n width: '100vw',\n height: '100vh',\n top: '0',\n right: '0',\n bottom: '0',\n left: '0',\n backgroundColor: '#00000080',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n zIndex: 99999,\n },\n\n loading__image: {\n width: 48.3,\n height: 46.7,\n animation: 'rotation 1s steps(12) infinite',\n\n [theme.breakpoints.down('sm')]: {\n width: '7.546875vw',\n height: '7.296875vw',\n },\n },\n}));\n","import React, { useState, forwardRef, useImperativeHandle } from 'react';\n\nimport { useStyles } from './styles'\nimport LoaderImage from 'assets/img/common/loading.png'\n\nconst Loading = forwardRef((props, ref) => {\n const classes = useStyles();\n const [ isLoading, setIsLoading ] = useState(false);\n\n useImperativeHandle(ref, () => ({\n showLoading: () => setIsLoading(true),\n hideLoading: () => setIsLoading(false),\n }));\n\n return <>\n {\n isLoading &&\n
\n 
\n