From fe2fdb5ecef4c18b62b64c5fabf4f4ceb7a1faef Mon Sep 17 00:00:00 2001 From: "tao.chen" <93983997+taochen-ct@users.noreply.github.com> Date: Wed, 26 Aug 2026 10:17:53 +0800 Subject: [PATCH] feat: add ui components --- frontend/app/components/ui/alert-dialog.tsx | 185 ++++++++++++ frontend/app/components/ui/card.tsx | 100 +++++++ frontend/app/components/ui/checkbox.tsx | 27 ++ frontend/app/components/ui/combobox.tsx | 297 ++++++++++++++++++++ frontend/app/components/ui/dialog.tsx | 158 +++++++++++ frontend/app/components/ui/drawer.tsx | 226 +++++++++++++++ frontend/app/components/ui/input-group.tsx | 153 ++++++++++ frontend/app/components/ui/table.tsx | 114 ++++++++ frontend/app/components/ui/textarea.tsx | 18 ++ frontend/app/components/ui/toast.tsx | 232 +++++++++++++++ frontend/package.json | 1 + frontend/pnpm-lock.yaml | 43 +++ 12 files changed, 1554 insertions(+) create mode 100644 frontend/app/components/ui/alert-dialog.tsx create mode 100644 frontend/app/components/ui/card.tsx create mode 100644 frontend/app/components/ui/checkbox.tsx create mode 100644 frontend/app/components/ui/combobox.tsx create mode 100644 frontend/app/components/ui/dialog.tsx create mode 100644 frontend/app/components/ui/drawer.tsx create mode 100644 frontend/app/components/ui/input-group.tsx create mode 100644 frontend/app/components/ui/table.tsx create mode 100644 frontend/app/components/ui/textarea.tsx create mode 100644 frontend/app/components/ui/toast.tsx diff --git a/frontend/app/components/ui/alert-dialog.tsx b/frontend/app/components/ui/alert-dialog.tsx new file mode 100644 index 0000000..c6a6e29 --- /dev/null +++ b/frontend/app/components/ui/alert-dialog.tsx @@ -0,0 +1,185 @@ +import * as React from "react" +import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog" + +import { cn } from "~/lib/utils" +import { Button } from "~/components/ui/button" + +function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) { + return +} + +function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) { + return ( + + ) +} + +function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) { + return ( + + ) +} + +function AlertDialogOverlay({ + className, + ...props +}: AlertDialogPrimitive.Backdrop.Props) { + return ( + + ) +} + +function AlertDialogContent({ + className, + size = "default", + ...props +}: AlertDialogPrimitive.Popup.Props & { + size?: "default" | "sm" +}) { + return ( + + + + + ) +} + +function AlertDialogHeader({ + className, + ...props +}: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function AlertDialogFooter({ + className, + ...props +}: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function AlertDialogMedia({ + className, + ...props +}: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function AlertDialogTitle({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function AlertDialogDescription({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function AlertDialogAction({ + className, + ...props +}: React.ComponentProps) { + return ( +