diff --git a/src/components/card-caption.tsx b/src/components/card-caption.tsx new file mode 100644 index 0000000..0fbc179 --- /dev/null +++ b/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 ( + + + {title} + {icon && } + + +

{caption}

+ + + ) +} diff --git a/src/components/card-course-group.tsx b/src/components/card-course-group.tsx new file mode 100644 index 0000000..2dba99a --- /dev/null +++ b/src/components/card-course-group.tsx @@ -0,0 +1,47 @@ +import { cva, type VariantProps } from "class-variance-authority" +import type { IconType } from "react-icons" +import { FaWhatsapp } from "react-icons/fa" +import { LiaTelegramPlane } from "react-icons/lia" +import { cn } from "@/lib/utils" +import { Card, CardAction, CardTitle } from "./ui/card" + +export const cardCourseGroupVariants = cva( + "flex h-fit w-full flex-row items-center gap-5 px-7.5 py-6.25 font-normal leading-6 tracking-[0.03125rem]", + { + variants: { + secondary: { + true: "bg-[rgba(148,192,237,0.40)]", + false: "", + }, + }, + defaultVariants: { + secondary: false, + }, + } +) + +export function CardCourseGroup({ + groupName, + hasWhatsapp = true, + iconWhatsApp: IconWhatsApp = FaWhatsapp, + hasTelegram = true, + iconTelegram: IconTelegram = LiaTelegramPlane, + secondary = false, +}: { + groupName: string + hasWhatsapp?: boolean + iconWhatsApp?: IconType + hasTelegram?: boolean + iconTelegram?: IconType +} & VariantProps) { + const actionClassName = cn("rounded-full p-3.75", secondary ? "bg-[#51A2FF]" : "bg-[#74D4FF]") + return ( + + + {groupName} + + {hasWhatsapp && } + {hasTelegram && } + + ) +} diff --git a/src/components/card-course.tsx b/src/components/card-course.tsx new file mode 100644 index 0000000..52c1fd8 --- /dev/null +++ b/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 ( + + {courseName} + + {location} + + + {language} + + + + + + ) +} diff --git a/src/components/card-path-selection.tsx b/src/components/card-path-selection.tsx new file mode 100644 index 0000000..c603fa5 --- /dev/null +++ b/src/components/card-path-selection.tsx @@ -0,0 +1,14 @@ +import type { IconType } from "react-icons" +import { BsBook } from "react-icons/bs" +import { Card, CardAction, CardContent } from "./ui/card" + +export function CardPathSelection({ caption, icon: Icon = BsBook }: { caption: string; icon?: IconType }) { + return ( + + + {caption} + + + //TODO: add hover effect + ) +} diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx new file mode 100644 index 0000000..33a30e8 --- /dev/null +++ b/src/components/ui/card.tsx @@ -0,0 +1,103 @@ +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", + className + )} + {...props} + /> + ) +} + +function CardHeader({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardTitle({ gradient = true, className, ...props }: React.ComponentProps<"div"> & { gradient?: boolean }) { + return ( +
+ ) +} + +function CardDescription({ className, ...props }: React.ComponentProps<"div">) { + return
+} + +function CardAction({ + className, + icon: Icon, + iconSize = "normal", + gradient = true, + ...props +}: React.ComponentProps<"div"> & { icon: IconType; iconSize?: "small" | "normal" | "large"; gradient?: boolean }) { + const gradientId = React.useId() + + return ( +
+ {gradient && ( + + )} + + +
+ ) +} + +function CardContent({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardBottomButton({ className, ...props }: React.ComponentProps) { + return