Siddhesh.More/SSA-Admin-Panel
1
0
Fork 0
Code Issues Pull Requests 3 Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Siddhesh More
2025-01-15 16:56:25 +05:30
parent 0b41ad8669
commit 0b0c4bf06b
19 changed files with 106 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dev-dist/sw.js
View File

@@ -82,7 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
"revision": "3ca0b8505b4bec776b69afdba2768812"
}, {
"url": "index.html",
"revision": "0.r4rebmaausg"
"revision": "0.jlpvaemfr1"
}], {});
workbox.cleanupOutdatedCaches();
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

2
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/assets/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ReGroup Admin</title>
<title>SEO Admin</title>
</head>
<body>
<div id="root"></div>

BIN
public/icon-128x128.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
public/icon-144x144.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
public/icon-152x152.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
public/icon-192x192.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
public/icon-384x384.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/icon-512x512.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 125 KiB

After

Width:  |  Height:  |  Size: 18 KiB

BIN
public/icon-72x72.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
public/icon-96x96.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.1 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

4
public/manifest.webmanifest
View File

@@ -1,6 +1,6 @@
{
"name": "ReGroup",
"short_name": "RG",
"name": "SEO",
"short_name": "SEO",
"description": "Join your community now",
"start_url": "/",
"display": "standalone",

29
src/Layouts/DefaultLayout.tsx
View File

@@ -3,7 +3,7 @@ import React, { FC } from "react";
import { GiHamburgerMenu } from "react-icons/gi";
import { RiNotificationLine } from "react-icons/ri";
import { nav } from "../Routes/Nav";
import logo from '../assets/redogo.svg';
import logo from '../assets/logo.svg'
import { Avatar } from "../components/ui/avatar";
import { NavLink, useLocation, useNavigate, useParams } from "react-router-dom";
import { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot } from "../components/ui/accordion";
@@ -16,28 +16,19 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
return (
<HStack position={'relative'} bg="#222935" backgroundPosition="center" backgroundRepeat="repeat" backgroundSize="cover" gap={0} w="100%" h="100vh" p={2}>
{/* ✅ Spheres */}
<span className="red-sphere-1" />
<span className="blue-sphere-1" />
<span className="red-sphere-2" />
<span className="blue-sphere-2" />
<span className="red-sphere-3" />
<span className="blue-sphere-2" />
<HStack position={'relative'} bg="#F2F2F2" backgroundPosition="center" backgroundRepeat="repeat" backgroundSize="cover" gap={0} w="100%" h="100vh" p={2}>
<VStack shadow={'xs'} zIndex={1} gap={0} rounded={'lg'} h="100%" w="15%" bg="#222935" >
<HStack w={'100%'} p={3} h={'6.5%'} justifyContent={'space-between'}>
<Image w={8} src={logo} />
<GiHamburgerMenu cursor={'pointer'} style={{ fontSize: '20px' }} />
<VStack zIndex={1} gap={0} rounded={'lg'} h="100%" w="15%" >
<HStack w={'100%'} p={3} h={'6.5%'} justifyContent={'center'}>
<Image w={55} src={logo} />
</HStack>
<VStack w={'100%'} p={3}>
<Text ps={'6px'} fontSize={'11px'} w={'100%'} fontWeight={'bold'}>Menu</Text>
{nav?.map(({ title, path, Icon, type, children }, index) => type === 'single' ?
<NavLink className="link" key={index} to={path} style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #222935' }} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></NavLink> :
<AccordionRoot>
<AccordionItem p={0} key={index} value={title}>
<AccordionItemTrigger className={`link ${location?.pathname === path && 'active'}`} onClick={() => navigate(path)} gap={0} style={{ cursor: 'pointer', borderRadius: '8px', padding: '5px', width: '100%', display: 'flex', alignItems: 'center', border: '1px solid #222935', fontSize: '14px' }}> <Text fontSize={'xs'} gap={1} display={'flex'} alignItems={'center'} ><Icon style={{ fontSize: '20px' }} />{title}</Text></AccordionItemTrigger>
{children?.map(({ title, path, Icon }, index) => <AccordionItemContent ps={4}><NavLink className="link" key={index} to={path} style={{ marginTop: 6, cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #222935' }} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></NavLink></AccordionItemContent>)}
<NavLink className="link" key={index} to={path} style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></NavLink> :
<AccordionRoot bg={'#fff'} rounded={'lg'} collapsible>
<AccordionItem borderBottom={'none'} p={0} key={index} value={title}>
<AccordionItemTrigger color={'#fff'} onClick={() => navigate(path)} gap={0} style={{ cursor: 'pointer', borderRadius: '8px', padding: '5px', width: '100%', display: 'flex', alignItems: 'center', border: '1px solid #ffffff', backgroundColor:'#fff',color:'#000', fontSize: '14px' }}> <Text fontSize={'xs'} gap={1} display={'flex'} alignItems={'center'} ><Icon style={{ fontSize: '20px' }} />{title}</Text></AccordionItemTrigger>
{children?.map(({ title, path, Icon }, index) => <AccordionItemContent className={`linkChild ${location?.pathname === path && 'activeChild'}`} key={index} onClick={()=>navigate(path)} style={{ marginTop: 6, cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff',color:'#000' }} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></AccordionItemContent>)}
</AccordionItem>
</AccordionRoot>)}
</VStack>

1
src/Layouts/animations.tsx
View File

@@ -4,6 +4,7 @@ export const OPACITY_ON_LOAD = {
as: motion.div,
initial: { opacity: 0 },
animate: { opacity: 1 },
transition: { duration: 0.5, ease: "easeInOut" }
}
export const SLIDE_IN_BOTTOM = {

95
src/Pages/Login.tsx
View File

@@ -1,25 +1,19 @@
import { Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react"
import logo from '../assets/logo.svg'
import bgImage from '../assets/bgImage.png'
import { Field } from "../components/ui/field"
import { useForm } from "react-hook-form"
import { InputGroup } from "../components/ui/input-group"
import { MdEmail } from "react-icons/md"
import { BiLock } from "react-icons/bi"
import { PasswordInput } from "../components/ui/password-input"
import GlobalStateContext from "../Contexts/GlobalStateContext"
import { Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react"
import { useContext, useState } from "react"
import { useForm } from "react-hook-form"
import GlobalStateContext from "../Contexts/GlobalStateContext"
import logo from '../assets/logo.svg'
import { Button } from "../components/ui/button"
import { Field } from "../components/ui/field"
import { Toaster, toaster } from "../components/ui/toaster"
interface FormValues {
email: string
password: string
mobileNumber: number
}
const Login = () => {
const [ isLoading, setIsLoading ] = useState<boolean>(false)
const [isLoading, setIsLoading] = useState<boolean>(false)
const context = useContext(GlobalStateContext);
if (!context) {
throw new Error('App must be used within a GlobalStateProvider');
@@ -34,7 +28,7 @@ const Login = () => {
const onSubmit = handleSubmit((data) => {
setIsLoading(true)
if (data?.email === 'Admin' && data?.password === 'Admin') {
if (data?.mobileNumber === 1234567890) {
setTimeout(() => {
setIsAuthenticate(true);
setIsLoading(false)
@@ -51,42 +45,51 @@ const Login = () => {
return (
<HStack bg={'#222935'}
backgroundImage={`url(${bgImage})`}
backgroundPosition="center"
backgroundRepeat="repeat"
backgroundSize="cover"
w={'100%'} h={'100vh'}>
<Center display={{base:'none', md:'flex'}} bg={'#222935'} w={'55%'} h={'100%'}>
<Image w={150} src={logo} />
</Center>
<Center as={'form'} onSubmit={onSubmit} p={{base:4,md:16}} w={{base:'100%',md:'45%'}} h={'100%'}>
<VStack gap={2} w={'100%'} alignItems={'flex-start'}>
<Text w={'100%'} textAlign={'center'} fontSize={'24px'} fontWeight={'bold'}>Hello Again!</Text>
<Text w={'100%'} textAlign={'center'} fontSize={'sm'}>Welcome Back</Text>
<VStack mt={6} gap={4} w={'100%'}>
<Field invalid={!!errors.email} errorText={errors.email?.message} bgSize={'sm'} >
<InputGroup w={'100%'} flex="1" startElement={<MdEmail color="#fff" />}>
<Input fontSize={'sm'} {...register("email", { required: "Email address is required" })} placeholder="Email Address" focusRingColor={'#D90B2E'} variant="subtle" rounded={'full'} bg={'#434A53'} />
</InputGroup>
</Field>
<Field invalid={!!errors.password} errorText={errors.password?.message} >
<InputGroup w={'100%'} flex="1" startElement={<BiLock color="#fff" />}>
<PasswordInput fontSize={'sm'} {...register("password", { required: "Password address is required" })} placeholder="Password" focusRingColor={'#D90B2E'} variant="subtle" rounded={'full'} bg={'#434A53'} />
</InputGroup>
</Field>
<Button loading={isLoading} mt={4} size={'sm'} bg={'#D90B2E'} rounded={'full'} w={'100%'} color={'#ffffff'} type="submit">Send OTP</Button>
<VStack
w={'100%'} h={'100vh'} bg={'#ffffff'} >
<HStack boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} w={'100%'} ps={8} h={'7%'} justifyContent={'flex-start'}>
<Image w={50} src={logo} />
</HStack>
<HStack
w={'100%'} h={'93%'} p={8} gap={8}>
<Center display={{ base: 'none', md: 'flex' }} bg={'#02A0A033'} w={'50%'} h={'100%'} rounded={'3xl'}>
<Image w={250} src={logo} />
</Center>
<Center as={'form'} onSubmit={onSubmit} p={{ base: 4, md: 16 }} w={{ base: '100%', md: '50%' }} h={'100%'}>
<VStack gap={2} w={'100%'} alignItems={'flex-start'}>
<Text w={'100%'} textAlign={'center'} fontSize={'24px'} fontWeight={'normal'} color={'#313039'}>LOGIN</Text>
<VStack mt={6} gap={4} w={'full'}>
<Field color={'#313039'} label={'Enter Mobile Number'} w={'100%'} invalid={!!errors.mobileNumber} errorText={errors.mobileNumber?.message} >
<Input ps={3} {...register("mobileNumber", { required: "Mobile Number address is required" })} placeholder="Mobile Number Address" />
{/* <Text as={'span'} w={'100%'} fontSize={'xs'} fontWeight={'normal'} color={'#686677'}>Forget password</Text> */}
</Field>
<Button loading={isLoading} mt={4} size={'sm'} bg={'#02A0A0'} rounded={'md'} w={'100%'} color={'#ffffff'} type="submit">Send OTP</Button>
<Text>Forgot password</Text>
</VStack>
<Text>Forgot password</Text>
</VStack>
</VStack>
</Center>
<Toaster />
</HStack>
</Center>
<Toaster />
</HStack>
</VStack>
)
}

16
src/Routes/Nav.ts
View File

@@ -1,8 +1,10 @@
import { LiaUsersSolid } from "react-icons/lia";
import { LuBellDot } from "react-icons/lu";
import { MdOutlineSupportAgent, MdPostAdd } from "react-icons/md";
import { RiUserSettingsLine } from "react-icons/ri";
import { GoDotFill } from "react-icons/go";
import { TbFileSettings, TbLayoutDashboard, TbReport, TbUsers, TbUsersGroup } from "react-icons/tb";
import { RiUserSettingsLine } from "react-icons/ri";
export const nav = [
@@ -30,15 +32,15 @@ export const nav = [
Icon: LiaUsersSolid,
type:'multiple',
children: [
// {
// title: "Manage Community",
// path: "/manage-community",
// Icon: RiUserCommunityLine,
// },
{
title: "Manage Community",
path: "/manage-community",
Icon: GoDotFill,
},
{
title: "Manage Post",
path: "/manage-post",
Icon: MdPostAdd,
Icon: GoDotFill,
},
],
},

BIN
src/assets/favIcon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 850 B

After

Width:  |  Height:  |  Size: 2.0 KiB

15
src/assets/logo.svg
View File

@@ -1,11 +1,6 @@
<svg width="253" height="167" viewBox="0 0 253 167" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M167.181 42.4477H159.188H137.084C137.083 45.3569 136.481 48.0573 135.237 50.4247H158.33C154.826 65.8862 140.985 77.4928 124.479 77.5324C124.45 77.5324 124.421 77.5324 124.393 77.5324C115.154 77.5324 106.468 73.9464 99.9309 67.4294C93.3498 60.8702 89.7216 52.1222 89.712 42.7957C89.7107 41.9292 89.7461 41.0682 89.8089 40.2126H81.7855C81.7418 40.985 81.7132 41.76 81.7118 42.5378C81.6818 54.0094 86.0933 64.785 94.1344 72.878C102.177 80.9723 112.914 85.4425 124.368 85.4657C124.397 85.4657 124.424 85.4657 124.453 85.4657C145.419 85.4657 162.919 70.3222 166.509 50.4234C166.944 48.0109 167.187 45.5329 167.195 42.999C167.195 42.8148 167.184 42.6319 167.181 42.4477Z" fill="#D90B2E"/>
<path d="M124.481 69.5375C125.387 69.5348 126.283 69.4925 127.173 69.4215C123.824 64.8067 120.657 60.4389 117.418 55.9741C126.226 53.0118 129.917 46.2587 129.244 38.1521C128.521 29.4328 123.018 23.695 114.177 23.5107C111.912 23.4644 109.647 23.4412 107.382 23.4261H95.5595C96.8094 21.5622 98.2476 19.8047 99.8673 18.1796C106.422 11.6053 115.145 7.9811 124.426 7.97564C124.434 7.97564 124.44 7.97564 124.448 7.97564C133.728 7.97564 142.453 11.5875 149.013 18.1454C151.667 20.7981 153.829 23.8096 155.476 27.0653H164.162C157.881 11.2996 142.513 0.0846005 124.549 0C124.482 0 124.415 0 124.348 0C113.102 0 102.467 4.41287 94.3805 12.4404C88.8638 17.9176 85.0254 24.5955 83.1123 31.8575H91.4564C91.4577 31.8548 91.4577 31.8521 91.4591 31.8494C94.6343 31.848 97.8082 31.8562 100.983 31.8575H105.024V31.8603C106.809 31.863 108.592 31.8589 110.377 31.8644C111.699 31.8685 113.032 31.9762 114.339 32.1768C117.232 32.623 119.298 34.4624 119.701 37.0646C119.919 38.4809 119.989 39.9614 119.845 41.3833C119.44 45.3991 117.517 47.585 113.504 48.0708C109.988 48.4965 106.41 48.431 102.86 48.573C102.239 48.5975 101.617 48.577 100.661 48.577L114.975 68.2371C118.003 69.0858 121.163 69.5348 124.395 69.5348C124.422 69.5375 124.451 69.5375 124.481 69.5375Z" fill="#D90B2E"/>
<path d="M0 156.088V116.713H17.0443C20.5688 116.713 23.6063 117.285 26.1566 118.428C28.7069 119.573 30.6745 121.213 32.0622 123.35C33.4486 125.487 34.1431 128.018 34.1431 130.944C34.1431 133.906 33.4486 136.447 32.0622 138.566C30.6745 140.685 28.7055 142.298 26.1566 143.403C23.6063 144.51 20.5688 145.062 17.0443 145.062H5.00644L9.1696 141.124V156.086H0V156.088ZM9.16824 142.137L5.00507 137.806H16.5367C19.3107 137.806 21.4107 137.207 22.8367 136.006C24.2612 134.806 24.9749 133.119 24.9749 130.944C24.9749 128.768 24.2626 127.09 22.8367 125.908C21.4107 124.727 19.3107 124.136 16.5367 124.136H5.00507L9.16824 119.805V142.137ZM25.0868 156.088L15.1872 141.8H24.9749L34.8745 156.088H25.0868Z" fill="#D90B2E"/>
<path d="M55.7437 156.538C52.2929 156.538 49.2745 155.862 46.6874 154.513C44.1003 153.163 42.093 151.316 40.6685 148.973C39.2426 146.63 38.5303 143.958 38.5303 140.958C38.5303 137.958 39.2139 135.276 40.5839 132.914C41.9525 130.552 43.8642 128.704 46.3217 127.374C48.7778 126.043 51.5437 125.377 54.618 125.377C57.5804 125.377 60.2521 126.016 62.6332 127.291C65.0143 128.566 66.8987 130.366 68.2864 132.69C69.6728 135.015 70.3673 137.808 70.3673 141.071C70.3673 141.408 70.3482 141.793 70.3114 142.224C70.2732 142.655 70.2364 143.059 70.1995 143.433H45.6176V138.315H65.5874L62.1556 139.833C62.1925 138.259 61.8923 136.89 61.2551 135.727C60.6165 134.565 59.7363 133.656 58.6106 133C57.4862 132.343 56.1722 132.016 54.6726 132.016C53.1716 132.016 51.8508 132.345 50.7073 133C49.5624 133.656 48.6728 134.574 48.0355 135.756C47.397 136.938 47.079 138.335 47.079 139.946V141.296C47.079 142.984 47.4529 144.447 48.2034 145.683C48.9525 146.921 49.9841 147.868 51.2968 148.524C52.6094 149.18 54.1841 149.508 56.0221 149.508C57.5968 149.508 58.994 149.265 60.2126 148.776C61.4311 148.289 62.5473 147.558 63.5597 146.582L68.2291 151.645C66.8414 153.219 65.0976 154.43 62.9976 155.273C60.8989 156.115 58.4796 156.538 55.7437 156.538Z" fill="#D90B2E"/>
<path d="M95.8495 156.762C92.737 156.762 89.8674 156.264 87.2434 155.272C84.6181 154.278 82.3502 152.862 80.4372 151.025C78.5241 149.189 77.034 147.031 75.9656 144.556C74.8972 142.081 74.3623 139.363 74.3623 136.4C74.3623 133.438 74.8972 130.718 75.9656 128.244C77.034 125.769 78.5432 123.613 80.4945 121.775C82.4444 119.939 84.7313 118.522 87.3567 117.529C89.9807 116.535 92.8693 116.039 96.0187 116.039C99.5064 116.039 102.646 116.62 105.441 117.783C108.234 118.945 110.588 120.633 112.501 122.845L106.707 128.246C105.244 126.708 103.67 125.574 101.982 124.843C100.294 124.111 98.438 123.746 96.413 123.746C94.5368 123.746 92.8134 124.055 91.2374 124.674C89.6627 125.292 88.3023 126.164 87.1588 127.289C86.014 128.414 85.1339 129.745 84.5144 131.283C83.8962 132.821 83.5865 134.527 83.5865 136.402C83.5865 138.201 83.8962 139.88 84.5144 141.437C85.1325 142.994 86.014 144.334 87.1588 145.458C88.3023 146.582 89.6518 147.465 91.2087 148.102C92.7643 148.741 94.4795 149.059 96.3557 149.059C98.1555 149.059 99.9089 148.759 101.615 148.158C103.32 147.559 104.979 146.565 106.592 145.177L111.768 151.758C109.593 153.409 107.099 154.655 104.286 155.498C101.474 156.341 98.6618 156.762 95.8495 156.762ZM103.443 150.575V135.781H111.768V151.755L103.443 150.575Z" fill="#D90B2E"/>
<path d="M119.587 156.088V125.825H127.968V134.431L126.786 131.9C127.686 129.762 129.129 128.141 131.117 127.034C133.104 125.929 135.523 125.375 138.373 125.375V133.531C138.036 133.456 137.708 133.4 137.39 133.362C137.07 133.325 136.761 133.306 136.462 133.306C133.986 133.306 132.017 134 130.555 135.387C129.092 136.774 128.361 138.912 128.361 141.8V156.088H119.587Z" fill="#D90B2E"/>
<path d="M158.174 156.538C154.987 156.538 152.146 155.862 149.653 154.513C147.159 153.163 145.199 151.316 143.775 148.973C142.349 146.63 141.636 143.958 141.636 140.958C141.636 137.92 142.349 135.229 143.775 132.885C145.199 130.542 147.159 128.704 149.653 127.373C152.146 126.042 154.987 125.376 158.174 125.376C161.399 125.376 164.268 126.042 166.781 127.373C169.293 128.704 171.262 130.542 172.688 132.885C174.112 135.229 174.826 137.92 174.826 140.958C174.826 143.995 174.113 146.676 172.688 149.002C171.262 151.327 169.293 153.163 166.781 154.514C164.268 155.862 161.399 156.538 158.174 156.538ZM158.174 149.337C159.674 149.337 160.996 149.01 162.14 148.353C163.283 147.698 164.202 146.732 164.896 145.457C165.589 144.182 165.937 142.682 165.937 140.956C165.937 139.193 165.591 137.694 164.896 136.456C164.202 135.219 163.283 134.272 162.14 133.615C160.995 132.96 159.693 132.631 158.23 132.631C156.768 132.631 155.455 132.96 154.292 133.615C153.13 134.272 152.202 135.219 151.507 136.456C150.813 137.694 150.466 139.193 150.466 140.956C150.466 142.681 150.813 144.182 151.507 145.457C152.201 146.732 153.128 147.697 154.292 148.353C155.455 149.01 156.749 149.337 158.174 149.337Z" fill="#D90B2E"/>
<path d="M193.443 156.538C190.893 156.538 188.642 156.051 186.693 155.075C184.743 154.101 183.224 152.6 182.136 150.575C181.049 148.55 180.504 146 180.504 142.926V125.825H189.28V141.576C189.28 144.126 189.815 145.992 190.883 147.173C191.951 148.355 193.461 148.946 195.412 148.946C196.761 148.946 197.962 148.646 199.011 148.045C200.061 147.446 200.896 146.546 201.514 145.345C202.132 144.146 202.442 142.645 202.442 140.845V125.825H211.161V156.088H202.836V147.707L204.355 150.182C203.304 152.282 201.805 153.866 199.855 154.935C197.905 156.003 195.768 156.538 193.443 156.538Z" fill="#D90B2E"/>
<path d="M219.319 167V125.824H227.7V132.012L227.53 141.012L228.092 149.956V167H219.319ZM237.15 156.538C234.637 156.538 232.425 155.976 230.513 154.85C228.6 153.726 227.11 152.009 226.042 149.703C224.973 147.397 224.438 144.481 224.438 140.957C224.438 137.394 224.945 134.47 225.957 132.181C226.969 129.894 228.44 128.187 230.373 127.063C232.303 125.939 234.563 125.375 237.15 125.375C240.038 125.375 242.615 126.022 244.884 127.315C247.152 128.609 248.953 130.418 250.285 132.743C251.616 135.069 252.281 137.806 252.281 140.957C252.281 144.144 251.616 146.891 250.285 149.197C248.953 151.503 247.154 153.303 244.884 154.598C242.615 155.891 240.036 156.538 237.15 156.538ZM235.687 149.337C237.15 149.337 238.452 149 239.597 148.325C240.74 147.649 241.659 146.685 242.353 145.428C243.046 144.171 243.394 142.681 243.394 140.957C243.394 139.194 243.048 137.694 242.353 136.456C241.659 135.219 240.74 134.272 239.597 133.615C238.452 132.96 237.15 132.632 235.687 132.632C234.225 132.632 232.912 132.96 231.749 133.615C230.587 134.272 229.659 135.219 228.964 136.456C228.27 137.694 227.923 139.194 227.923 140.957C227.923 142.681 228.27 144.173 228.964 145.428C229.658 146.685 230.585 147.649 231.749 148.325C232.912 149 234.225 149.337 235.687 149.337Z" fill="#D90B2E"/>
<svg width="424" height="129" viewBox="0 0 424 129" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M36.2041 1.87763C23.9713 5.09029 14.9512 12.9984 9.5144 24.984C6.54887 31.2858 6.17818 33.3863 6.67243 42.2829C7.29025 58.5933 15.1983 70.8261 29.2846 77.8692C35.3392 80.8348 36.2041 80.8348 73.7675 81.4526C94.8968 81.8233 112.814 82.5647 113.678 83.0589C114.42 83.6767 115.161 85.6537 115.161 87.5072C115.161 89.4842 114.42 91.5848 113.678 92.2026C112.69 93.0676 97.3681 93.4382 73.6439 93.4382L35.3392 93.3147L17.6696 110.861L0 128.407H57.4571C122.328 128.407 124.676 128.16 135.673 119.139C159.026 99.9871 154.084 62.918 126.529 50.191C121.092 47.5962 118.374 47.4726 81.7991 46.8548L42.8766 46.237L41.7645 42.9007C39.1697 35.3634 33.3622 35.734 149.018 35.734L254.17 35.6105L271.84 18.5587C281.478 9.16788 289.386 1.13625 289.386 0.641991C289.386 0.271301 233.906 -0.0993958 166.193 0.0241699C62.276 0.0241699 41.7645 0.394867 36.2041 1.87763Z" fill="#02A0A0"/>
<path d="M156.705 127.454V87.6971V48.0564H174.573H192.441V52.4609V56.7495L238.322 56.5177L284.317 56.17L264.144 79.9313C264.374 80.7426 254.691 81.0903 230.368 81.0903C211.577 81.0903 195.438 81.3222 194.401 81.7858C192.787 82.3653 192.441 84.104 192.441 90.479V94.2978H241.434C268.409 94.2978 290.427 94.6456 290.427 95.1092L273.712 121.311L269.216 127.454H212.961H156.705Z" fill="#02A0A0"/>
<circle cx="358.815" cy="64.2075" r="64.2075" fill="#02A0A0"/>
<circle cx="359.377" cy="64.7717" r="35.5199" fill="#CCECEC"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

11
src/components/MainFrame.tsx
View File

@@ -13,18 +13,13 @@ interface MainFrameProps {
const MainFrame: FC<MainFrameProps> = ({ children, title }) => {
return (
<MotionVStack {...OPACITY_ON_LOAD} w="100%" h="94%" p={4} pt={0} pb={0} >
<Text color={'#fff'} w="100%" fontSize="sm" display="flex" alignItems="center" h="3%">
{title}
</Text>
<MotionVStack {...OPACITY_ON_LOAD} w="100%" h="94%" p={4} pb={0} >
<Box
w="100%"
h="97%"
border="1px solid #ffffff30"
bg="#434A5330"
bg="#ffffff"
rounded="md"
backdropFilter="blur(10px)"
shadow={'xs'}
boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
>
{children}
</Box>

29
src/index.css
View File

@@ -6,31 +6,44 @@
.active {
background-color: #434A53;
color: #fff;
border: 1px solid #ffffff20 !important;
background-color: #02A0A0 !important;
color: #fff !important;
border: 1px solid #02A0A0 !important;
transition: all 0.5s;
border-radius: 8px;
/* background-color: #e2e8f01c; */
}
.active:hover {
background-color: #434A53;
color: #fff;
border: 1px solid #ffffff20 !important;
border: 1px solid #02A0A0 !important;
transition: all 0.5s;
border-radius: 8px;
/* background-color: #e2e8f01c !important; */
}
.linkChild:hover{
color: #02A0A0 !important;
transition: all 0.5s;
}
.activeChild{
color: #02A0A0 !important;
/* border: 1px solid #02A0A0 !important; */
transition: all 0.5s;
border-radius: 8px;
}
.link{
transition: all 0.5s;
}
.link:hover {
background-color: #434A53;
background-color: #02A0A0;
color: #fff;
border: 1px solid #ffffff20 !important;
border: 1px solid #02A0A0 !important;
/* color: #fff; */
/* background-color: #e2e8f01c !important; */
}