Skip to content

Commit 43616db

Browse files
joulevjoulev
committed
fix the 'use client' related harmless error log
Signed-off-by: Vu Van Dung <[email protected]>
1 parent f52aaf9 commit 43616db

File tree

3 files changed

+113
-108
lines changed

3 files changed

+113
-108
lines changed

‎src/app/admin/layout.client.tsx‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
"use client";
2+
import { RemoveScroll } from "react-remove-scroll";
3+
import { Logo } from "~/components/logo";
4+
import { Link } from "~/components/ui/link";
5+
import {
6+
NavigationMenu,
7+
NavigationMenuContent,
8+
NavigationMenuItem,
9+
NavigationMenuLink,
10+
NavigationMenuList,
11+
NavigationMenuMainLink,
12+
NavigationMenuTrigger,
13+
} from "~/components/ui/navigation-menu";
14+
import { cn } from "~/lib/cn";
15+
import { signOutAction } from "./sign-out";
16+
17+
function NavigationMenuListItem({
18+
href,
19+
title,
20+
children,
21+
}: React.PropsWithChildren<{ href: string; title: string }>) {
22+
return (
23+
<li>
24+
<NavigationMenuLink asChild>
25+
<Link
26+
href={href}
27+
className="flex select-none flex-col justify-between gap-3 leading-none no-underline outline-none"
28+
unstyled
29+
>
30+
<div className="text-sm font-semibold leading-none">{title}</div>
31+
<p className="line-clamp-2 text-sm leading-snug text-text-secondary">{children}</p>
32+
</Link>
33+
</NavigationMenuLink>
34+
</li>
35+
);
36+
}
37+
38+
export function Navigation() {
39+
const components: { title: string; href: string; description: string }[] = [
40+
{
41+
title: "chat",
42+
href: "/admin/chat",
43+
description: "Chat with GPT-4 Turbo",
44+
},
45+
{
46+
title: "upload",
47+
href: "/admin/upload",
48+
description: "Upload files to the Internet",
49+
},
50+
{
51+
title: "anime",
52+
href: "/admin/manage/anime",
53+
description: "Manage my anime list",
54+
},
55+
{
56+
title: "irasuto",
57+
href: "/admin/manage/irasuto",
58+
description: "Manage the irasuto illustration collection",
59+
},
60+
{
61+
title: "link",
62+
href: "/admin/manage/link",
63+
description: "Manage personal short links",
64+
},
65+
];
66+
return (
67+
<div className={cn("fixed top-12 inset-x-0 z-10", RemoveScroll.classNames.zeroRight)}>
68+
<NavigationMenu className="mx-auto">
69+
<NavigationMenuList>
70+
<NavigationMenuItem className="grid size-10 place-items-center rounded-full">
71+
<Link href="/" className="group/logo-link" unstyled>
72+
<Logo
73+
logoWidth={18}
74+
className="fill-text-secondary transition group-hover/logo-link:fill-text-primary"
75+
/>
76+
</Link>
77+
</NavigationMenuItem>
78+
<NavigationMenuItem>
79+
<NavigationMenuTrigger>Admin items</NavigationMenuTrigger>
80+
<NavigationMenuContent>
81+
<ul className="grid w-[500px] max-w-[calc(100vw-48px)] gap-3 p-3 md:grid-cols-2 lg:w-[600px]">
82+
{components.map(component => (
83+
<NavigationMenuListItem
84+
key={component.title}
85+
href={component.href}
86+
title={component.title}
87+
>
88+
{component.description}
89+
</NavigationMenuListItem>
90+
))}
91+
</ul>
92+
</NavigationMenuContent>
93+
</NavigationMenuItem>
94+
<NavigationMenuItem>
95+
<NavigationMenuMainLink asChild>
96+
<form action={signOutAction}>
97+
<button type="submit">Sign out</button>
98+
</form>
99+
</NavigationMenuMainLink>
100+
</NavigationMenuItem>
101+
</NavigationMenuList>
102+
</NavigationMenu>
103+
</div>
104+
);
105+
}

‎src/app/admin/layout.tsx‎

Lines changed: 1 addition & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,7 @@
11
import type { Metadata } from "next";
2-
import { RemoveScroll } from "react-remove-scroll";
3-
import { Logo } from "~/components/logo";
4-
import { Link } from "~/components/ui/link";
5-
import {
6-
NavigationMenu,
7-
NavigationMenuContent,
8-
NavigationMenuItem,
9-
NavigationMenuLink,
10-
NavigationMenuList,
11-
NavigationMenuMainLink,
12-
NavigationMenuTrigger,
13-
} from "~/components/ui/navigation-menu";
14-
import { signOut } from "~/lib/auth/config";
152
import { getSession } from "~/lib/auth/helpers";
16-
import { cn } from "~/lib/cn";
173
import { getMetadata } from "~/lib/seo";
18-
19-
function NavigationMenuListItem({
20-
href,
21-
title,
22-
children,
23-
}: React.PropsWithChildren<{ href: string; title: string }>) {
24-
return (
25-
<li>
26-
<NavigationMenuLink asChild>
27-
<Link
28-
href={href}
29-
className="flex select-none flex-col justify-between gap-3 leading-none no-underline outline-none"
30-
unstyled
31-
>
32-
<div className="text-sm font-semibold leading-none">{title}</div>
33-
<p className="line-clamp-2 text-sm leading-snug text-text-secondary">{children}</p>
34-
</Link>
35-
</NavigationMenuLink>
36-
</li>
37-
);
38-
}
39-
function Navigation() {
40-
const components: { title: string; href: string; description: string }[] = [
41-
{
42-
title: "chat",
43-
href: "/admin/chat",
44-
description: "Chat with GPT-4 Turbo",
45-
},
46-
{
47-
title: "upload",
48-
href: "/admin/upload",
49-
description: "Upload files to the Internet",
50-
},
51-
{
52-
title: "anime",
53-
href: "/admin/manage/anime",
54-
description: "Manage my anime list",
55-
},
56-
{
57-
title: "irasuto",
58-
href: "/admin/manage/irasuto",
59-
description: "Manage the irasuto illustration collection",
60-
},
61-
{
62-
title: "link",
63-
href: "/admin/manage/link",
64-
description: "Manage personal short links",
65-
},
66-
];
67-
return (
68-
<div className={cn("fixed top-12 inset-x-0 z-10", RemoveScroll.classNames.zeroRight)}>
69-
<NavigationMenu className="mx-auto">
70-
<NavigationMenuList>
71-
<NavigationMenuItem className="grid size-10 place-items-center rounded-full">
72-
<Link href="/" className="group/logo-link" unstyled>
73-
<Logo
74-
logoWidth={18}
75-
className="fill-text-secondary transition group-hover/logo-link:fill-text-primary"
76-
/>
77-
</Link>
78-
</NavigationMenuItem>
79-
<NavigationMenuItem>
80-
<NavigationMenuTrigger>Admin items</NavigationMenuTrigger>
81-
<NavigationMenuContent>
82-
<ul className="grid w-[500px] max-w-[calc(100vw-48px)] gap-3 p-3 md:grid-cols-2 lg:w-[600px]">
83-
{components.map(component => (
84-
<NavigationMenuListItem
85-
key={component.title}
86-
href={component.href}
87-
title={component.title}
88-
>
89-
{component.description}
90-
</NavigationMenuListItem>
91-
))}
92-
</ul>
93-
</NavigationMenuContent>
94-
</NavigationMenuItem>
95-
<NavigationMenuItem>
96-
<NavigationMenuMainLink asChild>
97-
<form
98-
action={async () => {
99-
"use server";
100-
await signOut({ redirect: true, redirectTo: "/" });
101-
}}
102-
>
103-
<button type="submit">Sign out</button>
104-
</form>
105-
</NavigationMenuMainLink>
106-
</NavigationMenuItem>
107-
</NavigationMenuList>
108-
</NavigationMenu>
109-
</div>
110-
);
111-
}
4+
import { Navigation } from "./layout.client";
1125

1136
export default async function Layout({ children }: { children: React.ReactNode }) {
1147
await getSession();

‎src/app/admin/sign-out.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
"use server";
2+
3+
import { signOut } from "~/lib/auth/config";
4+
5+
export async function signOutAction() {
6+
await signOut({ redirect: true, redirectTo: "/" });
7+
}

0 commit comments

Comments
 (0)