Newer
Older
"use client"
import { Icons } from "@/components/icons"
import { Button, buttonVariants } from "@/components/ui/button"
import {
Sheet,
SheetClose,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet"
import { cn } from "@/lib/utils"
import { User } from "next-auth"
import { signOut } from "next-auth/react"
import Link from "next/link"
import { GameUnityLogo } from "./logo"
import { ModeToggle } from "./mode-toggle"
import { NavPromo } from "./nav-promo"
import { UserAvatar } from "./user-avatar"
export const MobileSheet = ({ user }: { user: User | undefined }) => {
return (
<Sheet>
<SheetTrigger asChild>
<div className={cn(buttonVariants({ variant: "ghost", size: "logo" }), "cursor-pointer")}>
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
{user ?
<UserAvatar
user={{ username: user.username ?? null, image: user.image ?? null }}
className="h-8 w-8"
/>
:
<Icons.menu />}
</div>
</SheetTrigger>
<SheetContent>
{!user ?
<div className="flex flex-col justify-center items-center h-full space-y-6">
<GameUnityLogo />
<NavPromo />
</div>
:
<div className="flex flex-col justify-center items-center h-full">
<SheetClose asChild>
<Link href={`${user.username}`} className="flex flex-col justify-center items-center">
<UserAvatar
user={{ username: user.username ?? null, image: user.image ?? null }}
className="h-16 w-16"
/>
<SheetHeader className="pt-6">
<SheetTitle>{user.name}</SheetTitle>
<SheetDescription className="text-sky-500 text-center">
@{user.username}
</SheetDescription>
</SheetHeader>
</Link>
</SheetClose>
<div className="flex flex-col items-center space-y-6 pt-12">
<SheetClose asChild>
<Link href="/settings" className={cn(buttonVariants({ variant: "outline", size: "lg" }), "w-full")}>
Settings
</Link>
</SheetClose>
<Button variant="outline" size="lg"
onClick={(event) => {
event.preventDefault()
signOut({
callbackUrl: `${window.location.origin}/login`,
})
}}
>
Sign out
</Button>
<SheetClose asChild>
<Link href="/help" className="text-sm text-muted-foreground">Help / FAQ</Link>
</SheetClose>
<ModeToggle />
</div>
</div>
}
</SheetContent>
</Sheet>
)
}