start project cards

app/globals.css

@@ -86,3 +86,15 @@
 .gradient-button-bg > div:hover {
   background: radial-gradient(circle at bottom, #312e81 0%, hsl(0 0% 3.9%) 130%); /* violet 900 -> bg */
 }
+
+.gradient-project-card-bg {
+  background: radial-gradient(circle at bottom right, #a5b4fc -15%, #3730a3 25%, hsl(0 0% 3.9%) 50%); /* violet 300 -> 800 */
+}
+
+.gradient-project-card {
+  background: radial-gradient(circle at bottom right, #312e81 -50%, hsl(0 0% 3.9%) 50%); /* violet 900 -> bg */
+}
+
+.gradient-project-card-bg > div:hover {
+  background: radial-gradient(circle at bottom right, #312e81 -50%, hsl(0 0% 3.9%) 60%); /* violet 900 -> bg */
+}

components/dashboard/index.tsx

@@ -4,9 +4,11 @@ import CustomButton from "@/components/ui/customButton"
 import { Button } from "@/components/ui/button"
 import {
   Bolt,
+  Clock,
   Code2,
   FolderDot,
   FolderOpenDot,
+  Globe,
   HelpCircle,
   Plus,
   Settings,
@@ -14,6 +16,8 @@ import {
   Users,
 } from "lucide-react"
 import { useState } from "react"
+import { Card } from "../ui/card"
+import ProjectCard from "./projectCard"
 
 type TScreen = "projects" | "shared" | "settings" | "search"
 
@@ -27,7 +31,7 @@ export default function Dashboard() {
 
   return (
     <div className="flex grow w-full">
-      <div className="w-56 border-r border-border p-4 justify-between flex flex-col">
+      <div className="w-56 shrink-0 border-r border-border p-4 justify-between flex flex-col">
         <div className="flex flex-col">
           <CustomButton className="mb-4">
             <Plus className="w-4 h-4 mr-2" />
@@ -75,10 +79,20 @@ export default function Dashboard() {
           </Button>
         </div>
       </div>
-      <div className="grow flex flex-col items-start p-4">
+      <div className="grow p-4 grid lg:grid-cols-4 xl:grid-cols-5 md:grid-cols-3 gap-4">
-        <h1 className="text-2xl font-medium text-center">
+        <ProjectCard>
-          A Collaborative, AI-Powered, Auto-Scaling Code Editor
+          <div className="font-medium flex items-center whitespace-nowrap w-full text-ellipsis overflow-hidden">
-        </h1>
+            React Project 1
+          </div>
+          <div className="flex flex-col text-muted-foreground space-y-0.5 text-sm">
+            <div className="flex items-center">
+              <Globe className="w-3 h-3 mr-2" /> Public
+            </div>
+            <div className="flex items-center">
+              <Clock className="w-3 h-3 mr-2" /> 3d ago
+            </div>
+          </div>
+        </ProjectCard>
       </div>
     </div>
   )

components/dashboard/projectCard.tsx

@@ -0,0 +1,22 @@
+import { cn } from "@/lib/utils"
+
+export default function ProjectCard({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <div
+      tabIndex={0}
+      className={cn(
+        "rounded-lg border bg-card text-card-foreground shadow h-48 p-[1px] gradient-project-card-bg cursor-pointer transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+      )}
+    >
+      <div className="rounded-[7px] p-4 h-full flex flex-col justify-between gradient-project-card">
+        {children}
+      </div>
+    </div>
+  )
+}

components/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }