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

components/auth/card-wrapper.tsx

@@ -26,7 +26,7 @@ export const CardWrapper = ({
 }: Props) => {
   return (
     <Card
-      className="shadow-2xl max-w-[430px] w-full sm:min-w-[430px]">
+      className={`shadow-2xl max-w-[430px] w-full sm:min-w-[430px]`}>
       <CardHeader>
         <Header label={headerLabel} title={headerTitle}/>
       </CardHeader>
@@ -34,7 +34,7 @@ export const CardWrapper = ({
         {children}
       </CardContent>
       {showSocial && <CardFooter className="flex-wrap">
-        <div className="relative flex-none w-[100%] mb-4" style={{ background: 'block' }}>
+        <div className="relative flex-none w-[100%] mb-4">
           <div className="absolute inset-0 flex items-center">
             <span className="w-full border-t"></span>
           </div>

components/auth/logout-button.tsx

@@ -10,7 +10,7 @@ const LogoutButton = ({ children }: LogoutButtonProps) => {
   const onClick = () => logout()
 
   return (
-    <span onClick={onClick} className="cursor-pointer">
+    <span onClick={onClick}>
       {children}
     </span>
   )

components/auth/role-gate.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import { UserRole } from '@prisma/client'
+import { useCurrentRole } from '@/hooks/useCurrentRole'
+import FormError from '@/components/form-error'
+
+interface RoleGateProps {
+  children: React.ReactNode
+  allowedRole: UserRole
+}
+
+export const RoleGate = ({
+  children,
+  allowedRole,
+}: RoleGateProps) => {
+  const role = useCurrentRole()
+
+  if (role !== allowedRole) {
+    return <FormError message="You do not have permission to view this content!"/>
+  }
+
+  return <>{children}</>
+}

components/auth/user-button.tsx

@@ -3,26 +3,29 @@
 import { useCurrentUser } from '@/hooks/useCurrentUser'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import { FaUser } from 'react-icons/fa6'
 import { IoExitOutline } from 'react-icons/io5'
 import LogoutButton from '@/components/auth/logout-button'
 
+const fallbackInitials = (name?: string | null | undefined): string => {
+  return (name ?? '').split(' ').map((w: string) => w[0]).join('').toUpperCase()
+}
+
 const UserButton = () => {
   const user = useCurrentUser()
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger>
+      <DropdownMenuTrigger className="outline-0">
         <Avatar>
           <AvatarImage src={user?.image || ''} alt="User Avatar"/>
-          <AvatarFallback className="bg-sky-400">
-            <FaUser className="text-muted"/>
+          <AvatarFallback className="bg-sky-600 text-muted text-lg font-light">
+            {fallbackInitials(user?.name)}
           </AvatarFallback>
         </Avatar>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-40" align="end">
+      <DropdownMenuContent className="w-28 p-0" align="end">
         <LogoutButton>
-          <DropdownMenuItem className="cursor-pointer">
+          <DropdownMenuItem className="cursor-pointer p-2">
             <IoExitOutline className="w-4 h-4 mr-2"/>
             Logout
           </DropdownMenuItem>