This commit is contained in:
parent
87edf0e3e3
commit
606e129429
@ -11,6 +11,7 @@ import {
|
||||
import { GlobeAltIcon } from "@heroicons/react/24/outline";
|
||||
import Link from "next/link";
|
||||
import Avatar from "./Avatar";
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/Tooltip";
|
||||
import { Card } from "./ui/card";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
|
||||
|
||||
@ -23,18 +24,59 @@ interface ButtonProps {
|
||||
|
||||
function NavbarButton({ text, icon, href, ariaLabel }: ButtonProps) {
|
||||
return (
|
||||
<div className="group">
|
||||
<a
|
||||
aria-label={ariaLabel}
|
||||
className="flex h-full w-fit transform-gpu items-center justify-center gap-1 rounded-md p-[10px] transition-all hover:cursor-pointer hover:bg-blue-500"
|
||||
href={href}
|
||||
>
|
||||
<>
|
||||
{icon}
|
||||
<p className="hidden md:block">{text}</p>
|
||||
</>
|
||||
</a>
|
||||
</div>
|
||||
<a
|
||||
aria-label={ariaLabel}
|
||||
className="flex h-full w-fit transform-gpu items-center justify-center gap-1 rounded-md p-[8px] transition-all hover:cursor-pointer hover:bg-blue-500"
|
||||
href={href}
|
||||
>
|
||||
<>
|
||||
{icon}
|
||||
<p className="hidden md:block">{text}</p>
|
||||
</>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function FriendsButton() {
|
||||
const settingsStore = useStore(useSettingsStore, (state) => state);
|
||||
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger>
|
||||
<NavbarButton
|
||||
ariaLabel="View your friends"
|
||||
text="Friends"
|
||||
icon={<UserIcon height={20} width={20} />}
|
||||
/>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="p-2">
|
||||
{settingsStore?.friends.length == 0 ? (
|
||||
<p className="text-sm font-bold">No friends, add someone!</p>
|
||||
) : (
|
||||
settingsStore?.friends.map((friend) => {
|
||||
return (
|
||||
<Link
|
||||
key={friend.id}
|
||||
href={`/player/${friend.id}/top/1`}
|
||||
className="w-full"
|
||||
>
|
||||
<div className="flex transform-gpu gap-2 rounded-md p-2 text-left transition-all hover:bg-background">
|
||||
<Avatar
|
||||
url={friend.profilePicture}
|
||||
label="Friend avatar"
|
||||
size={48}
|
||||
/>
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">#{friend.rank}</p>
|
||||
<p>{friend.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
@ -59,42 +101,13 @@ export default function Navbar() {
|
||||
/>
|
||||
)}
|
||||
|
||||
<Popover>
|
||||
<PopoverTrigger>
|
||||
<NavbarButton
|
||||
ariaLabel="View your friends"
|
||||
text="Friends"
|
||||
icon={<UserIcon height={20} width={20} />}
|
||||
/>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="p-2">
|
||||
{settingsStore?.friends.length == 0 ? (
|
||||
<p className="text-sm font-bold">No friends, add someone!</p>
|
||||
) : (
|
||||
settingsStore?.friends.map((friend) => {
|
||||
return (
|
||||
<Link
|
||||
key={friend.id}
|
||||
href={`/player/${friend.id}/top/1`}
|
||||
className="w-full"
|
||||
>
|
||||
<div className="flex transform-gpu gap-2 rounded-md p-2 text-left transition-all hover:bg-background">
|
||||
<Avatar
|
||||
url={friend.profilePicture}
|
||||
label="Friend avatar"
|
||||
size={48}
|
||||
/>
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">#{friend.rank}</p>
|
||||
<p>{friend.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<FriendsButton />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Click to view your friends</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<NavbarButton
|
||||
ariaLabel="View the global ranking"
|
||||
text="Ranking"
|
||||
|
@ -18,7 +18,7 @@ const TooltipContent = React.forwardRef<
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
|
||||
"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
Loading…
x
Reference in New Issue
Block a user