Add pill component

src/main.tsx

@@ -18,7 +18,7 @@ declare module "@tanstack/react-router" {
 createRoot(document.getElementById('root')!).render(
 	<StrictMode>
 		<ThemeProvider defaultTheme="dark">
-			<ToasterProvider className="bg-zinc-700 text-white px-4 py-2 min-w-32 max-w-128 rounded-lg gap-y-4">
+			<ToasterProvider className="bg-zinc-700 text-white px-4 py-2 min-w-32 max-w-lg rounded-lg gap-y-4">
 				<RouterProvider router={router}/>
 			</ToasterProvider>
 		</ThemeProvider>

src/routeTree.gen.ts

@@ -12,6 +12,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 PillIndexRouteImport } from './routes/pill/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'
@@ -33,6 +34,11 @@ const ProgressIndexRoute = ProgressIndexRouteImport.update({
   path: '/progress/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const PillIndexRoute = PillIndexRouteImport.update({
+  id: '/pill/',
+  path: '/pill/',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ModalIndexRoute = ModalIndexRouteImport.update({
   id: '/modal/',
   path: '/modal/',
@@ -66,6 +72,7 @@ export interface FileRoutesByFullPath {
   '/loading': typeof LoadingIndexRoute
   '/message': typeof MessageIndexRoute
   '/modal': typeof ModalIndexRoute
+  '/pill': typeof PillIndexRoute
   '/progress': typeof ProgressIndexRoute
   '/tab': typeof TabIndexRoute
 }
@@ -76,6 +83,7 @@ export interface FileRoutesByTo {
   '/loading': typeof LoadingIndexRoute
   '/message': typeof MessageIndexRoute
   '/modal': typeof ModalIndexRoute
+  '/pill': typeof PillIndexRoute
   '/progress': typeof ProgressIndexRoute
   '/tab': typeof TabIndexRoute
 }
@@ -87,6 +95,7 @@ export interface FileRoutesById {
   '/loading/': typeof LoadingIndexRoute
   '/message/': typeof MessageIndexRoute
   '/modal/': typeof ModalIndexRoute
+  '/pill/': typeof PillIndexRoute
   '/progress/': typeof ProgressIndexRoute
   '/tab/': typeof TabIndexRoute
 }
@@ -99,6 +108,7 @@ export interface FileRouteTypes {
     | '/loading'
     | '/message'
     | '/modal'
+    | '/pill'
     | '/progress'
     | '/tab'
   fileRoutesByTo: FileRoutesByTo
@@ -109,6 +119,7 @@ export interface FileRouteTypes {
     | '/loading'
     | '/message'
     | '/modal'
+    | '/pill'
     | '/progress'
     | '/tab'
   id:
@@ -119,6 +130,7 @@ export interface FileRouteTypes {
     | '/loading/'
     | '/message/'
     | '/modal/'
+    | '/pill/'
     | '/progress/'
     | '/tab/'
   fileRoutesById: FileRoutesById
@@ -130,6 +142,7 @@ export interface RootRouteChildren {
   LoadingIndexRoute: typeof LoadingIndexRoute
   MessageIndexRoute: typeof MessageIndexRoute
   ModalIndexRoute: typeof ModalIndexRoute
+  PillIndexRoute: typeof PillIndexRoute
   ProgressIndexRoute: typeof ProgressIndexRoute
   TabIndexRoute: typeof TabIndexRoute
 }
@@ -157,6 +170,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ProgressIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/pill/': {
+      id: '/pill/'
+      path: '/pill'
+      fullPath: '/pill'
+      preLoaderRoute: typeof PillIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/modal/': {
       id: '/modal/'
       path: '/modal'
@@ -202,6 +222,7 @@ const rootRouteChildren: RootRouteChildren = {
   LoadingIndexRoute: LoadingIndexRoute,
   MessageIndexRoute: MessageIndexRoute,
   ModalIndexRoute: ModalIndexRoute,
+  PillIndexRoute: PillIndexRoute,
   ProgressIndexRoute: ProgressIndexRoute,
   TabIndexRoute: TabIndexRoute,
 }

src/routes/__root.tsx

@@ -11,6 +11,7 @@ const navLinks = [
 	{ to: "/loading", label: "Loading" },
 	{ to: "/message", label: "Message" },
 	{ to: "/modal", label: "Modal" },
+	{ to: "/pill", label: "Pill" },
 	{ to: "/progress", label: "Progress" },
 	{ to: "/tab", label: "Tab" }
 ];
@@ -20,7 +21,7 @@ export const Route = createRootRoute({
 	component: () => (
 		<>
 			<NavBar
-				className="bg-neutral-300 dark:bg-neutral-900 h-12"
+				className="bg-neutral-300 dark:bg-neutral-900 h-12 gap-x-4"
 			>
 				<div
 					className="flex flex-row items-center justify-end gap-x-4"

src/routes/message/index.tsx

@@ -1,13 +1,13 @@
 import { DangerMessageBlock, DarkMessageBlock, LightMessageBlock, PrimaryMessageBlock, SecondaryMessageBlock, SuccessMessageBlock, TertiaryMessageBlock, WarningMessageBlock } from '$/component/message';
-import InfoMessageBlock from '$/component/message/InfoMessageBlock';
-import MoltenMessageBlock from '$/component/message/MoltenMessageBlock';
-import { MattrixwvTabGroup } from '$/component/tab';
-import type { MessageBlockProps } from '$/types/MessageTypes';
-import type { TabGroupContent } from '$/types/TabTypes';
-import { createFileRoute } from '@tanstack/react-router';
+import InfoMessageBlock from "$/component/message/InfoMessageBlock";
+import MoltenMessageBlock from "$/component/message/MoltenMessageBlock";
+import { MattrixwvTabGroup } from "$/component/tab";
+import type { MessageBlockProps } from "$/types/MessageTypes";
+import type { TabGroupContent } from "$/types/TabTypes";
+import { createFileRoute } from "@tanstack/react-router";
 
 
-export const Route = createFileRoute('/message/')({
+export const Route = createFileRoute("/message/")({
 	component: MessagePage
 });
 

src/routes/pill/index.tsx

@@ -0,0 +1,56 @@
+import DangerPill from "$/component/pill/DangerPill";
+import DarkPill from "$/component/pill/DarkPill";
+import InfoPill from "$/component/pill/InfoPill";
+import LightPill from "$/component/pill/LightPill";
+import MoltenPill from "$/component/pill/MoltenPill";
+import PrimaryPill from "$/component/pill/PrimaryPill";
+import SecondaryPill from "$/component/pill/SecondaryPill";
+import SuccessPill from "$/component/pill/SuccessPill";
+import TertiaryPill from "$/component/pill/TertiaryPill";
+import WarningPill from "$/component/pill/WarningPill";
+import type { PillProps } from "$/types/PillTypes";
+import { createFileRoute } from "@tanstack/react-router";
+
+
+export const Route = createFileRoute("/pill/")({
+	component: PillPage
+});
+
+
+function PillPage(){
+	return (
+		<div className="flex flex-col items-center justify-center gap-y-8">
+			<PillLayout PillType={PrimaryPill} pillName="Primary"/>
+			<PillLayout PillType={SecondaryPill} pillName="Secondary"/>
+			<PillLayout PillType={TertiaryPill} pillName="Tertiary"/>
+			<PillLayout PillType={InfoPill} pillName="Info"/>
+			<PillLayout PillType={SuccessPill} pillName="Success"/>
+			<PillLayout PillType={WarningPill} pillName="Warning"/>
+			<PillLayout PillType={DangerPill} pillName="Danger"/>
+			<PillLayout PillType={MoltenPill} pillName="Molten"/>
+			<PillLayout PillType={DarkPill} pillName="Dark"/>
+			<PillLayout PillType={LightPill} pillName="Light"/>
+		</div>
+	);
+}
+
+function PillLayout({
+	PillType,
+	pillName
+}: Readonly<{
+	PillType: (props: PillProps) => React.ReactNode;
+	pillName: string;
+}>){
+	return (
+		<div className="flex flex-col items-center justify-center gap-y-2">
+			<h2 className="text-2xl">{pillName}</h2>
+			<div className="flex flex-row items-center justify-center gap-x-8">
+				<PillType rounding="none">None</PillType>
+				<PillType rounding="sm">Small</PillType>
+				<PillType rounding="md">Medium</PillType>
+				<PillType rounding="lg">Large</PillType>
+				<PillType rounding="full">Full</PillType>
+			</div>
+		</div>
+	);
+}