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

Merge branch 'main' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into yasin

Browse Source
This commit is contained in:
YasinShaikh123
2025-02-12 12:51:28 +05:30
parent 599f320598 5db4c3a236
commit c7de34fda2
33 changed files with 426 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/MainFrame.tsx
View File

@@ -13,7 +13,7 @@ interface MainFrameProps {
const MainFrame: FC<MainFrameProps> = ({ children }) => {
return (
<MotionVStack rounded="lg" overflowY={'auto'} overflowX={'hidden'} {...OPACITY_ON_LOAD} w="100%" minH="93%" p={0} pe={2} pb={2}>
<MotionVStack rounded="lg" overflowY={'auto'} overflowX={'hidden'} {...OPACITY_ON_LOAD} w="100%" minH="93%" p={0} pe={2} ps={1.5} pb={2}>
<Box
w="100%"
// h="100%"
@@ -22,7 +22,7 @@ const MainFrame: FC<MainFrameProps> = ({ children }) => {
rounded="lg"
boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
pt={3}
>
>
{children}
</Box>
</MotionVStack>

20
src/components/ProgressBar/ProgessBar.css Normal file
View File

@@ -0,0 +1,20 @@
/* HTML: <div class="progressbar"></div> */
.progressbar {
height: 4px;
width: 100%;
--c: no-repeat linear-gradient(#02A0A0 0 0);
background: var(--c), var(--c), #B8F8F8;
background-size: 60% 100%;
animation: l16 3s infinite;
}
@keyframes l16 {
0% {background-position: -150% 0, -150% 0}
66% {background-position: 250% 0, -150% 0}
100% {background-position: 250% 0, 250% 0}
}
.progressbarInactive{
height: 4px;
width: 100%;
}

12
src/components/ProgressBar/ProgressBar.tsx Normal file
View File

@@ -0,0 +1,12 @@
import React from "react";
import './ProgessBar.css';
interface ProgressBarProps {
isLoading: boolean;
}
const ProgressBar: React.FC<ProgressBarProps> = ({ isLoading }) => {
return <span className={isLoading ? "progressbar" : "progressbarInactive"} />;
};
export default ProgressBar;

28
src/components/Sipnner/Spinner.css Normal file
View File

@@ -0,0 +1,28 @@
/* HTML: <div class="loader"></div> */
.loader {
width: 25px;
aspect-ratio: 1;
display: grid;
border-radius: 50%;
background:
linear-gradient(0deg, rgba(2, 160, 160, 0.5) 30%, transparent 0 70%, rgba(2, 160, 160, 1) 0) 50% / 8% 100%,
linear-gradient(90deg, rgba(2, 160, 160, 0.25) 30%, transparent 0 70%, rgba(2, 160, 160, 0.75) 0) 50% / 100% 8%;
background-repeat: no-repeat;
animation: l23 1s infinite steps(12);
}
.loader::before,
.loader::after {
content: "";
grid-area: 1/1;
border-radius: 50%;
background: inherit;
opacity: 0.915;
transform: rotate(30deg);
}
.loader::after {
opacity: 0.83;
transform: rotate(60deg);
}
@keyframes l23 {
100% {transform: rotate(1turn)}
}

7
src/components/Sipnner/Spinner.tsx Normal file
View File

@@ -0,0 +1,7 @@
import { Center } from '@chakra-ui/react'
import './Spinner.css'
export const Spinner = () => <Center w={'100%'} h={'100%'}> <div className='loader'/></Center>

6
src/components/ui/toaster.tsx
View File

@@ -17,16 +17,16 @@ export const toaster = createToaster({
export const Toaster = () => {
return (
<Portal>
<Portal >
<ChakraToaster toaster={toaster} insetInline={{ mdDown: "4" }}>
{(toast) => (
<Toast.Root width={{ md: "sm" }}>
<Toast.Root width={{ md: "sm" }}>
{toast.type === "loading" ? (
<Spinner size="sm" color="blue.solid" />
) : (
<Toast.Indicator />
)}
<Stack rounded={'full'} gap="1" flex="1" maxWidth="100%">
<Stack appearance={'light'} rounded={'full'} gap="1" flex="1" maxWidth="100%">
{toast.title && <Toast.Title p={2} color="#02A0A0">{toast.title}</Toast.Title>}
{toast.description && (
<Toast.Description>{toast.description}</Toast.Description>