diff --git a/package.json b/package.json index a42c193..c3efba7 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "react": "^19.2.3", "react-dom": "^19.2.3", "react-hook-form": "^7.68.0", + "react-icons": "^5.6.0", "tailwind-merge": "^3.4.0", "tailwindcss-animate": "^1.0.7", "zod": "^4.2.1" @@ -44,7 +45,7 @@ "tw-animate-css": "^1.4.0", "typescript": "^5.9.3" }, - "packageManager": "pnpm@10.17.1", + "packageManager": "pnpm@10.32.1", "engines": { "node": ">=24.5.2" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d138111..e3ff7d2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -56,6 +56,9 @@ importers: react-hook-form: specifier: ^7.68.0 version: 7.68.0(react@19.2.3) + react-icons: + specifier: ^5.6.0 + version: 5.6.0(react@19.2.3) tailwind-merge: specifier: ^3.4.0 version: 3.4.0 @@ -1035,6 +1038,11 @@ packages: peerDependencies: react: ^16.8.0 || ^17 || ^18 || ^19 + react-icons@5.6.0: + resolution: {integrity: sha512-RH93p5ki6LfOiIt0UtDyNg/cee+HLVR6cHHtW3wALfo+eOHTp8RnU2kRkI6E+H19zMIs03DyxUG/GfZMOGvmiA==} + peerDependencies: + react: '*' + react-remove-scroll-bar@2.3.8: resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==} engines: {node: '>=10'} @@ -1904,6 +1912,10 @@ snapshots: dependencies: react: 19.2.3 + react-icons@5.6.0(react@19.2.3): + dependencies: + react: 19.2.3 + react-remove-scroll-bar@2.3.8(@types/react@19.2.7)(react@19.2.3): dependencies: react: 19.2.3 diff --git a/src/app/page.tsx b/src/app/page.tsx index ecc1240..03a15b9 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,4 +1,6 @@ import { Users } from "lucide-react" +import { FaBookBookmark } from "react-icons/fa6" +import { CardCaption } from "@/components/card-caption" import { Button } from "@/components/ui/button" import { ButtonWithIcon } from "@/components/ui/buttonWithIcon" @@ -17,6 +19,20 @@ export default function Home() { +
+ + +
) } diff --git a/src/components/card-caption.tsx b/src/components/card-caption.tsx new file mode 100644 index 0000000..78ede55 --- /dev/null +++ b/src/components/card-caption.tsx @@ -0,0 +1,26 @@ +import type { IconType } from "react-icons" +import { Card, CardAction, CardContent, CardHeader, CardTitle } from "./ui/card" + +export function CardCaption({ + title, + caption, + icon, + iconPosition = "right", +}: { + title: string + caption: string + icon?: IconType + iconPosition?: "top" | "right" +}) { + return ( + + + {title} + {icon && } + + +

{caption}

+ + + ) +} diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx new file mode 100644 index 0000000..22bd15a --- /dev/null +++ b/src/components/ui/card.tsx @@ -0,0 +1,100 @@ +import * as React from "react" +import type { IconType } from "react-icons" +import { cn } from "@/lib/utils" +import { Glass } from "../glass" +import { Button } from "./button" + +function Card({ + className, + size = "default", + ...props +}: React.ComponentProps & { size?: "default" | "sm" }) { + return ( + img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", + className + )} + {...props} + /> + ) +} + +function CardHeader({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardTitle({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardDescription({ className, ...props }: React.ComponentProps<"div">) { + return
+} + +function CardAction({ + className, + icon: Icon, + iconSize = "normal", + ...props +}: React.ComponentProps<"div"> & { icon: IconType; iconSize: "normal" | "large" }) { + const gradientId = React.useId() + + return ( +
+ + Icon gradient helper + + + + + + + +
+ ) +} + +function CardContent({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardBottomButton({ className, ...props }: React.ComponentProps) { + return