AI and custom roadmap

src/components/Dashboard/DashboardCardLink.tsx

@@ -1,25 +1,27 @@
-import { ArrowUpRight } from 'lucide-react';
+import { ArrowUpRight, type LucideIcon } from 'lucide-react';
 import { cn } from '../../lib/classname';
 
 type DashboardCardLinkProps = {
   href: string;
   title: string;
+  icon: LucideIcon;
   description: string;
   className?: string;
 };
 
 export function DashboardCardLink(props: DashboardCardLinkProps) {
-  const { href, title, description, className } = props;
+  const { href, title, description, icon: Icon, className } = props;
 
   return (
     <a
       className={cn(
-        'relative mt-4 flex min-h-[168px] flex-col justify-end rounded-lg border border-gray-300 bg-gray-100 p-4 hover:bg-gray-200',
+        'relative mt-4 flex min-h-[220px] flex-col justify-end rounded-lg border border-gray-300 bg-gradient-to-br from-white to-gray-50 py-5 px-6 hover:border-gray-400 hover:from-white hover:to-gray-100',
         className,
       )}
       href={href}
       target="_blank"
     >
+      <Icon className="mb-4 size-10 text-gray-300" strokeWidth={1.25} />
       <h4 className="text-xl font-semibold tracking-wide">{title}</h4>
       <p className="mt-1 text-gray-500">{description}</p>
       <ArrowUpRight className="absolute right-3 top-3 size-4" />

src/components/Dashboard/ListDashboardCustomProgress.tsx

@@ -3,6 +3,8 @@ import { DashboardCustomProgressCard } from './DashboardCustomProgressCard';
 import { DashboardCardLink } from './DashboardCardLink';
 import { useState } from 'react';
 import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal';
+import { Simulate } from 'react-dom/test-utils';
+import {Bot, BrainCircuit, Map, PencilRuler} from 'lucide-react';
 
 type ListDashboardCustomProgressProps = {
   progresses: UserProgress[];
@@ -22,24 +24,6 @@ export function ListDashboardCustomProgress(
   const [isCreateCustomRoadmapModalOpen, setIsCreateCustomRoadmapModalOpen] =
     useState(false);
 
-  if (!isLoading && progresses.length === 0) {
-    return isAIGeneratedRoadmaps ? (
-      <DashboardCardLink
-        className="mt-8"
-        href="/ai"
-        title="Generate Roadmaps with AI"
-        description="You can generate your own roadmap with AI"
-      />
-    ) : (
-      <DashboardCardLink
-        className="mt-8"
-        href="https://draw.roadmap.sh"
-        title="Use our Editor to Draw Roadmaps"
-        description="You can make roadmaps that look like ours"
-      />
-    );
-  }
-
   const customRoadmapModal = isCreateCustomRoadmapModalOpen ? (
     <CreateRoadmapModal
       onClose={() => setIsCreateCustomRoadmapModalOpen(false)}
@@ -52,24 +36,44 @@ export function ListDashboardCustomProgress(
     />
   ) : null;
 
-  const Slot = isAIGeneratedRoadmaps ? 'a' : 'button';
-
   return (
     <>
       {customRoadmapModal}
 
-      <h2 className="mb-3 mt-8 text-xs uppercase text-gray-400">
+      <h2 className="mb-2 mt-6 text-xs uppercase text-gray-400">
         {isAIGeneratedRoadmaps ? 'AI Generated Roadmaps' : 'Custom Roadmaps'}
       </h2>
 
+      {!isLoading && progresses.length === 0 && isAIGeneratedRoadmaps && (
+        <DashboardCardLink
+          className="mt-0"
+          icon={BrainCircuit}
+          href="/ai"
+          title="Generate Roadmaps with AI"
+          description="You can generate your own roadmap with AI"
+        />
+      )}
+
+      {!isLoading && progresses.length === 0 && !isAIGeneratedRoadmaps && (
+        <DashboardCardLink
+          className="mt-0"
+          icon={PencilRuler}
+          href="https://draw.roadmap.sh"
+          title="Draw your own Roadmap"
+          description="Use our editor to draw your own roadmap"
+        />
+      )}
+
       <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-4">
-        {isLoading ? (
+        {isLoading && (
           <>
             {Array.from({ length: 8 }).map((_, index) => (
               <CustomProgressCardSkeleton key={index} />
             ))}
           </>
-        ) : (
+        )}
+
+        {!isLoading && progresses.length > 0 && (
           <>
             {progresses.map((progress) => (
               <DashboardCustomProgressCard
@@ -78,18 +82,18 @@ export function ListDashboardCustomProgress(
               />
             ))}
 
-            <Slot
+            <a
               className="flex min-h-[80px] items-center justify-center rounded-lg border border-dashed border-gray-300 bg-white p-4 text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-600"
-              {...(isAIGeneratedRoadmaps
-                ? { href: '/ai' }
-                : {
-                    onClick: () => {
-                      setIsCreateCustomRoadmapModalOpen(true);
-                    },
-                  })}
+              href={'/ai'}
+              onClick={(e) => {
+                if (!isAIGeneratedRoadmaps) {
+                  e.preventDefault();
+                  setIsCreateCustomRoadmapModalOpen(true);
+                }
+              }}
             >
               {isAIGeneratedRoadmaps ? '+ Generate New' : '+ Create New'}
-            </Slot>
+            </a>
           </>
         )}
       </div>

src/components/Dashboard/PersonalDashboard.tsx

@@ -275,6 +275,7 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
         progresses={customRoadmapsToShow}
         isLoading={isLoading}
       />
+
       <ListDashboardCustomProgress
         progresses={aiGeneratedRoadmaps}
         isLoading={isLoading}