feat: add card-caption (#48)

* created cardCaption.tsx

* Updated card-caption to use react-icons

* Adjusted font sizes

* Updated card-caption to use react-icons

* Adjusted font sizes

* chore: biome

* feat: typography

* aligned card.tsx between all cards

* fix: homepage cards layout

* chore: biome

Author: Diubii

src/app/page.tsx

@@ -1,4 +1,6 @@
+import { FaBookBookmark } from "react-icons/fa6"
 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"
 
@@ -55,6 +57,20 @@ export default function Home() {
             ))}
           </div>
         </section>
+        <section className="flex gap-4">
+          <CardCaption
+            title="Title"
+            caption="Beccatevi questo lorem ipsum dolor sit amet: lorem ipsum dolor sit amet"
+            icon={FaBookBookmark}
+            iconPosition="right"
+          ></CardCaption>
+          <CardCaption
+            title="CardCaption 2"
+            caption="Beccatevi questo lorem ipsum dolor sit amet: lorem ipsum dolor sit amet"
+            icon={FaBookBookmark}
+            iconPosition="top"
+          ></CardCaption>
+        </section>
       </div>
     </main>
   )

src/components/card-caption.tsx

@@ -0,0 +1,28 @@
+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 (
+    <Card>
+      <CardHeader
+        className={`typo-headline-medium flex ${iconPosition === "right" ? "justify-between" : "flex-col-reverse"}`}
+      >
+        <CardTitle>{title}</CardTitle>
+        {icon && <CardAction icon={icon} iconSize={iconPosition === "right" ? "normal" : "large"}></CardAction>}
+      </CardHeader>
+      <CardContent className="typo-body-medium">
+        <p>{caption}</p>
+      </CardContent>
+    </Card>
+  )
+}