chore: remove unwanted dependencies

src/components/common/accordion.tsx

@@ -1,26 +1,30 @@
 import {
-    Accordion,
-    AccordionSummary,
-    AccordionDetails,
-    Typography,
+	Accordion,
+	AccordionSummary,
+	AccordionDetails,
+	Typography,
 } from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
-const SimpleAccordion = () => {
-    return (
-        <Accordion>
-            <AccordionSummary
-                expandIcon={<ExpandMoreIcon />}
-                aria-controls="panel1a-content"
-                id="panel1a-header"
-            >
-                <Typography>Date</Typography>
-            </AccordionSummary>
-            <AccordionDetails>
-                <Typography>31/1/22</Typography>
-            </AccordionDetails>
-        </Accordion>
-    );
+type accordProps = {
+	title: string;
+};
+
+const SimpleAccordion = ({ title }: accordProps) => {
+	return (
+		<Accordion>
+			<AccordionSummary
+				expandIcon={<ExpandMoreIcon />}
+				aria-controls="panel1a-content"
+				id="panel1a-header"
+			>
+				<Typography>{title}</Typography>
+			</AccordionSummary>
+			<AccordionDetails>
+				<Typography>null</Typography>
+			</AccordionDetails>
+		</Accordion>
+	);
 };
 
 export { SimpleAccordion };

src/components/common/postAccordion.tsx

@@ -0,0 +1,39 @@
+import {
+	Accordion,
+	AccordionSummary,
+	AccordionDetails,
+	Typography,
+} from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { useLocation } from "react-use";
+
+type accordProps = {
+	title: string;
+	path: string;
+};
+
+const PostAccordion = ({ title, path }: accordProps) => {
+	const location = useLocation();
+	return (
+		<Accordion
+			sx={
+				location.pathname === path
+					? { background: "#0E2EA0", color: "white" }
+					: { background: "initial" }
+			}
+		>
+			<AccordionSummary
+				expandIcon={<ExpandMoreIcon />}
+				aria-controls="panel1a-content"
+				id="panel1a-header"
+			>
+				<Typography onClick={() => {}}>{title}</Typography>
+			</AccordionSummary>
+			<AccordionDetails>
+				<Typography>null</Typography>
+			</AccordionDetails>
+		</Accordion>
+	);
+};
+
+export default PostAccordion;

src/components/widgets/balanceBar.tsx

@@ -0,0 +1,29 @@
+import { Box, Divider, Typography } from "@mui/material";
+import { useLocation } from "react-use";
+import PostAccordion from "../common/postAccordion";
+
+const BalanceBar = () => {
+	const location = useLocation();
+	return (
+		<Box
+			sx={{
+				background: "white",
+				width: "300px",
+				height: "222px",
+				borderRadius: "5px",
+				mx: 2,
+				my: 1,
+			}}
+		>
+			<Typography variant="h6" sx={{ mx: 2 }}>
+				My Balance
+			</Typography>
+			<Divider>50 USDT</Divider>
+			<PostAccordion title="Withdraw" path="/withdrawal" />
+			<PostAccordion title="Bet History" path="/history" />
+			<PostAccordion title="My Account Info" path="/account-info" />
+		</Box>
+	);
+};
+
+export default BalanceBar;

src/components/widgets/betHistoryTabs.tsx

@@ -0,0 +1,124 @@
+import { useState } from "react";
+import { TabContext, TabList, TabPanel } from "@mui/lab";
+import { Box, Tab, Divider, Typography } from "@mui/material";
+import { bets } from "/src/api/data/bet-history";
+
+export default function LabTabs() {
+	const [value, setValue] = useState("1");
+
+	const handleChange = (_: React.SyntheticEvent, newValue: string) => {
+		setValue(newValue);
+	};
+
+	return (
+		<Box sx={{ width: "100%", typography: "body1" }}>
+			<TabContext value={value}>
+				<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+					<TabList onChange={handleChange} aria-label="bet histories tab">
+						<Tab label="All Bets" value="1" />
+						<Tab label="Cashouts" value="2" />
+						<Tab label="Unsettled" value="3" />
+					</TabList>
+				</Box>
+				<TabPanel value="1">
+					<Divider />
+					{bets.map((bet) => (
+						<>
+							<Box
+								sx={{
+									display: "flex",
+									justifyContent: "space-between",
+								}}
+							>
+								<div>
+									<Typography>Date</Typography>
+									<Typography>{bet.date}</Typography>
+								</div>
+								<div>
+									<Typography>Game</Typography>
+									<Typography>{bet.game}</Typography>
+								</div>
+								<div>
+									<Typography>Total Stake</Typography>
+									<Typography>{bet.stake}</Typography>
+								</div>
+								<div>
+									<Typography>Potential Winnings</Typography>
+									<Typography>{bet.potentialWinnings}</Typography>
+								</div>
+								<Typography
+									sx={{
+										border: "2px solid",
+										textAlign: "center",
+										color: "common.white",
+										width: "100px",
+										margin: " auto 0",
+										backgroundColor:
+											bet.status === "Won"
+												? "primary.main"
+												: null || bet.status === "Running"
+												? "secondary.main"
+												: null || bet.status === "Lost"
+												? "error.main"
+												: null,
+									}}
+								>
+									{bet.status}
+								</Typography>
+							</Box>
+							<Divider />
+						</>
+					))}
+				</TabPanel>
+				<TabPanel value="2">No Bets Available</TabPanel>
+				<TabPanel value="3">
+					{bets.map((bet) => {
+						if (bet.status === "Running") {
+							return (
+								<>
+									<Box
+										sx={{
+											display: "flex",
+											justifyContent: "space-between",
+										}}
+									>
+										<div>
+											<Typography>Date</Typography>
+											<Typography>{bet.date}</Typography>
+										</div>
+										<div>
+											<Typography>Game</Typography>
+											<Typography>{bet.game}</Typography>
+										</div>
+										<div>
+											<Typography>Total Stake</Typography>
+											<Typography>{bet.stake}</Typography>
+										</div>
+										<div>
+											<Typography>Potential Winnings</Typography>
+											<Typography>{bet.potentialWinnings}</Typography>
+										</div>
+										<Typography
+											sx={{
+												border: "2px solid",
+												textAlign: "center",
+												color: "common.white",
+												width: "100px",
+												margin: " auto 0",
+												bgcolor: "secondary.main",
+											}}
+										>
+											{bet.status}
+										</Typography>
+									</Box>
+									<Divider />
+								</>
+							);
+						}
+						return null;
+					})}
+				</TabPanel>
+			</TabContext>
+		</Box>
+	);
+}

src/components/widgets/betSliptabs.tsx

@@ -0,0 +1,56 @@
+import { useState } from "react";
+import { TabContext, TabList, TabPanel } from "@mui/lab";
+import { Box, Tab, Typography, TextField } from "@mui/material";
+import { Button } from "../common";
+
+const BetSliptabs = () => {
+	const [value, setValue] = useState("1");
+
+	const handleChange = (_: React.SyntheticEvent, newValue: string) => {
+		setValue(newValue);
+	};
+
+	return (
+		<Box
+			sx={{
+				width: "100%",
+				typography: "body1",
+				background: "white",
+				height: "250px",
+				borderRadius: "5px",
+			}}
+		>
+			<TabContext value={value}>
+				<Box
+					sx={{
+						borderBottom: 1,
+						borderColor: "divider",
+					}}
+				>
+					<TabList onChange={handleChange} aria-label="bet histories tab">
+						<Tab label="Bet Slip" value="1" />
+						<Tab label="My Bets (0)" value="2" />
+					</TabList>
+				</Box>
+				<TabPanel value="1">
+					<Box sx={{ textAlign: "center" }}>
+						<Typography variant="caption">
+							please insert a booking code
+						</Typography>
+						<TextField label="Booking Code" sx={{ my: 1 }} fullWidth />
+						<Button
+							variant="contained"
+							color="inherit"
+							sx={{ width: "200px", my: 1 }}
+						>
+							Load
+						</Button>
+					</Box>
+				</TabPanel>
+				<TabPanel value="2">No Bets Available</TabPanel>
+			</TabContext>
+		</Box>
+	);
+};
+
+export default BetSliptabs;

src/components/widgets/darwerLeft.tsx

@@ -0,0 +1,61 @@
+import { Box, List, ListItem, Typography } from "@mui/material";
+import React from "react";
+import { SimpleAccordion } from "../common";
+
+type drawerPorps = {
+	title: string;
+};
+const PopularGames = ({ title }: drawerPorps) => {
+	return (
+		<Box
+			sx={{
+				background: "white",
+				height: "439px",
+				width: "200px",
+				borderRadius: "5px",
+				m: 2,
+			}}
+		>
+			<Typography variant="h6" sx={{ m: 2 }}>
+				{title}
+			</Typography>
+			<SimpleAccordion title="Today's Game" />
+			<SimpleAccordion title="Upcoming Games" />
+			<SimpleAccordion title="English League (EPL)" />
+			<SimpleAccordion title="Seria A" />
+			<SimpleAccordion title="Laliga" />
+			<SimpleAccordion title="Bundesliga" />
+			<SimpleAccordion title="Ligue1" />
+		</Box>
+	);
+};
+
+const FootBallGames = ({ title }: drawerPorps) => {
+	return (
+		<Box
+			sx={{
+				background: "white",
+				height: "1000px",
+				width: "200px",
+				borderRadius: "5px",
+				m: 2,
+			}}
+		>
+			<Typography variant="h6" sx={{ m: 2 }}>
+				{title}
+			</Typography>
+			<SimpleAccordion title="Today's Game" />
+			<SimpleAccordion title="Upcoming Games" />
+			<SimpleAccordion title="English League (EPL)" />
+			<SimpleAccordion title="Seria A" />
+			<SimpleAccordion title="Laliga" />
+			<SimpleAccordion title="Bundesliga" />
+			<SimpleAccordion title="Ligue1" />
+			<Box>
+				<Typography sx={{ m: 3 }}>A-Z</Typography>
+			</Box>
+		</Box>
+	);
+};
+
+export { PopularGames, FootBallGames };

src/components/widgets/drawerRight.tsx

@@ -0,0 +1,26 @@
+import { Box } from "@mui/material";
+import { useLocation } from "react-use";
+import BetSliptabs from "./betSliptabs";
+
+const DrawerRight = () => {
+	const location = useLocation();
+	return (
+		<Box
+			sx={
+				location.pathname === "/live" || location.pathname === "/"
+					? {
+							background: "#2A3149",
+							width: "290px",
+							borderRadius: "5px",
+							m: 2,
+							p: 1,
+					  }
+					: { display: "none" }
+			}
+		>
+			<BetSliptabs />
+		</Box>
+	);
+};
+
+export default DrawerRight;