Merge pull request #2 from ETLOnline/feature/ui-dashboard-layout-and-…

…profile

feat(ui): dashboard layout and cleanup

app/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+const page = () => {
+  return (
+    <>
+      <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+        <div className="aspect-video rounded-xl bg-muted/50" />
+        <div className="aspect-video rounded-xl bg-muted/50" />
+        <div className="aspect-video rounded-xl bg-muted/50" />
+      </div>
+      <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+    </>
+  )
+}
+
+export default page

app/(dashboard)/layout.tsx

@@ -1,16 +1,21 @@
-import React, { ReactNode } from 'react'
+import { AppSidebar } from "@/components/dashboard/app-sidebar"
+import Header from "@/components/dashboard/header"
+import {
+  SidebarInset,
+  SidebarProvider,
+} from "@/components/ui/sidebar"
+import { ReactNode } from "react"
 
-const DashboardLayout = ({children}:{children:ReactNode}) => {
+export default function DashboardLayout({ children }: { children: ReactNode }) {
   return (
-    <>
-        <div>header</div>
-        <div>
-            <div>side bar</div>
-            <div>{children}</div>
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <Header />
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          {children}
         </div>
-        <div>footer</div>
-    </>
+      </SidebarInset>
+    </SidebarProvider>
   )
 }
-
-export default DashboardLayout

app/(dashboard)/profile/page.tsx

@@ -1,9 +1,153 @@
-import React from 'react'
+"use client"
+
+import { useState } from "react"
+import { Calendar } from "@/components/ui/calendar"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { CalendarIcon, StarIcon, TrophyIcon, UserIcon } from 'lucide-react'
+
+const skillTags = ["React", "Next.js", "TypeScript", "UI/UX", "Node.js"]
+const interests = ["Web Development", "AI", "Open Source", "Tech Writing"]
+const recommendations = [
+  { name: "Jane Doe", text: "An exceptional developer with a keen eye for detail." },
+  { name: "John Smith", text: "Always delivers high-quality work on time." },
+]
+const rewards = [
+  { title: "Top Contributor", description: "Awarded for outstanding contributions to the team" },
+  { title: "Innovation Champion", description: "Recognized for implementing creative solutions" },
+]
+const activities = [
+  { date: "2023-04-01", description: "Completed the 'Advanced React Patterns' course" },
+  { date: "2023-03-15", description: "Contributed to open-source project 'awesome-ui-components'" },
+]
+
+export default function ProfileScreen() {
+  const [date, setDate] = useState<Date | undefined>(new Date())
 
-const Profile = () => {
   return (
-    <div>Profile</div>
+    <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" />
+          <AvatarFallback>JD</AvatarFallback>
+        </Avatar>
+        <div>
+          <h1 className="text-2xl font-bold">Jane Developer</h1>
+          <p className="text-muted-foreground">Senior Frontend Engineer</p>
+        </div>
+      </div>
+
+      <Tabs defaultValue="basic" className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="basic"><UserIcon className="mr-2 h-4 w-4" />Bio/Basic</TabsTrigger>
+          <TabsTrigger value="rewards"><TrophyIcon className="mr-2 h-4 w-4" />Rewards</TabsTrigger>
+          <TabsTrigger value="activity"><StarIcon className="mr-2 h-4 w-4" />Activity</TabsTrigger>
+          <TabsTrigger value="calendar"><CalendarIcon className="mr-2 h-4 w-4" />Calendar</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="basic">
+          <Card>
+            <CardHeader>
+              <CardTitle>Bio</CardTitle>
+              <CardDescription>Your professional summary and skills</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div>
+                <h3 className="mb-2 font-semibold">Skills</h3>
+                <div className="flex flex-wrap gap-2">
+                  {skillTags.map((skill) => (
+                    <Badge key={skill} variant="secondary">{skill}</Badge>
+                  ))}
+                </div>
+              </div>
+              <div>
+                <h3 className="mb-2 font-semibold">Interests</h3>
+                <div className="flex flex-wrap gap-2">
+                  {interests.map((interest) => (
+                    <Badge key={interest} variant="outline">{interest}</Badge>
+                  ))}
+                </div>
+              </div>
+              <div>
+                <h3 className="mb-2 font-semibold">Recommendations</h3>
+                <ul className="space-y-2">
+                  {recommendations.map((rec, index) => (
+                    <li key={index} className="rounded-lg border p-3">
+                      <p className="text-sm">&quot;{rec.text}&quot;</p>
+                      <p className="mt-1 text-xs text-muted-foreground">- {rec.name}</p>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="rewards">
+          <Card>
+            <CardHeader>
+              <CardTitle>Rewards</CardTitle>
+              <CardDescription>Your achievements and recognitions</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ul className="space-y-4">
+                {rewards.map((reward, index) => (
+                  <li key={index} className="flex items-start space-x-3">
+                    <TrophyIcon className="mt-0.5 h-5 w-5 text-yellow-500" />
+                    <div>
+                      <h3 className="font-semibold">{reward.title}</h3>
+                      <p className="text-sm text-muted-foreground">{reward.description}</p>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="activity">
+          <Card>
+            <CardHeader>
+              <CardTitle>Activity</CardTitle>
+              <CardDescription>Your recent activities and achievements</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ul className="space-y-4">
+                {activities.map((activity, index) => (
+                  <li key={index} className="flex items-start space-x-3">
+                    <StarIcon className="mt-0.5 h-5 w-5 text-blue-500" />
+                    <div>
+                      <p className="text-sm">{activity.description}</p>
+                      <p className="text-xs text-muted-foreground">{new Date(activity.date).toLocaleDateString()}</p>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="calendar">
+          <Card>
+            <CardHeader>
+              <CardTitle>Calendar</CardTitle>
+              <CardDescription>Your schedule and upcoming events</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Calendar
+                mode="single"
+                selected={date}
+                onSelect={setDate}
+                className="rounded-md border"
+              />
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
   )
 }
 
-export default Profile

app/(home)/home-layout.css

@@ -1,7 +1,7 @@
-.wrapper{
+.header{
     @apply flex py-2 px-4 shadow-sm
 }
-.Header{
+.header-nav{
     @apply flex  me-auto
 }
 .nav{

app/(home)/home.css

@@ -0,0 +1,13 @@
+.hero{
+    @apply  w-full flex  h-screen items-center justify-center;
+    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
+}
+.content{
+    @apply w-5/12 flex flex-col gap-8
+}
+.Main-Heading{
+    @apply text-[44px] font-bold
+}
+.avatars{
+    @apply w-1/2 relative
+}

app/(home)/layout.tsx

@@ -2,44 +2,49 @@ import Link from 'next/link'
 import React, { ReactNode } from 'react'
 import './home-layout.css'
 import { Button } from '@/components/ui/button'
+import { LinkAsButton } from '@/components/LinkAsButton/LinkAsButton'
 
 const PublicLayout = ({ children }: { children: ReactNode }) => {
   return (
     <>
-    <div className="wrapper">
-
-
-      <div className='Header'>
-
-        <Link className='nav-brand' href="#">Spark</Link>
-
-        <ul className='nav'>
-          <li className='nav-items'>
-            <Link className='nav-link' href="#">
-              Find a Mentor</Link>
-          </li>
-          <li className='nav-items'>
-            <Link className='nav-link' href="#">
-              About Us</Link>
-          </li>
-          <li className='nav-items'>
-            <Link className='nav-link' href="#">
-              Pricing</Link>
-          </li>
-          <li className='nav-items'>
-            <Link className='nav-link' href="#">
-              Become a Member</Link>
-          </li>
-        </ul>
-      </div>
-
-      <div className="button-wrapper">
-        <Button className='button' variant={'ghost'}>Sign Up</Button>
-        <Button variant={'default'}>Log In</Button>
-
-      </div>
+      <div className="header">
+
+
+        <div className='header-nav'>
+
+          <Link className='nav-brand' href="#">Spark</Link>
+
+          <ul className='nav'>
+            <li className='nav-items'>
+              <Link className='nav-link' href="/dashboard">
+                Dashboard</Link>
+            </li>
+            <li className='nav-items'>
+              <Link className='nav-link' href="#">
+                Find a Mentor</Link>
+            </li>
+            <li className='nav-items'>
+              <Link className='nav-link' href="#">
+                About Us</Link>
+            </li>
+            <li className='nav-items'>
+              <Link className='nav-link' href="#">
+                Pricing</Link>
+            </li>
+            <li className='nav-items'>
+              <Link className='nav-link' href="#">
+                Become a Member</Link>
+            </li>
+          </ul>
+        </div>
+
+        <div className="button-wrapper">
+          <LinkAsButton href='/sign-up' className='button' variant={'ghost'}>Sign Up</LinkAsButton>
+          <LinkAsButton href='/sign-in' variant={'default'}>Log In</LinkAsButton>
+        </div>
 
       </div>
+
       {children}
       <div>footer</div>
     </>