From c7e7edc30038c62c220d42216e11b8b3817ddb0e Mon Sep 17 00:00:00 2001 From: diubi Date: Tue, 17 Mar 2026 23:03:47 +0100 Subject: [PATCH 01/10] created cardCaption.tsx --- src/components/ui/cards/cardCaption.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 src/components/ui/cards/cardCaption.tsx diff --git a/src/components/ui/cards/cardCaption.tsx b/src/components/ui/cards/cardCaption.tsx new file mode 100644 index 0000000..79b9a25 --- /dev/null +++ b/src/components/ui/cards/cardCaption.tsx @@ -0,0 +1,16 @@ +import type { LucideIcon } from "lucide-react" +import { Card, CardAction, CardContent, CardHeader, CardTitle } from "./card" + +export function CardCaption({ title, description, icon }: { title: string; description: string; icon: LucideIcon }) { + return ( + + + {title} + + + +

{description}

+ + + ) +} From ba908ea33598a6fad4c43f0d6d7c7497c14d4502 Mon Sep 17 00:00:00 2001 From: diubi Date: Wed, 18 Mar 2026 00:15:54 +0100 Subject: [PATCH 02/10] Updated card-caption to use react-icons --- package.json | 3 ++- pnpm-lock.yaml | 12 ++++++++++++ src/app/page.tsx | 16 +++++++++++++++ src/components/card-caption.tsx | 26 +++++++++++++++++++++++++ src/components/ui/{cards => }/card.tsx | 21 ++++++++++++++------ src/components/ui/cards/cardCaption.tsx | 16 --------------- 6 files changed, 71 insertions(+), 23 deletions(-) create mode 100644 src/components/card-caption.tsx rename src/components/ui/{cards => }/card.tsx (76%) delete mode 100644 src/components/ui/cards/cardCaption.tsx 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..3d84309 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/cards/card.tsx b/src/components/ui/card.tsx similarity index 76% rename from src/components/ui/cards/card.tsx rename to src/components/ui/card.tsx index 212585d..5fdc386 100644 --- a/src/components/ui/cards/card.tsx +++ b/src/components/ui/card.tsx @@ -1,8 +1,8 @@ -import type { LucideIcon } from "lucide-react" import * as React from "react" +import type { IconType } from "react-icons" import { cn } from "@/lib/utils" -import { Glass } from "../../glass" -import { Button } from "../button" +import { Glass } from "../glass" +import { Button } from "./button" function Card({ className, @@ -14,7 +14,7 @@ function Card({ data-slot="card" data-size={size} className={cn( - "ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl text-sm has-[>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", + "w-78 h-66 ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl text-sm has-[>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} @@ -52,7 +52,12 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) { return
} -function CardAction({ className, icon: Icon, ...props }: React.ComponentProps<"div"> & { icon: LucideIcon }) { +function CardAction({ + className, + icon: Icon, + iconSize = "normal", + ...props +}: React.ComponentProps<"div"> & { icon: IconType; iconSize: "normal" | "large" }) { const gradientId = React.useId() return ( @@ -69,7 +74,11 @@ function CardAction({ className, icon: Icon, ...props }: React.ComponentProps<"d - +
) } diff --git a/src/components/ui/cards/cardCaption.tsx b/src/components/ui/cards/cardCaption.tsx deleted file mode 100644 index 79b9a25..0000000 --- a/src/components/ui/cards/cardCaption.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type { LucideIcon } from "lucide-react" -import { Card, CardAction, CardContent, CardHeader, CardTitle } from "./card" - -export function CardCaption({ title, description, icon }: { title: string; description: string; icon: LucideIcon }) { - return ( - - - {title} - - - -

{description}

- - - ) -} From 53c372f7a57645a774fbe0a6341a66c36c5891a1 Mon Sep 17 00:00:00 2001 From: diubi Date: Wed, 18 Mar 2026 00:33:26 +0100 Subject: [PATCH 03/10] Adjusted font sizes --- src/app/page.tsx | 2 +- src/components/ui/card.tsx | 10 ++++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 3d84309..03a15b9 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -21,7 +21,7 @@ export default function Home() {
) {
) { - return
+ return ( +
+ ) } function CardBottomButton({ className, ...props }: React.ComponentProps) { From 23d22fe3b06bbcb20de521d64a793eb9395f8df2 Mon Sep 17 00:00:00 2001 From: diubi Date: Wed, 18 Mar 2026 00:15:54 +0100 Subject: [PATCH 04/10] Updated card-caption to use react-icons --- package.json | 1 + pnpm-lock.yaml | 12 ++++++++++++ src/app/page.tsx | 16 ++++++++++++++++ src/components/card-caption.tsx | 26 ++++++++++++++++++++++++++ src/components/ui/card.tsx | 21 +++++++++++++++------ 5 files changed, 70 insertions(+), 6 deletions(-) create mode 100644 src/components/card-caption.tsx diff --git a/package.json b/package.json index 4378d36..4e851c8 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,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" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e1c5681..0bdd5ab 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 @@ -1067,6 +1070,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'} @@ -1936,6 +1944,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..3d84309 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 index 212585d..5fdc386 100644 --- a/src/components/ui/card.tsx +++ b/src/components/ui/card.tsx @@ -1,8 +1,8 @@ -import type { LucideIcon } from "lucide-react" import * as React from "react" +import type { IconType } from "react-icons" import { cn } from "@/lib/utils" -import { Glass } from "../../glass" -import { Button } from "../button" +import { Glass } from "../glass" +import { Button } from "./button" function Card({ className, @@ -14,7 +14,7 @@ function Card({ data-slot="card" data-size={size} className={cn( - "ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl text-sm has-[>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", + "w-78 h-66 ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl text-sm has-[>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} @@ -52,7 +52,12 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) { return
} -function CardAction({ className, icon: Icon, ...props }: React.ComponentProps<"div"> & { icon: LucideIcon }) { +function CardAction({ + className, + icon: Icon, + iconSize = "normal", + ...props +}: React.ComponentProps<"div"> & { icon: IconType; iconSize: "normal" | "large" }) { const gradientId = React.useId() return ( @@ -69,7 +74,11 @@ function CardAction({ className, icon: Icon, ...props }: React.ComponentProps<"d - +
) } From 6c0c199712799d0bf5050e40e39908cee67b9f84 Mon Sep 17 00:00:00 2001 From: diubi Date: Wed, 18 Mar 2026 00:33:26 +0100 Subject: [PATCH 05/10] Adjusted font sizes --- src/app/page.tsx | 2 +- src/components/ui/card.tsx | 10 ++++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 3d84309..03a15b9 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -21,7 +21,7 @@ export default function Home() {
) {
) { - return
+ return ( +
+ ) } function CardBottomButton({ className, ...props }: React.ComponentProps) { From 3758c1e248788c8b80dd8de5122f39816c484c85 Mon Sep 17 00:00:00 2001 From: diubi Date: Thu, 2 Apr 2026 16:26:28 +0200 Subject: [PATCH 06/10] chore: biome --- src/app/page.tsx | 8 ++++---- src/components/ui/card.tsx | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 03a15b9..f346766 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -7,13 +7,13 @@ import { ButtonWithIcon } from "@/components/ui/buttonWithIcon" export default function Home() { return (
-

Welcome to PoliNetwork

+

Welcome to PoliNetwork

PoliNetwork is a student association dedicated to connecting and supporting students at Politecnico.

-
-

Test with figma variables

-
+
+

Test with figma variables

+
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx index 22bd15a..2d8de0c 100644 --- a/src/components/ui/card.tsx +++ b/src/components/ui/card.tsx @@ -14,7 +14,7 @@ function Card({ data-slot="card" data-size={size} className={cn( - "w-78 h-66 ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl text-sm has-[>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", + "group/card flex h-66 w-78 flex-col gap-4 overflow-hidden rounded-xl bg-card text-card-foreground text-sm ring-foreground/10 has-[>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", className )} {...props} @@ -27,7 +27,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
) {
From d68d4fa227e6809d44d57fbeefba4b4ede5ae21c Mon Sep 17 00:00:00 2001 From: diubi Date: Tue, 7 Apr 2026 17:58:38 +0200 Subject: [PATCH 07/10] feat: typography --- src/components/card-caption.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/card-caption.tsx b/src/components/card-caption.tsx index 78ede55..0fbc179 100644 --- a/src/components/card-caption.tsx +++ b/src/components/card-caption.tsx @@ -14,11 +14,13 @@ export function CardCaption({ }) { return ( - + {title} {icon && } - +

{caption}

From 561078cf3d3032fabee6034a41df766c1af29054 Mon Sep 17 00:00:00 2001 From: diubi Date: Thu, 9 Apr 2026 13:32:34 +0200 Subject: [PATCH 08/10] aligned card.tsx between all cards --- src/components/ui/card.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx index 2d8de0c..8dff6cd 100644 --- a/src/components/ui/card.tsx +++ b/src/components/ui/card.tsx @@ -14,7 +14,7 @@ function Card({ data-slot="card" data-size={size} className={cn( - "group/card flex h-66 w-78 flex-col gap-4 overflow-hidden rounded-xl bg-card text-card-foreground text-sm ring-foreground/10 has-[>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 h-66 w-78 flex-col gap-4 overflow-hidden rounded-[1.25rem] bg-card text-card-foreground text-sm ring-foreground/10 has-[>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", className )} {...props} @@ -57,13 +57,13 @@ function CardAction({ icon: Icon, iconSize = "normal", ...props -}: React.ComponentProps<"div"> & { icon: IconType; iconSize: "normal" | "large" }) { +}: React.ComponentProps<"div"> & { icon: IconType; iconSize: "small" | "normal" | "large" }) { const gradientId = React.useId() return (
@@ -75,7 +75,7 @@ function CardAction({ From 030819b934f668997cfffcbc800e520508011018 Mon Sep 17 00:00:00 2001 From: diubi Date: Thu, 9 Apr 2026 17:08:36 +0200 Subject: [PATCH 09/10] fix: homepage cards layout --- src/app/page.tsx | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 47626ab..7c66640 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -60,20 +60,20 @@ export default function Home() { ))}
-
-
- - +
+ + +
) From 8b6c88f4698a04305e53cbfb195c2017b9c5e14e Mon Sep 17 00:00:00 2001 From: diubi Date: Thu, 9 Apr 2026 17:11:08 +0200 Subject: [PATCH 10/10] chore: biome --- src/app/page.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 7c66640..363ffcd 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,9 +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" import { FiBook, FiBookOpen, FiClipboard, FiFileText, FiPenTool, FiTriangle, FiUploadCloud } from "react-icons/fi" +import { CardCaption } from "@/components/card-caption" import { CardIcon } from "@/components/card-icon" import { Hero } from "@/components/home/hero"