BaseLibraries/MattrixwvReactComponents
1
0
Fork 0
mirror of https://bitbucket.org/Mattrixwv/mattrixwvreactcomponents.git synced 2025-12-07 06:03:58 -05:00
Code Issues Packages Projects Releases Wiki Activity

Added progress component

Browse Source
This commit is contained in:
Mattrixwv
2025-08-09 14:25:27 -04:00
parent e1b3000121
commit 4e3c984125
17 changed files with 447 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/routeTree.gen.ts
View File

@@ -11,6 +11,7 @@
import { Route as rootRouteImport } from './routes/__root'
import { Route as IndexRouteImport } from './routes/index'
import { Route as TabIndexRouteImport } from './routes/tab/index'
import { Route as ProgressIndexRouteImport } from './routes/progress/index'
import { Route as ModalIndexRouteImport } from './routes/modal/index'
import { Route as MessageIndexRouteImport } from './routes/message/index'
import { Route as LoadingIndexRouteImport } from './routes/loading/index'
@@ -27,6 +28,11 @@ const TabIndexRoute = TabIndexRouteImport.update({
path: '/tab/',
getParentRoute: () => rootRouteImport,
} as any)
const ProgressIndexRoute = ProgressIndexRouteImport.update({
id: '/progress/',
path: '/progress/',
getParentRoute: () => rootRouteImport,
} as any)
const ModalIndexRoute = ModalIndexRouteImport.update({
id: '/modal/',
path: '/modal/',
@@ -60,6 +66,7 @@ export interface FileRoutesByFullPath {
'/loading': typeof LoadingIndexRoute
'/message': typeof MessageIndexRoute
'/modal': typeof ModalIndexRoute
'/progress': typeof ProgressIndexRoute
'/tab': typeof TabIndexRoute
}
export interface FileRoutesByTo {
@@ -69,6 +76,7 @@ export interface FileRoutesByTo {
'/loading': typeof LoadingIndexRoute
'/message': typeof MessageIndexRoute
'/modal': typeof ModalIndexRoute
'/progress': typeof ProgressIndexRoute
'/tab': typeof TabIndexRoute
}
export interface FileRoutesById {
@@ -79,6 +87,7 @@ export interface FileRoutesById {
'/loading/': typeof LoadingIndexRoute
'/message/': typeof MessageIndexRoute
'/modal/': typeof ModalIndexRoute
'/progress/': typeof ProgressIndexRoute
'/tab/': typeof TabIndexRoute
}
export interface FileRouteTypes {
@@ -90,9 +99,18 @@ export interface FileRouteTypes {
| '/loading'
| '/message'
| '/modal'
| '/progress'
| '/tab'
fileRoutesByTo: FileRoutesByTo
to: '/' | '/buttons' | '/input' | '/loading' | '/message' | '/modal' | '/tab'
to:
| '/'
| '/buttons'
| '/input'
| '/loading'
| '/message'
| '/modal'
| '/progress'
| '/tab'
id:
| '__root__'
| '/'
@@ -101,6 +119,7 @@ export interface FileRouteTypes {
| '/loading/'
| '/message/'
| '/modal/'
| '/progress/'
| '/tab/'
fileRoutesById: FileRoutesById
}
@@ -111,6 +130,7 @@ export interface RootRouteChildren {
LoadingIndexRoute: typeof LoadingIndexRoute
MessageIndexRoute: typeof MessageIndexRoute
ModalIndexRoute: typeof ModalIndexRoute
ProgressIndexRoute: typeof ProgressIndexRoute
TabIndexRoute: typeof TabIndexRoute
}
@@ -130,6 +150,13 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof TabIndexRouteImport
parentRoute: typeof rootRouteImport
}
'/progress/': {
id: '/progress/'
path: '/progress'
fullPath: '/progress'
preLoaderRoute: typeof ProgressIndexRouteImport
parentRoute: typeof rootRouteImport
}
'/modal/': {
id: '/modal/'
path: '/modal'
@@ -175,6 +202,7 @@ const rootRouteChildren: RootRouteChildren = {
LoadingIndexRoute: LoadingIndexRoute,
MessageIndexRoute: MessageIndexRoute,
ModalIndexRoute: ModalIndexRoute,
ProgressIndexRoute: ProgressIndexRoute,
TabIndexRoute: TabIndexRoute,
}
export const routeTree = rootRouteImport

3
src/routes/__root.tsx
View File

@@ -11,7 +11,8 @@ const navLinks = [
{ to: "/loading", label: "Loading" },
{ to: "/message", label: "Message" },
{ to: "/modal", label: "Modal" },
{ to: "/tab", label: "Tab" },
{ to: "/progress", label: "Progress" },
{ to: "/tab", label: "Tab" }
];

147
src/routes/progress/index.tsx Normal file
View File

@@ -0,0 +1,147 @@
import { DangerButton, PrimaryButton } from '$/component/button';
import { NumberInput } from '$/component/input';
import { DangerProgress, DarkProgress, InfoProgress, LightProgress, MoltenProgress, PrimaryProgress, Progress, SecondaryProgress, SuccessProgress, TertiaryProgress, WarningProgress } from '$/component/progress';
import { createFileRoute } from '@tanstack/react-router';
import { useState } from 'react';
import { BsDashLg, BsPlusLg } from 'react-icons/bs';
export const Route = createFileRoute('/progress/')({
component: ProgressPage,
});
function ProgressPage() {
const [ value, setValue ] = useState(0);
return (
<div
className="flex flex-col items-center justify-center w-full gap-y-8"
>
<div
className="flex flex-row items-center justify-center gap-x-8"
>
<DangerButton shape="square" onClick={() => setValue(value - 1)}><BsDashLg size={22}/></DangerButton>
<PrimaryButton shape="square" onClick={() => setValue(value + 1)}><BsPlusLg size={22}/></PrimaryButton>
<NumberInput
className="w-12!"
onChange={setValue}
value={value}
/>
</div>
<ProgressBlock
label="Progress"
>
<Progress
backgroundColor="var(--color-gray-300)"
progressColor="var(--color-amber-500)"
min={0}
max={100}
value={value}
label="Progress"
/>
</ProgressBlock>
<ProgressBlock label="Primary Progress">
<PrimaryProgress
min={0}
max={100}
value={value}
label="Primary Progress"
/>
</ProgressBlock>
<ProgressBlock label="Secondary Progress">
<SecondaryProgress
min={0}
max={100}
value={value}
label="Secondary Progress"
/>
</ProgressBlock>
<ProgressBlock label="Tertiary Progress">
<TertiaryProgress
min={0}
max={100}
value={value}
label="Tertiary Progress"
/>
</ProgressBlock>
<ProgressBlock label="Info Progress">
<InfoProgress
min={0}
max={100}
value={value}
label="Info Progress"
/>
</ProgressBlock>
<ProgressBlock label="Success Progress">
<SuccessProgress
min={0}
max={100}
value={value}
label="Success Progress"
/>
</ProgressBlock>
<ProgressBlock label="Warning Progress">
<WarningProgress
min={0}
max={100}
value={value}
label="Warning Progress"
/>
</ProgressBlock>
<ProgressBlock label="Danger Progress">
<DangerProgress
min={0}
max={100}
value={value}
label="Danger Progress"
/>
</ProgressBlock>
<ProgressBlock label="Molten Progress">
<MoltenProgress
min={0}
max={100}
value={value}
label="Molten Progress"
/>
</ProgressBlock>
<ProgressBlock label="Light Progress">
<LightProgress
min={0}
max={100}
value={value}
label="Light Progress"
/>
</ProgressBlock>
<ProgressBlock label="Dark Progress">
<DarkProgress
min={0}
max={100}
value={value}
label="Dark Progress"
/>
</ProgressBlock>
</div>
);
}
function ProgressBlock({
label,
children
}:{
label: string;
children: React.ReactNode;
}){
return (
<div
className="flex flex-col items-center justify-center w-128 gap-y-2"
>
<h3
className="font-bold text-2xl"
>
{label}
</h3>
{children}
</div>
);
}