feat: add card-course

src/app/page.tsx

@@ -1,6 +1,7 @@
 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 { CardCourse } from "@/components/card-course"
 import { CardIcon } from "@/components/card-icon"
 import { CardPathSelection } from "@/components/card-path-selection"
 import { Hero } from "@/components/home/hero"
@@ -58,6 +59,12 @@ export default function Home() {
             ))}
           </div>
         </section>
+        <section>
+          <CardCourse courseName="Ingegneria Informatica" />
+          <CardCourse courseName="Ingegneria Elettrica" />
+          <CardCourse courseName="Ingegneria Gestionale" />
+          <CardCourse courseName="Ingegneria Chimica" />
+        </section>
         <section className="flex flex-row gap-6">
           <CardPathSelection caption="Triennale (o Ciclo Unico)"></CardPathSelection>
           <CardPathSelection caption="Magistrale"></CardPathSelection>

src/components/card-course.tsx

@@ -0,0 +1,36 @@
+import type { IconType } from "react-icons"
+import { CiGlobe } from "react-icons/ci"
+import { FaAngleRight } from "react-icons/fa6"
+import { IoLocationOutline } from "react-icons/io5"
+import { Card, CardAction, CardContent } from "./ui/card"
+
+export function CardCourse({
+  courseName,
+  iconLocation: IconLocation = IoLocationOutline,
+  location = "Milano Leonardo",
+  iconLanguage: IconLanguage = CiGlobe,
+  language = "ITA",
+  iconSelect: IconSelect = FaAngleRight,
+}: {
+  courseName: string
+  iconLocation?: IconType
+  location?: "Milano Leonardo" | "Milano Bovisa" | "Cremona" | "Lecco" | "Mantova" | "Piacenza" | "Xi'an" //Magari poi si mette solo string come tipo nel caso si pullino da un DB
+  iconLanguage?: IconType
+  language?: "ITA" | "ENG" //Idem
+  iconSelect?: IconType
+}) {
+  return (
+    <Card className="typo-body-large flex h-fit w-full flex-row px-5 py-3.75 font-normal leading-6 tracking-[0.03125rem]">
+      <CardContent className="basis-1/3 truncate">{courseName}</CardContent>
+      <CardContent className="flex basis-1/3 items-center gap-1.25">
+        <CardAction icon={IconLocation} iconSize="small" /> {location}
+      </CardContent>
+      <CardContent className="flex basis-1/3 items-center gap-1.25">
+        <CardAction icon={IconLanguage} iconSize="small" /> {language}
+      </CardContent>
+      <CardContent className="flex items-center">
+        <CardAction icon={IconSelect} iconSize="small" />
+      </CardContent>
+    </Card>
+  )
+}