Skip to content

Commit e93c8ad

Browse files
daaniisshstabldev
daaniissh
and
stabldev
authored
feat: header user-dropdown (#13)
* style: responsive * feat: user dropdown * style: user dropdown * style: user dropdown * chore: format codebase * fix: header user-dropdown --------- Co-authored-by: MO0nlitgrace <moonlitgrace.gaia@gmail.com>
1 parent 9e528c9 commit e93c8ad

File tree

15 files changed

+498
-129
lines changed

15 files changed

+498
-129
lines changed

‎eslint.config.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import { FlatCompat } from '@eslint/eslintrc';
12
import { dirname } from 'path';
23
import { fileURLToPath } from 'url';
3-
import { FlatCompat } from '@eslint/eslintrc';
44

55
const __filename = fileURLToPath(import.meta.url);
66
const __dirname = dirname(__filename);

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
},
1313
"dependencies": {
1414
"@radix-ui/react-avatar": "^1.1.10",
15+
"@radix-ui/react-dropdown-menu": "^2.1.15",
1516
"@radix-ui/react-select": "^2.2.5",
1617
"@radix-ui/react-slot": "^1.2.3",
1718
"@tanstack/react-query": "^5.80.6",

‎pnpm-lock.yaml

Lines changed: 123 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/(app)/_components/footer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default function Footer() {
66
return (
77
<footer className="grid place-items-center border-t py-8">
88
<div className="mx-auto w-full max-w-300">
9-
<div className="flex flex-col gap-4">
9+
<div className="flex flex-col items-center gap-4 lg:items-start">
1010
<nav className="text-muted-foreground [&>a]:hover:text-foreground flex flex-wrap items-center gap-4 text-sm [&>a]:transition-colors">
1111
<GitloomIcon className="size-5" />
1212
<Link href={'/'}>Home</Link>

‎src/app/(app)/_components/header.tsx renamed to ‎src/app/(app)/_components/header/header.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
'use client';
22

33
import GitloomIcon from '@/components/icons/gitloom';
4-
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
4+
import { Avatar, AvatarImage } from '@/components/ui/avatar';
55
import { Button } from '@/components/ui/button';
66
import { ChevronsUpDown } from 'lucide-react';
77
import { useSession } from 'next-auth/react';
88
import Link from 'next/link';
99
import { usePathname } from 'next/navigation';
10+
import UserDropdown from './user-dropdown';
1011

1112
export default function Header() {
1213
const { data: session } = useSession();
@@ -34,10 +35,7 @@ export default function Header() {
3435
</nav>
3536
<div className="flex items-center gap-4">
3637
<Button variant={'outline'}>Feedback</Button>
37-
<Avatar>
38-
<AvatarImage src={session?.user?.image ?? undefined} />
39-
<AvatarFallback>{session?.user?.name}</AvatarFallback>
40-
</Avatar>
38+
<UserDropdown></UserDropdown>
4139
</div>
4240
</header>
4341
);

‎src/app/(app)/_components/header/user-dropdown.tsx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
'use client';
2+
3+
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
4+
import {
5+
DropdownMenu,
6+
DropdownMenuContent,
7+
DropdownMenuItem,
8+
DropdownMenuSeparator,
9+
DropdownMenuShortcut,
10+
DropdownMenuTrigger,
11+
} from '@/components/ui/dropdown-menu';
12+
import { ExternalLink, LogOutIcon } from 'lucide-react';
13+
import { useSession } from 'next-auth/react';
14+
15+
export default function UserDropdown() {
16+
const { data: session } = useSession();
17+
const { username, name, email, image } = session?.user ?? {};
18+
19+
return (
20+
<DropdownMenu>
21+
<DropdownMenuTrigger>
22+
<Avatar>
23+
<AvatarImage src={image ?? undefined} />
24+
<AvatarFallback>{name}</AvatarFallback>
25+
</Avatar>
26+
</DropdownMenuTrigger>
27+
<DropdownMenuContent align="end" className="w-48">
28+
<DropdownMenuItem>
29+
<a
30+
href={`https://github.com/${username}`}
31+
target="_blank"
32+
rel="noopener noreferrer"
33+
className="flex w-full flex-col items-start"
34+
>
35+
<span className="text-foreground text-sm font-medium">{name}</span>
36+
<span className="text-muted-foreground line-clamp-1 text-xs break-all">{email}</span>
37+
</a>
38+
<DropdownMenuShortcut>
39+
<ExternalLink className="size-4" />
40+
</DropdownMenuShortcut>
41+
</DropdownMenuItem>
42+
<DropdownMenuSeparator />
43+
<DropdownMenuItem className="cursor-pointer">
44+
Log out
45+
<DropdownMenuShortcut>
46+
<LogOutIcon className="size-4" />
47+
</DropdownMenuShortcut>
48+
</DropdownMenuItem>
49+
</DropdownMenuContent>
50+
</DropdownMenu>
51+
);
52+
}

‎src/app/(app)/layout.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Footer from './_components/footer';
2-
import Header from './_components/header';
2+
import Header from './_components/header/header';
33

44
export default function AppLayout({
55
children,
@@ -9,7 +9,7 @@ export default function AppLayout({
99
return (
1010
<main>
1111
<Header />
12-
<div className="mx-auto min-h-[calc(100dvh-3.75rem)] max-w-300">{children}</div>
12+
<div className="mx-auto min-h-[calc(100dvh-3.75rem)] max-w-300 px-5 lg:px-0">{children}</div>
1313
<Footer />
1414
</main>
1515
);

‎src/app/(app)/new/_components/repo-list.tsx

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export default function RepoList() {
5858
const { data: session, status } = useSession();
5959
const accessToken = session?.accessToken;
6060
const username = session?.user?.username;
61-
61+
console.log(session?.user);
6262
const [search, setSearch] = useState('');
6363
const debouncedSearch = useDebounce(search, 500);
6464

@@ -77,18 +77,19 @@ export default function RepoList() {
7777
return (
7878
<>
7979
<div className="grid grid-cols-2 gap-4">
80-
<Select defaultValue="moonlitgrace" disabled>
81-
{status === 'loading' ? (
82-
<Skeleton className="h-9 w-full" />
83-
) : (
80+
{status === 'loading' ? (
81+
<Skeleton className="h-9 w-full" />
82+
) : (
83+
<Select defaultValue={String(username)} disabled>
8484
<SelectTrigger className="w-full">
85-
<SelectValue />
85+
<SelectValue placeholder="Select username" />
8686
</SelectTrigger>
87-
)}
88-
<SelectContent>
89-
<SelectItem value={String(username)}>{username}</SelectItem>
90-
</SelectContent>
91-
</Select>
87+
<SelectContent>
88+
<SelectItem value={String(username)}>{username}</SelectItem>
89+
</SelectContent>
90+
</Select>
91+
)}
92+
9293
<InputRoot>
9394
<InputIcon>
9495
{debouncedSearch.length > 0 && isLoading ? (

‎src/app/(app)/new/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default async function Page() {
1515
Select a repository to link with Gitloom and start managing your content.
1616
</span>
1717
</div>
18-
<div className="grid grid-cols-2 gap-8">
18+
<div className="grid gap-8 md:grid-cols-2">
1919
<div className="bg-card/50 space-y-4 rounded-lg border p-4">
2020
<h5 className="text-xl font-bold">Import Git Repo</h5>
2121
<RepoList />

‎src/app/(auth)/login/page.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ export const metadata: Metadata = {
1515

1616
export default async function Page() {
1717
return (
18-
<div className="grid min-h-dvh grid-cols-2">
19-
<div className="bg-card/50 grid place-items-center border-r">
18+
<div className="grid min-h-dvh md:grid-cols-2">
19+
<div className="bg-card/50 hidden place-items-center border-r px-6 md:grid lg:px-0">
2020
<div className="flex w-full max-w-100 flex-col gap-4">
2121
<ShieldCheck className="text-muted-foreground size-15 stroke-1" />
2222
<h4 className="text-4xl font-black">Your data is yours.</h4>
@@ -55,7 +55,7 @@ export default async function Page() {
5555
});
5656
}}
5757
>
58-
<Button type='submit' size={'default'} className="w-full">
58+
<Button type="submit" size={'default'} className="w-full">
5959
<GithubIcon className="size-5" />
6060
Sign in with Github
6161
</Button>

0 commit comments

Comments
 (0)