Merge pull request #37 from ETLOnline/update-profile-info

Update-profile-info

src/app/(dashboard)/profile/page.tsx

@@ -9,32 +9,33 @@ import {
   Tabs,
   TabsContent,
   TabsList,
-  TabsTrigger,
+  TabsTrigger
 } from "@/src/components/ui/tabs"
 import { CalendarIcon, StarIcon, TrophyIcon, UserIcon } from "lucide-react"
 import { useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
 import { Recommendation } from "@/src/components/dashboard/profile/types/profile-types"
+import { useUser } from "@clerk/nextjs"
 
 const rewards = [
   {
     title: "Top Contributor",
-    description: "Awarded for outstanding contributions to the team",
+    description: "Awarded for outstanding contributions to the team"
   },
   {
     title: "Innovation Champion",
-    description: "Recognized for implementing creative solutions",
-  },
+    description: "Recognized for implementing creative solutions"
+  }
 ]
 const activities = [
   {
     date: "2023-04-01",
-    description: "Completed the 'Advanced React Patterns' course",
+    description: "Completed the 'Advanced React Patterns' course"
   },
   {
     date: "2023-03-15",
-    description: "Contributed to open-source project 'awesome-ui-components'",
-  },
+    description: "Contributed to open-source project 'awesome-ui-components'"
+  }
 ]
 
 export default function ProfileScreen() {
@@ -44,22 +45,23 @@ export default function ProfileScreen() {
     "Web Development",
     "AI",
     "Open Source",
-    "Tech Writing",
+    "Tech Writing"
   ])
   const [interests, setInterests] = useState<string[]>([
     "React",
     "Next.js",
     "TypeScript",
     "UI/UX",
-    "Node.js",
+    "Node.js"
   ])
   const [recommendations, setRecommendations] = useState<Recommendation[]>([
     {
       name: "Jane Doe",
-      text: "An exceptional developer with a keen eye for detail.",
+      text: "An exceptional developer with a keen eye for detail."
     },
-    { name: "John Smith", text: "Always delivers high-quality work on time." },
+    { name: "John Smith", text: "Always delivers high-quality work on time." }
   ])
+  const { user } = useUser()
 
   useEffect(() => {
     const tab = searchParams.get("tab")
@@ -72,12 +74,14 @@ export default function ProfileScreen() {
     <div className="container mx-auto p-6">
       <div className="mb-6 flex items-center space-x-4">
         <Avatar className="h-20 w-20">
-          <AvatarImage src="/avatars/01.png" alt="Profile picture" />
+          <AvatarImage src={user?.imageUrl} alt="Profile picture" />
           <AvatarFallback>JD</AvatarFallback>
         </Avatar>
         <div>
-          <h1 className="text-2xl font-bold">Jane Developer</h1>
-          <p className="text-muted-foreground">Senior Frontend Engineer</p>
+          <h1 className="text-2xl font-bold">{user?.fullName}</h1>
+          <p className="text-muted-foreground">
+            {user?.emailAddresses[0].emailAddress}
+          </p>
         </div>
       </div>
       <Tabs defaultValue="basic" className="space-y-4" value={activeTab}>