fix: dark mode and improve cards

Author: thedaviddias

app/_components/footer.tsx

@@ -7,31 +7,26 @@ import { getDictionary } from '../_dictionaries/get-dictionary';
 import { LinkCustom } from './link-custom';
 import { SOCIAL_LINKS } from './social';
 
-const FooterMenuLinks = ({ lang }: { lang: string }) => {
-  return (
-    <div>
-      <h3 className="small-title">General</h3>
-      <ul className="mt-3 space-y-1">
-        {FOOTER_MENU_LINKS(lang).map(({ path, label }) => (
-          <li key={label}>
-            <LinkCustom href={path} className="dark:!text-white">
-              {label}
-            </LinkCustom>
-          </li>
-        ))}
-      </ul>
-    </div>
-  )
+type FooterLinksProps = {
+  title: string;
+  links: Array<{
+    label: string;
+    path?: string;
+    shortlink?: string;
+  }>;
 }
 
-const FooterSocialLinks = () => {
+const FooterLinks = ({ title, links }: FooterLinksProps) => {
   return (
     <div>
-      <h3 className="small-title">Social</h3>
+      <h3 className="small-title">{title}</h3>
       <ul className="mt-3 space-y-1">
-        {SOCIAL_LINKS.map(({ label, shortlink }) => (
+        {links.map(({ label, path, shortlink }) => (
           <li key={label}>
-            <LinkCustom href={shortlink} className="dark:!text-white">
+            <LinkCustom
+              href={path || shortlink || '#'}
+              className="text-gray-500 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white transition-colors text-sm"
+            >
               {label}
             </LinkCustom>
           </li>
@@ -41,6 +36,20 @@ const FooterSocialLinks = () => {
   )
 }
 
+const FooterMenuLinks = ({ lang }: { lang: string }) => (
+  <FooterLinks
+    title="General"
+    links={FOOTER_MENU_LINKS(lang)}
+  />
+)
+
+const FooterSocialLinks = () => (
+  <FooterLinks
+    title="Social"
+    links={SOCIAL_LINKS}
+  />
+)
+
 export const Footer = async ({ lang }: { lang: string }) => {
   const dictionary = await getDictionary(lang)
 
@@ -55,7 +64,7 @@ export const Footer = async ({ lang }: { lang: string }) => {
         </h2>
         <div className="mx-auto max-w-5xl px-2 py-12 sm:px-6 lg:px-8 lg:py-7">
           <div className="flex flex-col-reverse sm:flex-row print:hidden">
-            <div className="w-full flex-grow text-left sm:mb-0 sm:w-1/2 md:pr-24 lg:w-[40%]">
+            <div className="w-full flex-grow text-left sm:mb-0 sm:w-1/2 md:pr-24 lg:w-[20%]">
               <span className="mb-5 block text-xl font-bold">{dictionary.name}</span>
               <p
                 className="text-sm text-gray-500 dark:text-gray-400">
@@ -64,17 +73,17 @@ export const Footer = async ({ lang }: { lang: string }) => {
               <div className="flex space-x-6"></div>
             </div>
 
-            <div className="flex w-full !max-w-full flex-shrink-0 flex-grow justify-between text-gray-500 sm:w-1/2 lg:w-[40%] dark:text-gray-400">
+            <div className="flex w-full !max-w-full flex-shrink-0 flex-grow justify-between text-gray-500 sm:w-1/2 lg:w-[30%] dark:text-gray-400">
               <FooterMenuLinks lang={lang} />
               <FooterSocialLinks />
             </div>
           </div>
-          <div className="mt-8 flex items-start flex-col border-t border-gray-200 pt-3 dark:border-gray-400">
+          <div className="mt-8 flex items-center flex-col border-t border-gray-200 pt-3 dark:border-gray-400 text-sm">
             <p className="text-gray-500">
               &copy; {new Date().getFullYear()} UX Patterns for Devs
             </p>
             <p className="text-gray-500">
-              Made with ❤️ by <a href="https://thedaviddias.com" target="_blank" rel="noopener noreferrer" className="font-bold underline">David Dias</a> for the Open-Source Community.
+              Made with ❤️ by <a href="https://ddias.link/blog" target="_blank" rel="noopener noreferrer" className="font-bold underline">David Dias</a> for the Open-Source Community.
             </p>
           </div>
         </div>

app/_components/sections/overview-grid.tsx

@@ -1,6 +1,6 @@
-
+import { cn } from '@/app/_utils/cn'
 import { getPatterns } from '@app/_utils/get-patterns'
-import Link from 'next/link'
+import { LinkCustom } from '../link-custom'
 import { Badge } from '../ui/badge'
 
 type Pattern = {
@@ -22,21 +22,7 @@ export const OverviewGrid = async ({ lang }: { lang: string }) => {
           </h2>
           <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
             {category.patterns.map((pattern) => (
-              <div
-                key={pattern.title}
-                className={`group relative rounded-xl border border-neutral-200 dark:border-neutral-800 ${!pattern.comingSoon
-                  ? 'hover:scale-105 transition-transform ease-in-out duration-100'
-                  : 'opacity-75'
-                  }`}
-              >
-                {pattern.href ? (
-                  <Link href={pattern.href}>
-                    <PatternContent pattern={pattern} />
-                  </Link>
-                ) : (
-                  <PatternContent pattern={pattern} />
-                )}
-              </div>
+              <PatternWrapper key={pattern.title} pattern={pattern} />
             ))}
           </div>
         </div>
@@ -45,8 +31,34 @@ 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"
+  )
+
+  const content = <PatternContent pattern={pattern} />
+
+  return (
+    <div className={wrapperClasses}>
+      {pattern.href ? (
+        <LinkCustom
+          href={pattern.href}
+          className="!no-underline"
+          icon={false}
+        >
+          {content}
+        </LinkCustom>
+      ) : content}
+    </div>
+  )
+}
+
 const PatternContent = ({ pattern }: { pattern: Pattern }) => (
-  <div className="relative overflow-hidden rounded-xl p-5">
+  <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"
+  )}>
     <div className="flex items-center justify-between">
       <h3 className="font-display text-xl font-semibold text-foreground">
         {pattern.title}

app/_components/social.tsx

@@ -47,32 +47,26 @@ export const SOCIAL_LINKS: SocialLink[] = [
     ),
   },
   {
-    label: 'Github',
-    link: 'https://github.com/thedaviddias',
-    shortlink: 'https://ddias.link/github',
-    rel: 'me',
+    label: 'Discord',
+    link: 'https://discord.gg/EG6tmxsESP',
+    shortlink: 'https://ddias.link/discord',
     icon: (
       <SimpleIconComponent
-        icon={siGithub}
+        icon={siDiscord}
         className="w-10 h-10 p-1.5 border rounded-full transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800 border-gray-200 dark:border-gray-700"
       />
     ),
   },
   {
-    label: 'Join my Discord',
-    link: 'https://discord.gg/EG6tmxsESP',
-    shortlink: 'https://ddias.link/discord',
+    label: 'Github',
+    link: 'https://github.com/thedaviddias',
+    shortlink: 'https://ddias.link/github',
+    rel: 'me',
     icon: (
       <SimpleIconComponent
-        icon={siDiscord}
+        icon={siGithub}
         className="w-10 h-10 p-1.5 border rounded-full transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800 border-gray-200 dark:border-gray-700"
       />
     ),
   },
-  {
-    label: 'Newsletter',
-    link: 'https://thedaviddias.substack.com',
-    shortlink: 'https://ddias.link/newsletter',
-    rel: 'me',
-  },
 ]

app/_constants/patterns.ts

@@ -1,3 +1,8 @@
+import { contentManagementPatterns } from './patterns/content-management'
+import { formPatterns } from './patterns/forms'
+import { navigationPatterns } from './patterns/navigation'
+import { userFeedbackPatterns } from './patterns/user-feedback'
+
 export const PATTERNS_MAP = {
   navigation: {
     name: 'Layout & Navigation',
@@ -17,147 +22,16 @@ export const PATTERNS_MAP = {
   }
 } as const
 
+
+
 export const PATTERNS = {
-  'Layout & Navigation': [
-    {
-      title: 'Breadcrumb',
-      description: 'Help users understand their current location',
-      href: '/docs/navigation/breadcrumb'
-    },
-    {
-      title: 'Pagination',
-      description: 'Navigate through multiple pages of content',
-    },
-    {
-      title: 'Navigation Menu',
-      description: 'Organize and structure site navigation',
-    }
-  ],
-  'Content Management': [
-    {
-      title: 'Accordion',
-      description: 'Expand and collapse content sections',
-    },
-    {
-      title: 'Carousel',
-      description: 'Display multiple items in a rotating view',
-    },
-    {
-      title: 'Drag and Drop',
-      description: 'Allow users to reorder items intuitively',
-    },
-    {
-      title: 'Modal',
-      description: 'Display focused content or actions',
-    },
-    {
-      title: 'Tooltip',
-      description: 'Provide additional context on hover',
-    }
-  ],
-  'User Feedback': [
-    {
-      title: 'Empty States',
-      description: 'Guide users when no content is available',
-    },
-    {
-      title: 'Loading Indicator',
-      description: 'Show users that content is being loaded',
-    },
-    {
-      title: 'Notification',
-      description: 'Inform users about important updates',
-    },
-    {
-      title: 'Progress Indicator',
-      description: 'Show completion status of an operation',
-    }
-  ],
-  'Input & Forms': [
-    {
-      title: 'Button',
-      description: 'Trigger actions and submit forms',
-      href: '/docs/forms/button'
-    },
-    {
-      title: 'Checkbox',
-      description: 'Allow users to select multiple options',
-    },
-    {
-      title: 'Code Confirmation',
-      description: 'Verify codes with segmented input',
-    },
-    {
-      title: 'Color Picker',
-      description: 'Select colors with visual feedback',
-    },
-    {
-      title: 'Currency Input',
-      description: 'Enter and format monetary values',
-    },
-    {
-      title: 'Date Input',
-      description: 'Enter dates in a structured format',
-    },
-    {
-      title: 'Date Picker',
-      description: 'Select dates from a calendar interface',
-    },
-    {
-      title: 'Date Range',
-      description: 'Select a range between two dates',
-    },
-    {
-      title: 'File Input',
-      description: 'Upload and handle files',
-    },
-    {
-      title: 'Form Validation',
-      description: 'Validate and provide feedback',
-    },
-    {
-      title: 'Multi-select Input',
-      description: 'Choose multiple items from a list',
-    },
-    {
-      title: 'Password',
-      description: 'Secure password entry with feedback',
-    },
-    {
-      title: 'Phone Number',
-      description: 'Format and validate phone numbers',
-    },
-    {
-      title: 'Radio',
-      description: 'Select a single option from a group',
-    },
-    {
-      title: 'Search Field',
-      description: 'Search through content efficiently',
-    },
-    {
-      title: 'Selection Input',
-      description: 'Choose from predefined options',
-    },
-    {
-      title: 'Slider',
-      description: 'Select values from a range',
-    },
-    {
-      title: 'Text Field',
-      description: 'Enter and edit text content',
-    },
-    {
-      title: 'Time Input',
-      description: 'Enter time in a structured format',
-    },
-    {
-      title: 'Toggle',
-      description: 'Switch between two states',
-    }
-  ]
+  'Layout & Navigation': navigationPatterns,
+  'Content Management': contentManagementPatterns,
+  'User Feedback': userFeedbackPatterns,
+  'Input & Forms': formPatterns
 } as const
 
+
 export type Pattern = {
   title: string
   description: string

app/_constants/patterns/content-management.ts

@@ -0,0 +1,22 @@
+export const contentManagementPatterns = [
+  {
+    title: 'Accordion',
+    description: 'Expand and collapse content sections',
+  },
+  {
+    title: 'Carousel',
+    description: 'Display multiple items in a rotating view',
+  },
+  {
+    title: 'Drag and Drop',
+    description: 'Allow users to reorder items intuitively',
+  },
+  {
+    title: 'Modal',
+    description: 'Display focused content or actions',
+  },
+  {
+    title: 'Tooltip',
+    description: 'Provide additional context on hover',
+  }
+] as const