-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
297 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export function ProjectDetails() { | ||
return <h1>Project details</h1> | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
) | ||
} |
20 changes: 20 additions & 0 deletions
20
src/app/(app)/me/projects/components/project-status-pin.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters