Refactor UserProject component: Add project thumbnail display and lin…

…k functionality
code100x · Oct 20, 2024 · 2bec7a9 · 2bec7a9
1 parent dc54b74
commit 2bec7a9
Showing 1 changed file with 39 additions and 14 deletions.
diff --git a/src/components/profile/UserProject.tsx b/src/components/profile/UserProject.tsx
@@ -10,10 +10,12 @@ import {
   CardHeader,
   CardTitle,
 } from '../ui/card';
+import { LucideGithub, SquareArrowOutUpRightIcon } from 'lucide-react';
 
 export function UserProjects() {
   const { toast } = useToast();
   const [projects, setProjects] = useState<Project[]>();
+
   useEffect(() => {
     async function fetchProjects() {
       try {
@@ -43,35 +45,58 @@ export function UserProjects() {
   }
 
   return (
-    <div className="space-y-2 mb-2">
+    <div className="grid grid-cols-4 gap-3 mt-4">
       {projects.map((item: Project) => (
         <Card
           key={item.id}
-          className=" border-2 hover:bg-slate-100 dark:hover:bg-slate-900 text-black dark:text-white transition-shadow duration-300"
+          className="flex flex-col md:col-span-2 col-span-4 border-2 hover:bg-slate-100 dark:hover:bg-slate-900 text-black dark:text-white transition-shadow duration-300"
         >
+          <div className="flex items-center justify-center aspect-video w-full h-[200px] overflow-hidden object-contain rounded-2xl p-1 mt-1">
+            {item.projectThumbnail ? (
+              <img
+                alt={item.projectName}
+                src={item.projectThumbnail}
+                className={`h-[200px] hover:scale-110 transition-transform duration-300`}
+              />
+            ) : (
+              <div className="flex items-center justify-center h-[200px] rounded-2xl bg-slate-400 dark:bg-slate-900">
+                <span className="text-3xl font-semibold">
+                  {item.projectName}
+                </span>
+              </div>
+            )}
+          </div>
           <CardHeader>
-            <CardTitle className="text-lg font-semibold">
+            <CardTitle className="text-lg font-semibold uppercase flex items-center justify-between">
               {item.projectName}
             </CardTitle>
           </CardHeader>
-          <CardContent className="">
+          <CardContent className="flex items-center justify-start">
             <p className="mb-4">{item.projectSummary}</p>
           </CardContent>
           <CardFooter className="flex justify-between">
-            {item.projectLiveLink && (
+            {item.stack && (
+              <div className="flex items-center gap-2">
+                <span className="text-xs font-semibold">Stack:</span>
+                <span className="text-xs">{item.stack}</span>
+              </div>
+            )}
+            <div className="flex items-center justify-center gap-4">
+              {item.projectLiveLink && (
+                <Link
+                  href={item.projectLiveLink}
+                  className="text-blue-500 hover:underline"
+                >
+                  <SquareArrowOutUpRightIcon size={16} />
+                </Link>
+              )}
               <Link
-                href={item.projectLiveLink}
+                href={item.projectGithub}
                 className="text-blue-500 hover:underline"
               >
-                Live Project
+                <LucideGithub size={16} />
               </Link>
-            )}
-            <Link
-              href={item.projectGithub}
-              className="text-blue-500 hover:underline"
-            >
-              GitHub Repository
-            </Link>
+            </div>
           </CardFooter>
         </Card>
       ))}