feat: add ui for dialog drawer and input

.env.sample

@@ -0,0 +1 @@
+GITHUB_LINK=

.vscode/settings.json

@@ -21,5 +21,8 @@
   "tailwindCSS.experimental.classRegex": [
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
     ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ],
+  "cSpell.words": [
+    "vaul"
   ]
 }

package.json

@@ -18,9 +18,12 @@
 	"dependencies": {
 		"@biomejs/biome": "1.8.0",
 		"@radix-ui/react-checkbox": "1.0.4",
+		"@radix-ui/react-dialog": "1.0.5",
 		"@radix-ui/react-dropdown-menu": "2.0.6",
 		"@radix-ui/react-icons": "1.3.0",
+		"@radix-ui/react-label": "2.0.2",
 		"@radix-ui/react-slot": "1.0.2",
+		"@radix-ui/react-tabs": "1.0.4",
 		"@tanstack/react-table": "8.17.3",
 		"class-variance-authority": "0.7.0",
 		"clsx": "2.1.1",
@@ -29,7 +32,9 @@
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"tailwind-merge": "2.3.0",
-		"tailwindcss-animate": "1.0.7"
+		"tailwindcss-animate": "1.0.7",
+		"vaul": "0.9.1",
+		"zod": "3.23.8"
 	},
 	"devDependencies": {
 		"@types/node": "20.14.1",

src/app/page.tsx

@@ -1,9 +1,9 @@
-import { DataTableDemo } from "@/features/list/table";
+import { MainTab } from "@/features/blog/components/main-tab";
 
 export default function Home() {
 	return (
 		<main className="flex min-h-screen flex-col items-center justify-between p-24">
-			<DataTableDemo />
+			<MainTab />
 		</main>
 	);
 }

src/components/form/submit-button.tsx

@@ -0,0 +1,18 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import type { FC } from "react";
+import { useFormStatus } from "react-dom";
+
+type Props = {
+	label: string;
+};
+
+export const SubmitButton: FC<Props> = ({ label }) => {
+	const { pending } = useFormStatus();
+
+	return (
+		<Button type="submit" disabled={pending}>
+			{label}
+		</Button>
+	);
+};

src/components/ui/card.tsx

@@ -0,0 +1,83 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn(
+			"rounded-xl border bg-card text-card-foreground shadow",
+			className,
+		)}
+		{...props}
+	/>
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn("flex flex-col space-y-1.5 p-6", className)}
+		{...props}
+	/>
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+	<h3
+		ref={ref}
+		className={cn("font-semibold leading-none tracking-tight", className)}
+		{...props}
+	/>
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+	<p
+		ref={ref}
+		className={cn("text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn("flex items-center p-6 pt-0", className)}
+		{...props}
+	/>
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+	Card,
+	CardHeader,
+	CardFooter,
+	CardTitle,
+	CardDescription,
+	CardContent,
+};