feat: add my projects page

src/app/(app)/me/projects/[id]/page.tsx

@@ -0,0 +1,3 @@
+export function ProjectDetails() {
+  return <h1>Project details</h1>
+}

src/app/(app)/me/projects/components/empty-projects.tsx

@@ -0,0 +1,28 @@
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader } from '@/components/ui/card'
+import { GanttChartSquare } from 'lucide-react'
+import Link from 'next/link'
+
+export function EmptyProjects() {
+  return (
+    <Card className="flex flex-col items-center justify-center border-dashed py-14">
+      <CardHeader>
+        <div className="flex h-16 w-16 items-center justify-center rounded-full bg-secondary">
+          <GanttChartSquare />
+        </div>
+      </CardHeader>
+      <CardContent className="flex flex-col items-center justify-center">
+        <div className="space-y-3 text-center">
+          <h2 className="text-xl font-medium">No projects</h2>
+          <span className="text-sm text-muted-foreground">
+            Create a project to start your journey
+          </span>
+        </div>
+
+        <Button className="mt-8" asChild>
+          <Link href="/me/projects/new">Add project</Link>
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}

src/app/(app)/me/projects/components/project-card.tsx

@@ -0,0 +1,49 @@
+import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
+import { ProjectStatusPin } from './project-status-pin'
+import { User } from 'lucide-react'
+
+interface ProjectCardProps {
+  status: 'recruiting' | 'draft' | 'closed'
+  name: string
+  technologies: string[]
+  description: string
+}
+
+export function ProjectCard({
+  description,
+  name,
+  status,
+  technologies,
+}: ProjectCardProps) {
+  return (
+    <Card className="cursor-pointer transition-colors hover:border-card-foreground hover:ring-4 hover:ring-card-foreground/5">
+      <CardHeader className="flex flex-row items-center gap-4">
+        <div className="relative h-20 w-20 rounded-full bg-zinc-700">
+          {status !== 'draft' && <ProjectStatusPin status={status} />}
+        </div>
+        <div className="flex-1 space-y-2">
+          <h2 className="text-xl font-medium">{name}</h2>
+
+          <ul className="flex flex-wrap gap-2">
+            {technologies.map((technology) => (
+              <li
+                key={technology}
+                className="flex rounded-sm bg-secondary px-1.5 py-0.5"
+              >
+                <span className="text-xs leading-5">{technology}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </CardHeader>
+
+      <CardContent>
+        <p>{description}</p>
+      </CardContent>
+
+      <CardFooter className="space-x-1">
+        <User size={14} /> <span className="text-sm">02</span>
+      </CardFooter>
+    </Card>
+  )
+}

src/app/(app)/me/projects/components/project-list.tsx

@@ -0,0 +1,52 @@
+import { ProjectCard } from './project-card'
+
+const projects = [
+  {
+    id: '1',
+    name: 'Dev Xperience',
+    status: 'recruiting',
+    technologies: ['react', 'nest-js', 'next-js', 'react-native'],
+    description:
+      'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam ab accusantium e, quo voluptas, fugiat aut, velit sequi aliquid facilis laceata...',
+  },
+  {
+    id: '2',
+    name: 'Dev Xperience',
+    status: 'recruiting',
+    technologies: ['react', 'java', 'next-js', 'react-native'],
+    description:
+      'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam ab accusantium e, quo voluptas, fugiat aut, velit sequi aliquid facilis laceata...',
+  },
+  {
+    id: '3',
+    name: 'Dev Xperience',
+    status: 'closed',
+    technologies: ['react', 'nest-js', 'next-js', 'git'],
+    description:
+      'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam ab accusantium e, quo voluptas, fugiat aut, velit sequi aliquid facilis laceata...',
+  },
+  {
+    id: '4',
+    name: 'Dev Xperience',
+    status: 'draft',
+    technologies: ['react', 'github', 'next-js', 'python'],
+    description:
+      'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam ab accusantium e, quo voluptas, fugiat aut, velit sequi aliquid facilis laceata...',
+  },
+]
+
+export function ProjectList() {
+  return (
+    <ul className="grid grid-cols-3 gap-6">
+      {projects.map((project) => (
+        <ProjectCard
+          key={project.id}
+          name={project.name}
+          description={project.description}
+          status={project.status as 'recruiting' | 'draft' | 'closed'}
+          technologies={project.technologies}
+        />
+      ))}
+    </ul>
+  )
+}

src/app/(app)/me/projects/components/project-status-pin.tsx

@@ -0,0 +1,20 @@
+export function ProjectStatusPin({
+  status,
+}: {
+  status: 'recruiting' | 'draft' | 'closed'
+}) {
+  return (
+    <div className="relative h-20 w-20 rounded-full bg-zinc-700">
+      <span className="absolute bottom-1 right-1 flex h-4 w-4">
+        <span
+          data-status={status}
+          className="absolute inline-flex h-full w-full animate-ping rounded-full opacity-75  data-[status=closed]:hidden data-[status=recruiting]:bg-green-400"
+        />
+        <span
+          data-status={status}
+          className="relative inline-flex h-4 w-4 rounded-full data-[status=closed]:bg-red-400 data-[status=recruiting]:bg-green-400"
+        />
+      </span>
+    </div>
+  )
+}

src/app/(app)/me/projects/new/page.tsx

@@ -31,7 +31,7 @@ export default function NewProject() {
         </div>
       </div>
 
-      <Separator className="mt-8" />
+      <Separator className="mt-4" />
 
       <form className="grid grid-cols-[1fr_15rem] divide-x">
         <div className="flex w-full flex-col gap-5 divide-y divide-border pt-8">

src/app/(app)/me/projects/page.tsx

@@ -1,12 +1,12 @@
 import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader } from '@/components/ui/card'
 import { Separator } from '@/components/ui/separator'
 import Link from 'next/link'
-import { GanttChartSquare } from 'lucide-react'
+import { EmptyProjects } from './components/empty-projects'
+import { ProjectList } from './components/project-list'
 
 export default function MyProjects() {
   return (
-    <div className="space-y-8">
+    <div>
       <div className="flex items-center justify-between">
         <div className="space-y-1">
           <h1 className="text-3xl font-semibold">My projects</h1>
@@ -15,35 +15,20 @@ export default function MyProjects() {
           </span>
         </div>
 
-        <div className="hidden">
+        <div
+        // className="hidden"
+        >
           <Button asChild>
             <Link href="/me/projects/new">Add project</Link>
           </Button>
         </div>
       </div>
 
-      <Separator />
+      <Separator className="mb-8 mt-4" />
 
       <div>
-        <Card className="flex flex-col items-center justify-center border-dashed py-14">
-          <CardHeader>
-            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-secondary">
-              <GanttChartSquare />
-            </div>
-          </CardHeader>
-          <CardContent className="flex flex-col items-center justify-center">
-            <div className="space-y-3 text-center">
-              <h2 className="text-xl font-medium">No projects</h2>
-              <span className="text-sm text-muted-foreground">
-                Create a project to start your journey
-              </span>
-            </div>
-
-            <Button className="mt-8" asChild>
-              <Link href="/me/projects/new">Add project</Link>
-            </Button>
-          </CardContent>
-        </Card>
+        {/* <EmptyProjects /> */}
+        <ProjectList />
       </div>
     </div>
   )

src/app/(app)/notifications/page.tsx

@@ -1,3 +1,130 @@
+import { Card, CardContent, CardHeader } from '@/components/ui/card'
+import { Separator } from '@/components/ui/separator'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
+import { UserAvatar } from '@/components/user-avatar'
+
 export default function Notifications() {
-  return <main className="flex items-center justify-center">Notifications</main>
+  return (
+    <div className="mx-auto max-w-[680px]">
+      <div className="flex items-center justify-between">
+        <div className="space-y-1">
+          <h1 className="text-3xl font-semibold">Notifications</h1>
+        </div>
+      </div>
+
+      <Separator className="mb-8 mt-4" />
+
+      <Card>
+        <Tabs defaultValue="all" className="mt-2">
+          <CardHeader>
+            <TabsList className="mr-auto">
+              <TabsTrigger value="all">All</TabsTrigger>
+              <TabsTrigger value="not-read">Not read</TabsTrigger>
+            </TabsList>
+          </CardHeader>
+
+          <CardContent>
+            <TabsContent value="all">
+              <div>
+                <a
+                  href="#"
+                  className="relative flex cursor-pointer items-start gap-4 rounded-md p-2 transition-colors hover:bg-accent"
+                >
+                  <div className="overflow-hidden rounded-full">
+                    <UserAvatar className="h-14 w-14" />
+                  </div>
+                  <div className="space-y-1">
+                    <p className="text-sm leading-relaxed">
+                      <strong>Bruno Luiz</strong> comment in your answer.
+                    </p>
+                    <time className="text-xs text-muted-foreground">
+                      15 minutes ago
+                    </time>
+                  </div>
+
+                  <span className="absolute right-5 top-1/2 flex h-3 w-3 -translate-y-1/2">
+                    <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-orange-400 opacity-75"></span>
+                    <span className="relative inline-flex h-3 w-3 rounded-full bg-orange-500"></span>
+                  </span>
+                </a>
+              </div>
+
+              <div>
+                <a
+                  href="#"
+                  className="relative flex cursor-pointer items-start gap-4 rounded-md p-2 transition-colors hover:bg-accent"
+                >
+                  <div className="overflow-hidden rounded-full">
+                    <UserAvatar className="h-14 w-14" />
+                  </div>
+                  <div className="space-y-1">
+                    <p className="text-sm leading-relaxed">
+                      <strong>Bruno Luiz</strong> comment in your answer.
+                    </p>
+                    <time className="text-xs text-muted-foreground">
+                      15 minutes ago
+                    </time>
+                  </div>
+                </a>
+              </div>
+
+              <div className="relative flex cursor-pointer items-start gap-4 rounded-md p-2 transition-colors hover:bg-accent">
+                <div className="overflow-hidden rounded-full">
+                  <UserAvatar className="h-14 w-14" />
+                </div>
+                <div className="space-y-1">
+                  <p className="text-sm leading-relaxed">
+                    <strong>Bruno Luiz</strong> comment in your answer.
+                  </p>
+                  <time className="text-xs text-muted-foreground">
+                    15 minutes ago
+                  </time>
+                </div>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="not-read">
+              <div className="relative flex cursor-pointer items-start gap-4 rounded-md p-2 transition-colors hover:bg-accent">
+                <div className="overflow-hidden rounded-full">
+                  <UserAvatar className="h-14 w-14" />
+                </div>
+                <div className="space-y-1">
+                  <p className="text-sm leading-relaxed">
+                    <strong>Bruno Luiz</strong> comment in your answer.
+                  </p>
+                  <time className="text-xs text-muted-foreground">
+                    15 minutes ago
+                  </time>
+                </div>
+
+                <span className="absolute right-5 top-1/2 flex h-3 w-3 -translate-y-1/2">
+                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-orange-400 opacity-75"></span>
+                  <span className="relative inline-flex h-3 w-3 rounded-full bg-orange-500"></span>
+                </span>
+              </div>
+
+              <div className="relative flex cursor-pointer items-start gap-4 rounded-md p-2 transition-colors hover:bg-accent">
+                <div className="overflow-hidden rounded-full">
+                  <UserAvatar className="h-14 w-14" />
+                </div>
+                <div className="space-y-1">
+                  <p className="text-sm leading-relaxed">
+                    <strong>Bruno Luiz</strong> comment in your answer.
+                  </p>
+                  <time className="text-xs text-muted-foreground">
+                    15 minutes ago
+                  </time>
+                </div>
+
+                <span className="absolute right-5 top-1/2 flex h-3 w-3 -translate-y-1/2">
+                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-orange-400 opacity-75"></span>
+                  <span className="relative inline-flex h-3 w-3 rounded-full bg-orange-500"></span>
+                </span>
+              </div>
+            </TabsContent>
+          </CardContent>
+        </Tabs>
+      </Card>
+    </div>
+  )
 }

src/components/notifications.tsx

@@ -11,11 +11,16 @@ export async function Notifications() {
       <PopoverTrigger asChild>
         <Button
           variant="outline"
-          className="h-6 gap-1 rounded-full px-2 text-secondary-foreground"
+          className="relative h-6 gap-1 rounded-full px-2 text-secondary-foreground"
           size="sm"
         >
           <BellIcon className="h-3 w-3" />
           <span>03</span>
+
+          <span className="absolute -right-0.5 -top-0.5 flex h-2 w-2">
+            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-orange-400 opacity-75"></span>
+            <span className="relative inline-flex h-2 w-2 rounded-full bg-orange-500"></span>
+          </span>
         </Button>
       </PopoverTrigger>
 
@@ -77,7 +82,7 @@ export async function Notifications() {
           </div>
 
           <Button asChild variant="outline" className="w-full">
-            <Link href="/events/new">See all</Link>
+            <Link href="/notifications">See all</Link>
           </Button>
         </div>
       </PopoverContent>