add client/admin pages, show info and created admin api and server actions

app/[locale]/(protected)/_components/navbar.tsx

@@ -3,45 +3,31 @@
 
 import { Button } from '@/components/ui/button'
 import Link from 'next/link'
-import { USER_PROFILE_URL } from '@/config/routes'
+import { CABINET_ROUTES, USER_PROFILE_URL } from '@/config/routes'
 import { usePathname } from 'next/navigation'
 import UserButton from '@/components/auth/user-button'
 import LocaleSwitcher from '@/components/locale-switcher'
 
-const Navbar = () => {
+export const Navbar = () => {
   const pathname = usePathname()
-  //
+
+  console.log(USER_PROFILE_URL)
+
   return (
     <nav className="bg-secondary flex justify-between items-center top-0 absolute px-6 py-4 w-full shadow-sm">
       <div className="flex gap-x-4">
-        <Button asChild variant={pathname.match(/^\/(en\/|)server/) ? 'default' : 'outline'}>
-          <Link href={'/server'}>
-            Server
-          </Link>
-        </Button>
-        <Button asChild variant={pathname.match(/^\/(en\/|)client/) ? 'default' : 'outline'}>
-          <Link href={'/client'}>
-            Client
-          </Link>
-        </Button>
-        <Button asChild variant={pathname.match(/^\/(en\/|)admin/) ? 'default' : 'outline'}>
-          <Link href={'/admin'}>
-            Admin
-          </Link>
-        </Button>
-        <Button asChild variant={pathname.match(/^\/(en\/|)cabinet/) ? 'default' : 'outline'}>
-          <Link href={USER_PROFILE_URL}>
-            Cabinet
-          </Link>
-        </Button>
+        {CABINET_ROUTES.map((route) => (
+          <Button asChild key={route} variant={pathname.endsWith(route) ? 'default' : 'outline'} className="border">
+            <Link href={route}>
+              {route[1]?.toUpperCase() + route.substring(2)}
+            </Link>
+          </Button>
+        ))}
       </div>
       <div className="flex gap-x-2">
         <LocaleSwitcher/>
         <UserButton/>
       </div>
-
     </nav>
   )
 }
-
-export default Navbar

app/[locale]/(protected)/cabinet/admin/page.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import { Card, CardContent, CardHeader } from '@/components/ui/card'
+import { RoleGate } from '@/components/auth/role-gate'
+import FormSuccess from '@/components/form-success'
+import { UserRole } from '@prisma/client'
+import { Button } from '@/components/ui/button'
+import { toast } from 'sonner'
+import { admin } from '@/actions/admin'
+
+const AdminPage = () => {
+  const onServerActionClick = () => {
+    admin()
+      .then((data) => {
+        if (data.error) {
+          toast.error(data.error)
+        }
+
+        if (data.success) {
+          toast.success(data.success)
+        }
+      })
+  }
+
+  const onApiRouteClick = () => {
+    fetch('/api/admin')
+      .then((response) => {
+        if (response.ok) {
+          toast.success('Allow API Route')
+        } else {
+          toast.error('Forbidden API Route')
+        }
+      })
+  }
+
+  return (
+    <Card className="w-[600px]">
+      <CardHeader>
+        <p className="text-2xl font-semibold text-center">
+          🔑 Admin
+        </p>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <RoleGate allowedRole={UserRole.ADMIN}>
+          <FormSuccess message="You are allowed to see this content!"/>
+        </RoleGate>
+        <div className="flex flex-row justify-between items-center rounded-lg border p-3 shadow-md">
+          <p className="text-sm font-medium">
+            Admin-only API Route
+          </p>
+          <Button onClick={onApiRouteClick}>
+            Click to test
+          </Button>
+        </div>
+        <div className="flex flex-row justify-between items-center rounded-lg border p-3 shadow-md">
+          <p className="text-sm font-medium">
+            Admin-only Server Action
+          </p>
+          <Button onClick={onServerActionClick}>
+            Click to test
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default AdminPage

app/[locale]/(protected)/cabinet/client/page.tsx

@@ -0,0 +1,14 @@
+'use client'
+
+import { UserInfo } from '@/components/cabinet/user-info'
+import { useCurrentUser } from '@/hooks/useCurrentUser'
+
+const ClientPage = ({ params }: any) => {
+  const user = useCurrentUser()
+
+  return (
+    <UserInfo user={user} label="💻 Client component"/>
+  )
+}
+
+export default ClientPage

app/[locale]/(protected)/cabinet/page.tsx

@@ -1,10 +1,9 @@
 'use client'
 
 import { logout } from '@/actions/logout'
-import { useCurrentUser } from '@/hooks/useCurrentUser'
 
-const CabinetPage = () => {
-  const user = useCurrentUser()
+const CabinetPage = ({ params }: any) => {
+
   const btnOnClick = () => logout()
 
   return (

app/[locale]/(protected)/cabinet/server/page.tsx

@@ -0,0 +1,15 @@
+'use server'
+
+import { currentUser } from '@/lib/auth'
+import { UserInfo } from '@/components/cabinet/user-info'
+
+const ServerPage = async () => {
+  const user = await currentUser()
+
+  return (
+    <UserInfo user={user} label="🗄️ Server component"/>
+  )
+}
+
+export default ServerPage
+

app/[locale]/(protected)/layout.tsx

@@ -1,4 +1,4 @@
-import Navbar from '@/app/[locale]/(protected)/_components/navbar'
+import { Navbar } from '@/app/[locale]/(protected)/_components/navbar'
 
 interface ProtectedLayoutProps {
   children: React.ReactNode;