Refactor UserExperience component: Improve loading and no experiences…

… found handling
code100x · Oct 21, 2024 · 4ba0a4f · 4ba0a4f
1 parent 0311f6c
commit 4ba0a4f
Showing 1 changed file with 38 additions and 40 deletions.
diff --git a/src/components/profile/UserExperience.tsx b/src/components/profile/UserExperience.tsx
@@ -2,9 +2,8 @@ import { getUserExperience } from '@/actions/user.profile.actions';
 import { useEffect, useState } from 'react';
 import { useToast } from '../ui/use-toast';
 import { Experience } from '@prisma/client';
-import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
 import _ from 'lodash';
-
+import icons from '@/lib/icons';
 export function UserExperience() {
   const { toast } = useToast();
   const [experiences, setExperiences] = useState<Experience[] | undefined>();
@@ -34,53 +33,52 @@ export function UserExperience() {
   }, []);
 
   if (!experiences) {
-    return null;
+    return (
+      <div className="flex items-center justify-center h-full w-full">
+        <icons.loading className="animate-spin w-10 h-10" />
+      </div>
+    );
   }
 
   return (
     <div className="space-y-2 mb-2">
       {experiences.map((item: Experience) => (
-        <Card
+        <div
           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 items-center justify-between 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 p-3 gap-2 rounded-2xl"
         >
-          <CardHeader>
-            <CardTitle className="text-lg font-semibold">
-              <strong>Company Name: </strong>
-              {item.companyName}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p className="mb-2">
-              <strong>Designation:</strong> {item.designation}
-            </p>
-            <p className="mb-2">
-              <strong>Employment Type:</strong>{' '}
-              {_.startCase(item.EmploymentType)}
-            </p>
-            <p className="mb-2">
-              <strong>Work Mode:</strong> {item.workMode}
-            </p>
-            <p className="mb-2">
-              <strong>Current Status:</strong>{' '}
-              {item.currentWorkStatus
-                ? 'Currently Employed here'
-                : 'Not Currently Employed here'}
-            </p>
-            <p className="mb-2">
-              <strong>Duration:</strong>{' '}
-              {new Date(item.startDate).toLocaleDateString()}{' '}
-              {item.endDate
-                ? ` - ${new Date(item.endDate).toLocaleDateString()}`
-                : ' - Present'}
-            </p>
-            <p className="mb-4">
-              <strong>Description: </strong>
+          <div className="flex items-center justify-between w-full py-2">
+            <div className="flex flex-col justify-center items-start w-1/3">
+              <div className="font-semibold">
+                {new Date(item.startDate).toLocaleDateString()}
+                {item.endDate
+                  ? ` - ${new Date(item.endDate).toLocaleDateString()}`
+                  : ' - Present'}
+              </div>
+              <div className="dark:text-slate-400 text-slate-700">
+                {_.startCase(item.EmploymentType)}, {_.startCase(item.workMode)}
+              </div>
+            </div>
+            <div className="flex flex-col justify-center items-start w-1/3 gap-1">
+              <span className="font-bold">{item.companyName}</span>
+              <p className="dark:text-slate-400 text-slate-700">
+                {item.designation}
+              </p>
+            </div>
+          </div>
+          <div className="w-full border-l-4 p-2 bg-slate-900/50">
+            <span className="dark:text-slate-400 text-slate-700">
               {item.description}
-            </p>
-          </CardContent>
-        </Card>
+            </span>
+          </div>
+        </div>
       ))}
+      {experiences.length === 0 && (
+        <div className="flex items-center justify-center col-span-4 h-full">
+          <icons.alert size={24} />
+          <span className="ml-2">No Experiences Found</span>
+        </div>
+      )}
     </div>
   );
 }