add illustrations

Author: pasqualevitiello

apps/ui/app/page.tsx

@@ -91,7 +91,7 @@ function CategoryCard({
 
   return (
     <CardFrame className="after:-inset-[5px] after:-z-1 w-full after:pointer-events-none after:absolute after:rounded-[calc(var(--radius-xl)+4px)] after:border after:border-border/64">
-      <CardFrameHeader className="grid grid-rows-[auto_1fr]">
+      <CardFrameHeader className="static grid grid-rows-[auto_1fr]">
         <CardFrameTitle
           className="font-heading text-base"
           render={

apps/ui/components/category-thumbnails.tsx

@@ -2,6 +2,7 @@ import { cn } from "@coss/ui/lib/utils";
 import type { LucideIcon } from "lucide-react";
 import {
   AlertCircleIcon,
+  CalendarIcon,
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
@@ -314,6 +315,47 @@ export const buttonThumbnail = (
   </Card>
 );
 
+// Calendar
+export const calendarThumbnail = (
+  <Card className="max-w-36 [--radius-2xl:14px]">
+    <CardPanel className="flex flex-col gap-4 p-4">
+      <div className="flex items-center gap-2">
+        <Icon icon={ChevronLeftIcon} />
+        <Text className="w-[60%]" variant="secondary" />
+        <Icon icon={ChevronRightIcon} />
+      </div>
+      <div className="flex items-center gap-2">
+        <Text className="flex-1" variant="secondary" />
+        <Text className="flex-1" variant="secondary" />
+        <Text className="flex-1" variant="main" />
+        <Text className="flex-1 bg-transparent" variant="main" />
+        <Text className="flex-1" variant="main" />
+      </div>
+      <div className="flex items-center gap-2">
+        <Text className="flex-1" variant="main" />
+        <Text className="flex-1 bg-transparent" variant="main" />
+        <Text className="flex-1" variant="main" />
+        <Text className="flex-1" variant="main" />
+        <Text className="flex-1" variant="main" />
+      </div>
+      <div className="flex items-center gap-2">
+        <Text className="flex-1 bg-transparent" variant="main" />
+        <Text className="flex-1" variant="main" />
+        <Text className="flex-1 bg-primary" variant="main" />
+        <Text className="flex-1" variant="main" />
+        <Text className="flex-1 bg-transparent" variant="main" />
+      </div>
+      <div className="flex items-center gap-2">
+        <Text className="flex-1" variant="main" />
+        <Text className="flex-1" variant="main" />
+        <Text className="flex-1 bg-transparent" variant="main" />
+        <Text className="flex-1" variant="secondary" />
+        <Text className="flex-1" variant="secondary" />
+      </div>
+    </CardPanel>
+  </Card>
+);
+
 // Card
 export const cardThumbnail = (
   <Card className="max-w-36 [--radius-2xl:14px]">
@@ -398,6 +440,16 @@ export const commandThumbnail = (
   </Card>
 );
 
+// Date Picker
+export const datePickerThumbnail = (
+  <Card className="[--radius-2xl:14px]" withGradient={false}>
+    <CardPanel className="flex items-center gap-2 p-3">
+      <Icon icon={CalendarIcon} />
+      <Text className="w-[60%]" />
+    </CardPanel>
+  </Card>
+);
+
 // Dialog
 export const dialogThumbnail = (
   <Card className="max-w-36 [--radius-2xl:14px]">
@@ -913,12 +965,14 @@ export const categoryThumbnails: Record<string, ReactNode> = {
   badge: badgeThumbnail,
   breadcrumb: breadcrumbThumbnail,
   button: buttonThumbnail,
+  calendar: calendarThumbnail,
   card: cardThumbnail,
   checkbox: checkboxThumbnail,
   "checkbox-group": checkboxGroupThumbnail,
   collapsible: collapsibleThumbnail,
   combobox: comboboxThumbnail,
   command: commandThumbnail,
+  "date-picker": datePickerThumbnail,
   dialog: dialogThumbnail,
   empty: emptyThumbnail,
   field: fieldThumbnail,