feat: add icons to cards and improve UI

Author: thedaviddias

app/_components/sections/overview-grid.tsx

@@ -1,11 +1,13 @@
 import { cn } from '@/app/_utils/cn'
 import { getPatterns } from '@app/_utils/get-patterns'
+import { type LucideIcon } from 'lucide-react'
 import { LinkCustom } from '../link-custom'
 import { Badge } from '../ui/badge'
 
 type Pattern = {
   title: string
   description: string
+  icon?: LucideIcon;
   href?: string
   comingSoon?: boolean
 }
@@ -34,7 +36,7 @@ export const OverviewGrid = async ({ lang }: { lang: string }) => {
 const PatternWrapper = ({ pattern }: { pattern: Pattern }) => {
   const wrapperClasses = cn(
     "relative rounded-xl border border-neutral-200 dark:border-neutral-800",
-    !pattern.comingSoon && "hover:border-neutral-400 dark:hover:border-neutral-600 hover:scale-105 transition-all duration-100 ease-in-out"
+    !pattern.comingSoon && "border-neutral-400 dark:border-neutral-600 hover:bg-neutral-100 hover:border-neutral-200 dark:hover:bg-neutral-900 dark:hover:border-neutral-400 hover:scale-105 transition-all duration-100 ease-in-out"
   )
 
   const content = <PatternContent pattern={pattern} />
@@ -56,21 +58,27 @@ const PatternWrapper = ({ pattern }: { pattern: Pattern }) => {
 
 const PatternContent = ({ pattern }: { pattern: Pattern }) => (
   <div className={cn(
-    "relative overflow-hidden rounded-xl p-5 transition-all duration-300",
-    !pattern.comingSoon ? "hover:animate-card-hover cursor-pointer" : "opacity-75 cursor-not-allowed"
+    "relative flex flex-col gap-4 overflow-hidden rounded-xl p-5 transition-all duration-300",
+    !pattern.comingSoon ? "hover:animate-card-hover cursor-pointer" : "opacity-60 cursor-not-allowed"
   )}>
+
     <div className="flex items-center justify-between">
-      <h3 className="font-display text-xl font-semibold text-foreground">
-        {pattern.title}
-      </h3>
+      {pattern.icon && <pattern.icon className="h-8 w-8 text-primary" />}
+      {pattern.comingSoon && (
+        <Badge variant="outline">
+          Coming soon
+        </Badge>
+      )}
+    </div>
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center justify-between">
+        <h3 className="font-display text-xl font-semibold text-foreground">
+          {pattern.title}
+        </h3>
+      </div>
+      <p className="mb-3 text-sm text-foreground leading-6!">
+        {pattern.description}
+      </p>
     </div>
-    <p className="mt-2 mb-3 text-sm text-foreground leading-6!">
-      {pattern.description}
-    </p>
-    {pattern.comingSoon && (
-      <Badge variant="outline">
-        Coming soon
-      </Badge>
-    )}
   </div>
 )

app/_components/stars.tsx

@@ -17,7 +17,7 @@ export function Stars() {
   }, [])
 
   if (stars === null) return <div className="flex items-center justify-center gap-2">
-    <span className="inline-flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 text-sm font-medium text-gray-900 dark:text-gray-100 rounded-lg border border-gray-200 dark:border-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-200 dark:focus:ring-gray-700">Loading...</span>
+    <span className="inline-flex items-center gap-2 px-4 py-2 bg-white dark:bg-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-700 text-sm font-medium text-neutral-900 dark:text-neutral-100 rounded-lg border border-neutral-200 dark:border-neutral-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-200 dark:focus:ring-neutral-700">Loading...</span>
   </div>
 
   return (
@@ -26,11 +26,11 @@ export function Stars() {
         href={PROJECT_URL}
         target="_blank"
         rel="noopener noreferrer"
-        className="plausible-event-name=Star+Github inline-flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 text-sm font-medium text-gray-900 dark:text-gray-100 rounded-lg border border-gray-200 dark:border-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-200 dark:focus:ring-gray-700"
+        className="plausible-event-name=Star+Github inline-flex items-center gap-2 px-4 py-2 bg-white dark:bg-neutral-900 hover:bg-neutral-50 dark:hover:bg-neutral-700 text-sm font-medium text-neutral-900 dark:text-neutral-100 rounded-lg border border-neutral-400 dark:border-neutral-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-200 dark:focus:ring-neutral-700"
       >
         <GitHubIcon className="w-4 h-4" />
         <span className="hidden lg:inline">Star on GitHub</span>
-        <span className="inline-flex items-center px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100">
+        <span className="inline-flex items-center px-2 py-0.5 rounded bg-neutral-100 dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100">
           <StarIcon className="w-4 h-4 mr-1" />
           {stars}
         </span>

app/_components/subscribe.tsx

@@ -61,7 +61,7 @@ export const SubscribeForm = () => {
   };
 
   return (
-    <div className="flex flex-col mt-10 items-center justify-center py-10 px-4 text-center border border-neutral-200 dark:border-neutral-800 rounded-xl">
+    <div className="flex flex-col mt-10 items-center justify-center py-10 px-4 text-center border border-neutral-400 dark:border-neutral-800 rounded-xl">
       <h2 className="text-2xl font-bold mb-5 text-foreground">
         Get notified when new patterns are added!
       </h2>

app/_components/suggest-pattern.tsx

@@ -3,7 +3,7 @@ import { Button } from './ui/button'
 
 export function SuggestPattern() {
   return (
-    <div className="flex flex-col mt-10 items-center justify-center py-10 px-4 text-center border border-neutral-200 dark:border-neutral-800 rounded-xl">
+    <div className="flex flex-col mt-10 items-center justify-center py-10 px-4 text-center border border-neutral-400 dark:border-neutral-800 rounded-xl">
       <h2 className="text-2xl font-bold mb-5 text-foreground">Got a pattern request?</h2>
       <p className="text-lg text-muted-foreground mb-6">
         Let us know, and we&apos;ll add it!

app/_constants/patterns/content-management.ts

@@ -1,22 +1,29 @@
+import { ChevronDown, Grab, MessageCircle, RotateCw, Square } from "lucide-react";
+
 export const contentManagementPatterns = [
   {
     title: 'Accordion',
     description: 'Expand and collapse content sections',
+    icon: ChevronDown
   },
   {
     title: 'Carousel',
     description: 'Display multiple items in a rotating view',
+    icon: RotateCw
   },
   {
     title: 'Drag and Drop',
     description: 'Allow users to reorder items intuitively',
+    icon: Grab
   },
   {
     title: 'Modal',
     description: 'Display focused content or actions',
+    icon: Square
   },
   {
     title: 'Tooltip',
     description: 'Provide additional context on hover',
+    icon: MessageCircle
   }
-] as const
+] as const;

app/_constants/patterns/forms.ts

@@ -1,99 +1,150 @@
+import {
+  Calendar,
+  CalendarDays,
+  CalendarRange,
+  CheckSquare,
+  CircleDot,
+  Clock,
+  DollarSign,
+  FileUp,
+  KeyRound,
+  List,
+  ListFilter,
+  Lock,
+  MousePointerClick,
+  Palette,
+  Pen,
+  PenTool,
+  Phone,
+  Search,
+  ShieldCheck,
+  Sliders,
+  Star,
+  Tags,
+  Text,
+  ToggleLeft,
+} from "lucide-react";
+
 export const formPatterns = [
   {
     title: 'Button',
     description: 'Trigger actions and submit forms',
-    href: '/docs/forms/button'
+    href: '/docs/forms/button',
+    icon: MousePointerClick
   },
   {
     title: 'Checkbox',
     description: 'Allow users to select multiple options',
+    icon: CheckSquare
   },
   {
     title: 'Code Confirmation',
     description: 'Verify codes with segmented input',
+    icon: KeyRound
   },
   {
     title: 'Color Picker',
     description: 'Select colors with visual feedback',
+    icon: Palette
   },
   {
     title: 'Currency Input',
     description: 'Enter and format monetary values',
+    icon: DollarSign
   },
   {
     title: 'Date Input',
     description: 'Enter dates in a structured format',
+    icon: Calendar
   },
   {
     title: 'Date Picker',
     description: 'Select dates from a calendar interface',
+    icon: CalendarDays
   },
   {
     title: 'Date Range',
     description: 'Select a range between two dates',
+    icon: CalendarRange
   },
   {
     title: 'File Input',
     description: 'Upload and handle files',
+    icon: FileUp
   },
   {
     title: 'Form Validation',
     description: 'Validate and provide feedback',
+    icon: ShieldCheck
   },
   {
     title: 'Multi-select Input',
     description: 'Choose multiple items from a list',
+    icon: List
   },
   {
     title: 'Password',
     description: 'Secure password entry with feedback',
+    icon: Lock
   },
   {
     title: 'Phone Number',
     description: 'Format and validate phone numbers',
+    icon: Phone
   },
   {
     title: 'Radio',
     description: 'Select a single option from a group',
+    icon: CircleDot
   },
   {
     title: 'Search Field',
     description: 'Search through content efficiently',
+    icon: Search
   },
   {
     title: 'Selection Input',
     description: 'Choose from predefined options',
+    icon: ListFilter
   },
   {
     title: 'Slider',
     description: 'Select values from a range',
+    icon: Sliders
   },
   {
     title: 'Text Field',
     description: 'Enter and edit text content',
+    icon: Text
   },
   {
     title: 'Time Input',
     description: 'Enter time in a structured format',
+    icon: Clock
   },
   {
     title: 'Toggle',
     description: 'Switch between two states',
+    icon: ToggleLeft
   },
   {
     title: 'Rich Text Editor',
     description: 'Edit and format text content',
+    icon: PenTool
   },
   {
     title: 'Tag Input',
     description: 'Enter and format tags',
+    icon: Tags
   },
   {
     title: 'Rating Input',
     description: 'Rate something with a number of stars',
+    icon: Star
   },
   {
     title: 'Signature Pad',
     description: 'Allow users to sign their name',
+    icon: Pen
   },
-] as const
+] as const;

app/_constants/patterns/navigation.ts

@@ -1,35 +1,45 @@
+import { ArrowUp, Grid3X3, Layout, LayoutDashboard, Menu, Navigation2, SidebarIcon } from "lucide-react";
+
 export const navigationPatterns = [
   {
     title: 'Breadcrumb',
     description: 'Help users understand their current location',
-    href: '/docs/navigation/breadcrumb'
+    href: '/docs/navigation/breadcrumb',
+    icon: Navigation2,
   },
   {
     title: 'Back to Top',
     description: 'Quickly navigate back to the top of the page',
+    icon: ArrowUp,
   },
   {
     title: 'Hamburger Menu',
     description: 'Display a menu icon for mobile devices',
+    icon: Menu,
   },
   {
     title: 'Megamenu',
     description: 'Display a large number of links in a single menu',
+    icon: Grid3X3,
   },
   {
     title: 'Navigation Menu',
     description: 'Organize and structure site navigation',
+    icon: LayoutDashboard,
   },
   {
     title: 'Pagination',
     description: 'Navigate through multiple pages of content',
+    icon: Navigation2,
   },
   {
     title: 'Sidebar',
     description: 'Organize and structure site navigation',
+    icon: SidebarIcon,
   },
   {
     title: 'Tabs',
     description: 'Switch between different views',
+    icon: Layout,
   }
 ] as const

app/_constants/patterns/user-feedback.ts

@@ -1,26 +1,34 @@
+import { AlertCircle, Bell, Cookie, Loader, LoaderCircle, Loader as ProgressLoader } from "lucide-react";
+
 export const userFeedbackPatterns = [
   {
     title: 'Empty States',
     description: 'Guide users when no content is available',
+    icon: AlertCircle
   },
   {
     title: 'Loading Indicator',
     description: 'Show users that content is being loaded',
+    icon: Loader
   },
   {
     title: 'Notification',
     description: 'Inform users about important updates',
+    icon: Bell
   },
   {
     title: 'Progress Indicator',
     description: 'Show completion status of an operation',
+    icon: ProgressLoader
   },
   {
     title: 'Skeleton',
     description: 'Show users that content is being loaded',
+    icon: LoaderCircle
   },
   {
     title: 'Cookie Consent',
     description: 'Inform users about the use of cookies',
+    icon: Cookie
   }
-] as const
+] as const;