Skip to content

S
sweepstake
Commit d500e4bf by Arjun Jhukal
Options

updated the player profile and setting form

parent c62de5ef
Showing with 643 additions and 4 deletions
package-lock.json
......@@ -14,12 +14,14 @@
"@reduxjs/toolkit": "^2.9.0",
"@tanstack/react-table": "^8.21.3",
"@wandersonalwes/iconsax-react": "0.0.10",
"apexcharts": "^5.3.5",
"formik": "^2.4.6",
"framer-motion": "^12.23.16",
"js-cookie": "^3.0.5",
"lightgallery": "^2.9.0-beta.1",
"next": "15.5.3",
"react": "^19.1.0",
"react-apexcharts": "^1.7.0",
"react-dom": "19.1.0",
"react-dropzone": "^14.3.8",
"react-quill-new": "3.4.6",
......@@ -1514,6 +1516,62 @@
"integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
"license": "MIT"
},
"node_modules/@svgdotjs/svg.draggable.js": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.draggable.js/-/svg.draggable.js-3.0.6.tgz",
"integrity": "sha512-7iJFm9lL3C40HQcqzEfezK2l+dW2CpoVY3b77KQGqc8GXWa6LhhmX5Ckv7alQfUXBuZbjpICZ+Dvq1czlGx7gA==",
"license": "MIT",
"peerDependencies": {
"@svgdotjs/svg.js": "^3.2.4"
}
},
"node_modules/@svgdotjs/svg.filter.js": {
"version": "3.0.9",
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.filter.js/-/svg.filter.js-3.0.9.tgz",
"integrity": "sha512-/69XMRCDoam2HgC4ldHIaDgeQf1ViHIsa0Ld4uWgiXtZ+E24DWHe/9Ib6kbNiZ7WRIdlVokUDR1Fg0kjIpkfbw==",
"license": "MIT",
"dependencies": {
"@svgdotjs/svg.js": "^3.2.4"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/@svgdotjs/svg.js": {
"version": "3.2.5",
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.js/-/svg.js-3.2.5.tgz",
"integrity": "sha512-/VNHWYhNu+BS7ktbYoVGrCmsXDh+chFMaONMwGNdIBcFHrWqk2jY8fNyr3DLdtQUIalvkPfM554ZSFa3dm3nxQ==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/Fuzzyma"
}
},
"node_modules/@svgdotjs/svg.resize.js": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.resize.js/-/svg.resize.js-2.0.5.tgz",
"integrity": "sha512-4heRW4B1QrJeENfi7326lUPYBCevj78FJs8kfeDxn5st0IYPIRXoTtOSYvTzFWgaWWXd3YCDE6ao4fmv91RthA==",
"license": "MIT",
"engines": {
"node": ">= 14.18"
},
"peerDependencies": {
"@svgdotjs/svg.js": "^3.2.4",
"@svgdotjs/svg.select.js": "^4.0.1"
}
},
"node_modules/@svgdotjs/svg.select.js": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.select.js/-/svg.select.js-4.0.3.tgz",
"integrity": "sha512-qkMgso1sd2hXKd1FZ1weO7ANq12sNmQJeGDjs46QwDVsxSRcHmvWKL2NDF7Yimpwf3sl5esOLkPqtV2bQ3v/Jg==",
"license": "MIT",
"engines": {
"node": ">= 14.18"
},
"peerDependencies": {
"@svgdotjs/svg.js": "^3.2.4"
}
},
"node_modules/@swc/helpers": {
"version": "0.5.15",
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
......@@ -2508,6 +2566,12 @@
"react": "*"
}
},
"node_modules/@yr/monotone-cubic-spline": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
"integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==",
"license": "MIT"
},
"node_modules/acorn": {
"version": "8.15.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
......@@ -2564,6 +2628,20 @@
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
"node_modules/apexcharts": {
"version": "5.3.5",
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-5.3.5.tgz",
"integrity": "sha512-I04DY/WBZbJgJD2uixeV5EzyiL+J5LgKQXEu8rctqAwyRmKv44aDVeofJoLdTJe3ao4r2KEQfCgtVzXn6pqirg==",
"license": "SEE LICENSE IN LICENSE",
"dependencies": {
"@svgdotjs/svg.draggable.js": "^3.0.4",
"@svgdotjs/svg.filter.js": "^3.0.8",
"@svgdotjs/svg.js": "^3.2.4",
"@svgdotjs/svg.resize.js": "^2.0.2",
"@svgdotjs/svg.select.js": "^4.0.1",
"@yr/monotone-cubic-spline": "^1.0.3"
}
},
"node_modules/argparse": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
......@@ -6031,6 +6109,19 @@
"node": ">=0.10.0"
}
},
"node_modules/react-apexcharts": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.7.0.tgz",
"integrity": "sha512-03oScKJyNLRf0Oe+ihJxFZliBQM9vW3UWwomVn4YVRTN1jsIR58dLWt0v1sb8RwJVHDMbeHiKQueM0KGpn7nOA==",
"license": "MIT",
"dependencies": {
"prop-types": "^15.8.1"
},
"peerDependencies": {
"apexcharts": ">=4.0.0",
"react": ">=0.13"
}
},
"node_modules/react-dom": {
"version": "19.1.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
......
package.json
......@@ -15,12 +15,14 @@
"@reduxjs/toolkit": "^2.9.0",
"@tanstack/react-table": "^8.21.3",
"@wandersonalwes/iconsax-react": "0.0.10",
"apexcharts": "^5.3.5",
"formik": "^2.4.6",
"framer-motion": "^12.23.16",
"js-cookie": "^3.0.5",
"lightgallery": "^2.9.0-beta.1",
"next": "15.5.3",
"react": "^19.1.0",
"react-apexcharts": "^1.7.0",
"react-dom": "19.1.0",
"react-dropzone": "^14.3.8",
"react-quill-new": "3.4.6",
......
src/app/(dashboard)/settings/page.tsx 0 → 100644
import SettingPage from '@/components/pages/dashboard/adminDashboard/settings'
import React from 'react'
export default function Setting() {
return (
<SettingPage />
)
}
src/app/globals.css
......@@ -150,7 +150,7 @@
@apply bg-white;
}
}
.general-content-box p {
......@@ -158,4 +158,25 @@
font-weight: 400;
line-height: 120%;
color: var(--para-light);
}
.tab__link {
@apply relative text-para-light;
}
.tab__link::after {
@apply absolute left-0 bottom-0 w-full h-[2px] bg-primary opacity-0 translate-x-0 transition-all;
content: "";
transform-origin: bottom right;
}
.tab__link.active {
@apply text-primary;
}
.tab__link.active::after,
.tab__link:hover::after {
@apply opacity-100 translate-x-1;
transform-origin: bottom left;
}
\ No newline at end of file
src/app/not-found.tsx 0 → 100644
import React from 'react'
export default function NotFound() {
return (
<section className="not-found flex justify-center items-center min-h-screen">
<div className="content text-center">
<h1 className='text-[128px] leadding-[37%] font-[800] text-primary'>404</h1>
<h2 className='text-[24px]'>Page Not Found!</h2>
<div className="space-y-3 text-center mt-8">
<p>Oops! The page you're looking for doesn’t exist or has been moved.</p>
<p>🔍 Try checking the URL or head back to the
<a href="/" className="text-secondary hover:underline ml-1">homepage</a>.
</p>
<p>
If you think this is a mistake, feel free to
<a href="/contact" className="text-secondary hover:underline ml-1">contact us</a>.
</p>
</div>
</div>
</section>
)
}
src/components/organism/Charts/CreditCard.tsx 0 → 100644
"use client";
import { ApexOptions } from "apexcharts";
import Image from "next/image";
import React from "react";
import Chart from "react-apexcharts";
const CreditCard = ({ game }: { game: any }) => {
const chartOptions: ApexOptions = {
chart: {
type: "bar",
sparkline: { enabled: true },
},
plotOptions: {
bar: {
horizontal: true,
barHeight: "50%",
borderRadius: 5,
},
},
colors: ["#D026F7"],
tooltip: { enabled: false },
xaxis: {
min: 0,
max: 100,
},
};
const chartSeries = [
{
data: [game.percentage],
},
];
return (
<div className=" rounded-lg p-3 border border-gray">
<Image src={"/assets/images/auth-image.png"} alt='' width={32} height={32} className='aspect-square rounded-sm' />
<strong className="block text-[16px] leading-[120%] font-[600] tet-title mt-2 mb-3">Firekirin</strong>
<div className="chart__wrapper mt-2 px-2 py-3" style={{
background: "rgba(184, 1, 192, 0.10)",
borderRadius: "4px"
}}>
<Chart
options={chartOptions}
series={chartSeries}
type="bar"
height={12}
/>
<div className="flex justify-between text-xs mt-2" >
<span>${game.amount}</span>
<span>{game.percentage}%</span>
</div>
</div>
</div>
);
};
export default CreditCard;
src/components/organism/Sidebar/AdminSidebar/index.tsx
import { PATH } from '@/routes/PATH';
import { List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
import { Game, StatusUp, UserSearch } from '@wandersonalwes/iconsax-react'
import { Game, Setting, Setting2, StatusUp, UserSearch } from '@wandersonalwes/iconsax-react'
import { usePathname, useRouter } from 'next/navigation'
import React from 'react'
......@@ -72,6 +72,26 @@ export default function AdminMenu({ open }: { open: boolean }) {
/>
</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton
className={[
open ? "expanded" : "collapsed",
[
PATH.ADMIN.SETTINGS.ROOT,
].some(path => pathname.startsWith(path)) ? "active" : ""
].join(" ")}
onClick={() => { router.push(PATH.ADMIN.SETTINGS.ROOT) }}
>
<ListItemIcon className={open ? "expanded" : "collapsed"}>
<Setting2 />
</ListItemIcon>
<ListItemText
primary="Settings"
className={open ? "expanded" : "collapsed"}
/>
</ListItemButton>
</ListItem>
</List>
)
}
src/components/pages/dashboard/adminDashboard/players/playerDetail/index.tsx
import CreditCard from '@/components/organism/Charts/CreditCard'
import EditIcon from '@/icons/EditIcon'
import { PATH } from '@/routes/PATH'
import Image from 'next/image'
import Link from 'next/link'
import React from 'react'
import GameTransactionTable from '../../games/GameDetail/Transaction'
const games = [
{
name: "Firekirin",
img: "/images/firekirin.png",
amount: "10K",
percentage: 10,
},
{
name: "Ultrapanda",
img: "/images/ultrapanda.png",
amount: "10K",
percentage: 45,
},
{
name: "Panda Master",
img: "/images/panda-master.png",
amount: "10K",
percentage: 45,
},
{
name: "Fish Master",
img: "/images/fish-master.png",
amount: "10K",
percentage: 45,
},
];
export default function PlayerDetailPage() {
return (
<div>PlayerDetailPage</div>
<>
<section className="player__detail__intro mb-12 lg:mb-16">
<div className="grid grid-cols-12 gap-8 lg:gap-10">
<div className="col-span-12 md:col-span-5">
<div className="player__info text-center rounded-xl lg:rounded-3xl border border-gray p-8 lg:py-10 lg:px-9">
<div className="player__profile bg-primary-grad p-[1px] rounded-full max-w-fit mx-auto relative">
<Image src={"/assets/images/auth-image.png"} alt='' width={100} height={100} className=' aspect-square rounded-full border-[5px] border-solid border-white' />
<div className="absolute left-[50%] translate-x-[-50%] bottom-[-10px]">
<EditIcon />
</div>
</div>
<h1 className="text-24 lg:text-[32px] text-title my-1">RamboXOX</h1>
<p className="text-para-light text-[11px] lg:text-[14px]">Joined: 04-09-2025</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 mt-4">
<div className="col-span-1 md:col-span-2 bg-light-gray rounded-[14px] p-4 lg:py-6">
<div className="flex justify-center items-center gap-3">
<Image src={"/assets/images/current-balance.svg"} alt='' width={48} height={48} />
<div className="content mt-3 text-start">
<strong className="text-[12px] leading-[120%] font-[700] text-primary block ">$30,000</strong>
<span className="text-para-light text-[9px]">Current Balance</span>
</div>
</div>
</div>
<div className="col-span-1 bg-light-gray rounded-[14px] p-4 lg:py-6">
<Image src={"/assets/images/deposit.svg"} alt='' width={48} height={48} className='mx-auto' />
<div className="content mt-3 ">
<strong className="text-[12px] leading-[120%] font-[700] text-primary block ">$30,000</strong>
<span className="text-para-light text-[9px]">Current Balance</span>
</div>
</div>
<div className="col-span-1 bg-light-gray rounded-[14px] p-4 lg:py-6">
<Image src={"/assets/images/withdrawn.svg"} alt='' width={48} height={48} className='mx-auto' />
<div className="content mt-3">
<strong className="text-[12px] leading-[120%] font-[700] text-primary block ">$30,000</strong>
<span className="text-para-light text-[9px]">Current Balance</span>
</div>
</div>
</div>
</div>
</div>
<div className="col-span-12 md:col-span-7">
<div className="bg-white rounded-3xl p-6 lg:p-10">
<div className="flex justify-between items-center mb-6">
<h2 className="text-xl lg:text-2xl font-semibold">Player Details</h2>
<Link href={`/players/2`} className="ss-btn bg-primary-grad text-white max-w-fit">
Edit Player Details
</Link>
</div>
<ul className="">
<li className="grid grid-cols-2 gap-y-4 gap-x-8 pb-4 mb-4 border-b border-b-gray">
<p className="text-[16px] font-[400] text-title">First Name</p>
<p className="text-para-light">Rambo</p>
</li>
<li className="grid grid-cols-2 gap-y-4 gap-x-8 pb-4 mb-4 border-b border-b-gray">
<p className="text-[16px] font-[400] text-title">Last Name</p>
<p className="text-para-light">Shah</p>
</li>
<li className="grid grid-cols-2 gap-y-4 gap-x-8 pb-4 mb-4 border-b border-b-gray">
<p className="text-[16px] font-[400] text-title">Display Name</p>
<p className="text-para-light">RamboXOX</p>
</li>
<li className="grid grid-cols-2 gap-y-4 gap-x-8 pb-4 mb-4 border-b border-b-gray">
<p className="text-[16px] font-[400] text-title">Email Address</p>
<p className="text-para-light">rambo@gmail.com</p>
</li>
<li className="grid grid-cols-2 gap-y-4 gap-x-8 pb-4 mb-4 border-b border-b-gray">
<p className="text-[16px] font-[400] text-title">Phone Number</p>
<p className="text-para-light">-</p>
</li>
<li className="grid grid-cols-2 gap-y-4 gap-x-8 pb-4 mb-4 border-b border-b-gray">
<p className="text-[16px] font-[400] text-title">Address Line</p>
<p className="text-para-light">-</p>
</li>
<li className="grid grid-cols-2 gap-y-4 gap-x-8 pb-4 mb-4 border-b border-b-gray">
<p className="text-[16px] font-[400] text-title">State</p>
<p className="text-para-light">-</p>
</li>
<li className="grid grid-cols-2 gap-y-4 gap-x-8 pb-4 mb-4 border-b border-b-gray">
<p className="text-[16px] font-[400] text-title">City</p>
<p className="text-para-light">-</p>
</li>
<li className="grid grid-cols-2 gap-y-4 gap-x-8 pb-4 mb-4 border-b border-b-gray">
<p className="text-[16px] font-[400] text-title">Wallet Address</p>
<p className="text-para-light">17HzyHWNrdS7GpMArshSBLpJpcvrre93P6</p>
</li>
</ul>
</div>
</div>
</div>
</section>
<section className="player__current__holdings">
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-2">
{games.map((game) => (
<div className="col-span-1" key={game.name}>
<CreditCard key={game.name} game={game} />
</div>
))}
</div>
</section>
<GameTransactionTable />
</>
)
}
src/components/pages/dashboard/adminDashboard/settings/AdminProfile.tsx 0 → 100644
import React from 'react'
export default function AdminProfile() {
return (
<div>AdminProfile</div>
)
}
src/components/pages/dashboard/adminDashboard/settings/SiteSetting.tsx 0 → 100644
"use client";
import React from "react";
import { useFormik } from "formik";
import * as Yup from "yup";
import { InputLabel, OutlinedInput, Button } from "@mui/material";
import InputFile from "@/components/atom/InputFile";
import SelectField from "@/components/atom/SelectField";
export default function SiteSetting() {
const formik = useFormik({
initialValues: {
favicon: null as File | null,
logo: null as File | null,
websiteTitle: "",
banner: "",
subBanner: "",
gameProvider: "",
},
validationSchema: Yup.object({
favicon: Yup.mixed().required("Favicon is required"),
logo: Yup.mixed().required("Logo is required"),
websiteTitle: Yup.string().required("Website title is required"),
banner: Yup.string().required("Banner is required"),
gameProvider: Yup.string().required("Game provider is required"),
}),
onSubmit: (values) => {
console.log(values);
},
});
return (
<form onSubmit={formik.handleSubmit}>
<div className="form__field__wrapper border-solid border-[1px] border-gray rounded-[16px] mb-6">
<div className="form__title py-6 px-10 border-b-solid border-b-[1px] border-gray">
<h2 className="text-[20px] leading-[140%] font-bold">Site Settings</h2>
</div>
<div className="form__fields p-6 lg:p-10 grid gap-4 lg:gap-6 md:grid-cols-2">
{/* Name */}
<div className="input__field col-span-1 md:col-span-2">
<InputLabel htmlFor="name">Website Title<span className="text-red-500">*</span></InputLabel>
<OutlinedInput
label="Website Title"
fullWidth
id="name"
name="name"
placeholder="Enter the name of the game"
value={formik.values.websiteTitle}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
<span className="error">
{formik.touched.websiteTitle && formik.errors.websiteTitle ? formik.errors.websiteTitle : ""}
</span>
</div>
{/* Favicon */}
<div className="input__field col-span-1 md:col-span-2">
<InputFile
name="favicon"
label="Website Favicon"
value={formik.values.favicon || null}
onChange={(file: File | File[] | null) => formik.setFieldValue("favicon", file)}
onBlur={() => formik.setFieldTouched("favicon", true)}
// serverFile={serverFiles.favicon}
// onRemoveServerFile={() => handleServerFileRemoval("favicon")}
/>
<span className="error">
{formik.touched.favicon && formik.errors.favicon ? formik.errors.favicon : ""}
</span>
</div>
{/* Logo */}
<div className="input__field col-span-1 md:col-span-2">
<InputFile
name="logo"
label="Logo"
value={formik.values.logo || null}
onChange={(file: File | File[] | null) => formik.setFieldValue("logo", file)}
onBlur={() => formik.setFieldTouched("logo", true)}
// serverFile={serverFiles.thumbnail}
// onRemoveServerFile={() => handleServerFileRemoval("thumbnail")}
/>
<span className="error">
{formik.touched.logo && formik.errors.logo ? formik.errors.logo : ""}
</span>
</div>
{/* Banner */}
<div className="input__field col-span-1 ">
<SelectField
name="banner"
label="Game banner"
value={formik.values.banner || ""}
onChange={(e) => formik.setFieldValue("banner", e.target.value)}
onBlur={() => formik.setFieldTouched("banner", true)}
required
options={[
{ value: "action", name: "Action" },
{ value: "adventure", name: "Adventure" },
{ value: "puzzle", name: "Puzzle" },
]}
/>
<span className="error">
{formik.touched.banner && formik.errors.banner ? formik.errors.banner : ""}
</span>
</div>
{/* Sub Banners */}
<div className="input__field col-span-1">
<SelectField
name="subBanner"
label="Sub Banners"
value={formik.values.subBanner || ""}
onChange={(e) => formik.setFieldValue("subBanner", e.target.value)}
onBlur={() => formik.setFieldTouched("subBanner", true)}
required
options={[
{ value: "action", name: "Action" },
{ value: "adventure", name: "Adventure" },
{ value: "puzzle", name: "Puzzle" },
]}
/>
<span className="error">
{formik.touched.subBanner && formik.errors.subBanner ? formik.errors.subBanner : ""}
</span>
</div>
</div>
</div>
<div className="form__field__wrapper border-solid border-[1px] border-gray rounded-[16px] mb-6">
<div className="form__title py-6 px-10 border-b-solid border-b-[1px] border-gray">
<h2 className="text-[20px] leading-[140%] font-bold">Unique Selling Points</h2>
</div>
<div className="form__fields p-6 lg:p-10 grid gap-4 lg:gap-6 md:grid-cols-2 lg:grid-cols-3">
{/* Name */}
<div className="input__field col-span-1 ">
<InputLabel htmlFor="name">USP Title<span className="text-red-500">*</span></InputLabel>
<OutlinedInput
fullWidth
id="name"
name="name"
placeholder="Enter the title for USP"
value={formik.values.websiteTitle}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
<span className="error">
{formik.touched.websiteTitle && formik.errors.websiteTitle ? formik.errors.websiteTitle : ""}
</span>
</div>
<div className="input__field col-span-1 ">
<InputLabel htmlFor="name">USP Description<span className="text-red-500">*</span></InputLabel>
<OutlinedInput
fullWidth
id="name"
name="name"
placeholder="Enter the title for USP"
value={formik.values.websiteTitle}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
<span className="error">
{formik.touched.websiteTitle && formik.errors.websiteTitle ? formik.errors.websiteTitle : ""}
</span>
</div>
<div className="input__field col-span-1 ">
<InputFile
name="favicon"
label="USP Icon"
value={formik.values.favicon || null}
onChange={(file: File | File[] | null) => formik.setFieldValue("favicon", file)}
onBlur={() => formik.setFieldTouched("favicon", true)}
required
// serverFile={serverFiles.favicon}
// onRemoveServerFile={() => handleServerFileRemoval("favicon")}
/>
<span className="error">
{formik.touched.favicon && formik.errors.favicon ? formik.errors.favicon : ""}
</span>
</div>
</div>
</div>
<div className="text-right">
<Button variant="contained" color="primary">Save Setting</Button>
</div>
</form>
);
}
src/components/pages/dashboard/adminDashboard/settings/index.tsx 0 → 100644
"use client";
import PageHeader from '@/components/molecules/PageHeader'
import React, { useState } from 'react'
import SiteSetting from './SiteSetting'
import AdminProfile from './AdminProfile'
export default function SettingPage() {
// Track the active tab index
const [activeTab, setActiveTab] = useState(0);
const tabs = [
{ title: "Site Settings", content: <SiteSetting /> },
{ title: "My Profile", content: <AdminProfile /> },
];
return (
<>
<PageHeader title="Settings" />
<section className="site__setting__tab">
{/* Tab Buttons */}
<ul className="tab__controller flex gap-4 lg:gap-12 border-b border-gray-300">
{tabs.map((tab, index) => (
<li key={index}>
<button
onClick={() => setActiveTab(index)}
className={`tab__link font-semibold text-[1rem] cursor-pointer relative
${activeTab === index ? 'active' : ''}`}
>
{tab.title}
</button>
</li>
))}
</ul>
{/* Tab Content */}
<div className="tab__content__wrapper mt-6">
{tabs.map((tab, index) => (
<div
key={index}
className={`tab__content ${activeTab === index ? 'block' : 'hidden'}`}
>
{tab.content}
</div>
))}
</div>
</section>
</>
)
}
src/components/pages/dashboard/userDashboard/games/exclusiveGames/exclusiveGameDetail/index.tsx
......@@ -25,7 +25,7 @@ export default function ExlusiveGameDetail({ game }: { game: SingleGameResponse
<div className="content__wrapper flex flex-col gap-4">
<ul className="flex gap-4">
{game?.data?.provider ? <li className="text-[9px] lg:text-[12px] leading-[188%] font-[400] rounded-[8px] px-2 py-[2px] bg-yellow-300 text-title">Game Type : {game?.data?.provider}</li> : ""}
{game?.data?.subgames?.length ? <li className="text-[9px] lg:text-[12px] leading-[188%] font-[400] rounded-[8px] px-2 py-[2px] bg-yellow-300 text-title">{game?.data?.subgames.length}</li> : ""}
{game?.data?.subgames?.length ? <li className="text-[9px] lg:text-[12px] leading-[188%] font-[400] rounded-[8px] px-2 py-[2px] bg-yellow-300 text-title">{game?.data?.subgames.length} Games</li> : ""}
</ul>
<div className="general-content-box styled-list !text-white">
<h1 className="text-[2rem]">{game?.data?.name}</h1>
......
src/icons/EditIcon.tsx 0 → 100644
import React from 'react'
export default function EditIcon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
<rect width="32" height="32" rx="16" fill="#B801C0" />
<path d="M10.876 11.2227C10.876 8.89143 12.7658 7.00159 15.0971 7.00159C17.4283 7.00159 19.3181 8.89143 19.3181 11.2227C19.3181 13.5539 17.4283 15.4438 15.0971 15.4438C12.7658 15.4438 10.876 13.5539 10.876 11.2227Z" fill="white" />
<path d="M8.14062 21.7852C8.14062 18.9546 10.4353 16.66 13.2658 16.66H16.9293C17.8988 16.66 18.8054 16.9292 19.5786 17.3969C19.8125 17.5384 19.8346 17.8598 19.6412 18.0532L16.2888 21.4057C15.7358 21.9586 15.4083 22.6976 15.3701 23.4788L15.3537 23.8151C15.3419 24.0547 15.1442 24.2431 14.9043 24.2431H10.5985C9.24105 24.2431 8.14062 23.1427 8.14062 21.7852Z" fill="white" />
<path d="M20.436 19.8039C20.2604 19.6282 19.9755 19.6282 19.7997 19.8039L17.2436 22.3601C16.9277 22.6761 16.7405 23.0984 16.7186 23.5447L16.6705 24.5297C16.6579 24.7865 16.8627 25.0016 17.1199 25.0016H17.9616C18.4273 25.0016 18.8749 24.8211 19.2102 24.498L21.8953 21.9114C22.0766 21.7367 22.0793 21.4472 21.9013 21.2692L20.436 19.8039Z" fill="white" />
<path d="M22.9123 20.3718C23.0647 20.5243 23.3118 20.5242 23.4642 20.3718C23.9913 19.8447 23.9913 18.9901 23.4641 18.463L23.2566 18.2554C22.7295 17.7282 21.8748 17.7283 21.3477 18.2554C21.1953 18.4078 21.1953 18.6548 21.3477 18.8071L22.9123 20.3718Z" fill="white" />
</svg>
)
}
src/routes/PATH.ts
......@@ -34,6 +34,9 @@ export const PATH = {
EDIT_PLAYER: {
ROOT: "/players/edit-player"
}
},
SETTINGS: {
ROOT: "/settings"
}
},
USER: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment