Spaces:
Running
Running
Nguyen Thanh Hoang
Hoang Nguyen
commited on
Chore/signout (#5)
Browse files* feat(dashoard): implement page dashboard
* chore(signout): handle signout
---------
Co-authored-by: Hoang Nguyen <hoangnt@inspirelab.vn>
src/app/layout.tsx
CHANGED
|
@@ -1,5 +1,7 @@
|
|
| 1 |
import type { Metadata } from 'next';
|
|
|
|
| 2 |
import { Navbar } from '@/components/Navbar';
|
|
|
|
| 3 |
import { isDevMode } from '@/utils/Helpers';
|
| 4 |
import { Inter, Outfit } from 'next/font/google';
|
| 5 |
import '../styles/global.css';
|
|
@@ -26,10 +28,15 @@ export default function RootLayout({
|
|
| 26 |
children: React.ReactNode;
|
| 27 |
}) {
|
| 28 |
return (
|
| 29 |
-
<html lang=
|
| 30 |
<body className={`${inter.variable} ${outfit.variable} font-sans antialiased`} suppressHydrationWarning={isDevMode}>
|
| 31 |
-
<
|
| 32 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 33 |
</body>
|
| 34 |
</html>
|
| 35 |
);
|
|
|
|
| 1 |
import type { Metadata } from 'next';
|
| 2 |
+
import AuthLayout from '@/components/AuthLayout';
|
| 3 |
import { Navbar } from '@/components/Navbar';
|
| 4 |
+
import { routing } from '@/libs/i18nNavigation';
|
| 5 |
import { isDevMode } from '@/utils/Helpers';
|
| 6 |
import { Inter, Outfit } from 'next/font/google';
|
| 7 |
import '../styles/global.css';
|
|
|
|
| 28 |
children: React.ReactNode;
|
| 29 |
}) {
|
| 30 |
return (
|
| 31 |
+
<html lang={routing.defaultLocale} suppressHydrationWarning>
|
| 32 |
<body className={`${inter.variable} ${outfit.variable} font-sans antialiased`} suppressHydrationWarning={isDevMode}>
|
| 33 |
+
<AuthLayout params={{
|
| 34 |
+
locale: routing.defaultLocale,
|
| 35 |
+
}}
|
| 36 |
+
>
|
| 37 |
+
<Navbar />
|
| 38 |
+
{children}
|
| 39 |
+
</AuthLayout>
|
| 40 |
</body>
|
| 41 |
</html>
|
| 42 |
);
|
src/{app/(auth)/layout.tsx → components/AuthLayout/index.tsx}
RENAMED
|
@@ -3,7 +3,7 @@ import { setRequestLocale } from 'next-intl/server';
|
|
| 3 |
|
| 4 |
export default async function AuthLayout(props: {
|
| 5 |
children: React.ReactNode;
|
| 6 |
-
params:
|
| 7 |
}) {
|
| 8 |
const { locale } = await props.params;
|
| 9 |
setRequestLocale(locale);
|
|
|
|
| 3 |
|
| 4 |
export default async function AuthLayout(props: {
|
| 5 |
children: React.ReactNode;
|
| 6 |
+
params: { locale: string };
|
| 7 |
}) {
|
| 8 |
const { locale } = await props.params;
|
| 9 |
setRequestLocale(locale);
|
src/components/Navbar.tsx
CHANGED
|
@@ -1,9 +1,44 @@
|
|
| 1 |
'use client';
|
|
|
|
| 2 |
import { Button, Input } from '@/components/base';
|
|
|
|
| 3 |
import { Search } from 'lucide-react';
|
| 4 |
import Link from 'next/link';
|
|
|
|
| 5 |
|
| 6 |
export function Navbar() {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 7 |
return (
|
| 8 |
<nav className="fixed top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
| 9 |
<div className="container flex h-14 items-center">
|
|
@@ -28,13 +63,9 @@ export function Navbar() {
|
|
| 28 |
<Search className="absolute left-2 top-2.5 size-4 text-muted-foreground" />
|
| 29 |
<Input placeholder="Search documentation..." className="pl-8" />
|
| 30 |
</div>
|
| 31 |
-
|
| 32 |
-
|
| 33 |
-
|
| 34 |
-
</Button>
|
| 35 |
-
<Button variant="secondary" size="default">
|
| 36 |
-
<Link href="/sign-up">Sign Up</Link>
|
| 37 |
-
</Button>
|
| 38 |
</div>
|
| 39 |
|
| 40 |
</div>
|
|
|
|
| 1 |
'use client';
|
| 2 |
+
|
| 3 |
import { Button, Input } from '@/components/base';
|
| 4 |
+
import { SignOutButton, useUser } from '@clerk/nextjs';
|
| 5 |
import { Search } from 'lucide-react';
|
| 6 |
import Link from 'next/link';
|
| 7 |
+
import { useMemo } from 'react';
|
| 8 |
|
| 9 |
export function Navbar() {
|
| 10 |
+
const { user, isSignedIn } = useUser();
|
| 11 |
+
|
| 12 |
+
const authContent = useMemo(() => {
|
| 13 |
+
if (isSignedIn) {
|
| 14 |
+
return (
|
| 15 |
+
<>
|
| 16 |
+
<p className="font-heading">
|
| 17 |
+
Hello,
|
| 18 |
+
{' '}
|
| 19 |
+
{user?.firstName}
|
| 20 |
+
</p>
|
| 21 |
+
<SignOutButton>
|
| 22 |
+
<Button variant="destructive" size="default">
|
| 23 |
+
Sign Out
|
| 24 |
+
</Button>
|
| 25 |
+
</SignOutButton>
|
| 26 |
+
</>
|
| 27 |
+
);
|
| 28 |
+
}
|
| 29 |
+
|
| 30 |
+
return (
|
| 31 |
+
<>
|
| 32 |
+
<Button variant="default" size="default">
|
| 33 |
+
<Link href="/sign-in">Sign In</Link>
|
| 34 |
+
</Button>
|
| 35 |
+
<Button variant="secondary" size="default">
|
| 36 |
+
<Link href="/sign-up">Sign Up</Link>
|
| 37 |
+
</Button>
|
| 38 |
+
</>
|
| 39 |
+
);
|
| 40 |
+
}, [isSignedIn, user]);
|
| 41 |
+
|
| 42 |
return (
|
| 43 |
<nav className="fixed top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
| 44 |
<div className="container flex h-14 items-center">
|
|
|
|
| 63 |
<Search className="absolute left-2 top-2.5 size-4 text-muted-foreground" />
|
| 64 |
<Input placeholder="Search documentation..." className="pl-8" />
|
| 65 |
</div>
|
| 66 |
+
|
| 67 |
+
<div className="flex items-center gap-4">
|
| 68 |
+
{authContent}
|
|
|
|
|
|
|
|
|
|
|
|
|
| 69 |
</div>
|
| 70 |
|
| 71 |
</div>
|