feat: icon primitive & recent modules collapsing

next.config.js

@@ -9,7 +9,7 @@ jiti('./src/env');
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  transpilePackages: ['next-mdx-remote'],
+  transpilePackages: ['next-mdx-remote', 'lucide-react'],
 
   // We run ESLint and TypeScript separately in the CI pipeline
   eslint: {

src/app/(dashboard)/app/_components/module-card.tsx

@@ -1,43 +1,43 @@
 import { convertHexToRGBA } from '@/lib/colors';
+import { Icon, type IconNames } from '@/primitives/icon';
 import Link from 'next/link';
-import { type FC } from 'react';
 import colors, { zinc } from 'tailwindcss/colors';
 
 interface ModuleCardProps {
   color: string;
   id: string;
   name: string;
-  icon: string;
+  icon: IconNames;
   credits: number;
 }
 
-export const ModuleCard: FC<ModuleCardProps> = ({
+export function ModuleCard({
   id,
   color,
   name,
   icon,
   credits,
-}) => {
+}: ModuleCardProps) {
   const moduleColor =
     color === 'default' ? zinc : colors[color as keyof typeof colors];
 
   return (
-    <li className="shrink-0 basis-full lg:basis-[240px]">
+    <li className="shrink-0 basis-full lg:basis-[250px]">
       <Link
         href={`/app/module/${id}`}
         className="flex w-full flex-col gap-2 rounded-xl p-6"
         style={{
           background: `linear-gradient(135deg, ${convertHexToRGBA(
             moduleColor['500'],
-            0.075,
+            0.08,
           )} 0%, ${convertHexToRGBA(moduleColor['700'], 0.05)} 100%)`,
           border: `1px solid ${convertHexToRGBA(moduleColor['500'], 0.1)}`,
         }}
       >
-        {icon}
-        <h3 className="mt-2 font-medium">{name}</h3>
+        <Icon name={icon} strokeWidth={2} size={20} />
+        <h3 className="mt-2 text-lg font-medium">{name}</h3>
         <p className="text-xs text-gray-foreground-muted">{credits} Credits</p>
       </Link>
     </li>
   );
-};
+}

src/app/(dashboard)/app/_components/recent-modules.tsx

@@ -16,56 +16,23 @@ export function RecentModules() {
           variant="outline"
           size="sm"
           className="text-xs"
+          aria-expanded={isExpanded}
+          aria-controls="recent-modules-list"
           onClick={() => {
             setIsExpanded((prev) => !prev);
           }}
         >
           {isExpanded ? 'Hide' : 'Show'}
         </Button>
       </div>
-      <AnimateHeight height={isExpanded ? 'auto' : 0}>
+      <AnimateHeight id="recent-modules-list" height={isExpanded ? 'auto' : 0}>
         <ScrollArea>
           <ul className="mb-2 mt-4 flex gap-4">
             <ModuleCard
               id="123"
               color="default"
               credits={15}
-              icon="🔒"
-              name="Information Security"
-            />
-            <ModuleCard
-              id="123"
-              color="default"
-              credits={15}
-              icon="🔒"
-              name="Information Security"
-            />
-            <ModuleCard
-              id="123"
-              color="default"
-              credits={15}
-              icon="🔒"
-              name="Information Security"
-            />
-            <ModuleCard
-              id="123"
-              color="default"
-              credits={15}
-              icon="🔒"
-              name="Information Security"
-            />
-            <ModuleCard
-              id="123"
-              color="default"
-              credits={15}
-              icon="🔒"
-              name="Information Security"
-            />
-            <ModuleCard
-              id="123"
-              color="default"
-              credits={15}
-              icon="🔒"
+              icon="Airplay"
               name="Information Security"
             />
           </ul>

src/primitives/icon.tsx

@@ -0,0 +1,20 @@
+import { icons } from 'lucide-react';
+
+interface Props {
+  name: keyof typeof icons;
+  color?: string;
+  size?: number;
+  strokeWidth?: number;
+}
+
+export const Icon: React.FC<Props> = ({ name, color, size, strokeWidth }) => {
+  // eslint-disable-next-line security/detect-object-injection
+  const LucideIcon = icons[name];
+
+  return (
+    <LucideIcon strokeWidth={strokeWidth} color={color} size={size ?? 24} />
+  );
+};
+
+export type IconNames = keyof typeof icons;
+export const iconNames = Object.keys(icons) as IconNames[];