This commit is contained in:
parent
87edf0e3e3
commit
606e129429
@ -11,6 +11,7 @@ import {
|
|||||||
import { GlobeAltIcon } from "@heroicons/react/24/outline";
|
import { GlobeAltIcon } from "@heroicons/react/24/outline";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import Avatar from "./Avatar";
|
import Avatar from "./Avatar";
|
||||||
|
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/Tooltip";
|
||||||
import { Card } from "./ui/card";
|
import { Card } from "./ui/card";
|
||||||
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
|
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
|
||||||
|
|
||||||
@ -23,10 +24,9 @@ interface ButtonProps {
|
|||||||
|
|
||||||
function NavbarButton({ text, icon, href, ariaLabel }: ButtonProps) {
|
function NavbarButton({ text, icon, href, ariaLabel }: ButtonProps) {
|
||||||
return (
|
return (
|
||||||
<div className="group">
|
|
||||||
<a
|
<a
|
||||||
aria-label={ariaLabel}
|
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"
|
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}
|
href={href}
|
||||||
>
|
>
|
||||||
<>
|
<>
|
||||||
@ -34,31 +34,13 @@ function NavbarButton({ text, icon, href, ariaLabel }: ButtonProps) {
|
|||||||
<p className="hidden md:block">{text}</p>
|
<p className="hidden md:block">{text}</p>
|
||||||
</>
|
</>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Navbar() {
|
function FriendsButton() {
|
||||||
const settingsStore = useStore(useSettingsStore, (state) => state);
|
const settingsStore = useStore(useSettingsStore, (state) => state);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
|
||||||
<Card className="flex h-fit w-full rounded-md">
|
|
||||||
{settingsStore !== undefined && settingsStore.player && (
|
|
||||||
<NavbarButton
|
|
||||||
ariaLabel="Your profile"
|
|
||||||
text="You"
|
|
||||||
icon={
|
|
||||||
<Avatar
|
|
||||||
url={settingsStore.player.profilePicture}
|
|
||||||
label="Your avatar"
|
|
||||||
size={32}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
href={`/player/${settingsStore.player.id}/top/1`}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Popover>
|
<Popover>
|
||||||
<PopoverTrigger>
|
<PopoverTrigger>
|
||||||
<NavbarButton
|
<NavbarButton
|
||||||
@ -95,6 +77,37 @@ export default function Navbar() {
|
|||||||
)}
|
)}
|
||||||
</PopoverContent>
|
</PopoverContent>
|
||||||
</Popover>
|
</Popover>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Navbar() {
|
||||||
|
const settingsStore = useStore(useSettingsStore, (state) => state);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Card className="flex h-fit w-full rounded-md">
|
||||||
|
{settingsStore !== undefined && settingsStore.player && (
|
||||||
|
<NavbarButton
|
||||||
|
ariaLabel="Your profile"
|
||||||
|
text="You"
|
||||||
|
icon={
|
||||||
|
<Avatar
|
||||||
|
url={settingsStore.player.profilePicture}
|
||||||
|
label="Your avatar"
|
||||||
|
size={32}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
href={`/player/${settingsStore.player.id}/top/1`}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger>
|
||||||
|
<FriendsButton />
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>Click to view your friends</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
|
||||||
<NavbarButton
|
<NavbarButton
|
||||||
ariaLabel="View the global ranking"
|
ariaLabel="View the global ranking"
|
||||||
text="Ranking"
|
text="Ranking"
|
||||||
|
@ -18,7 +18,7 @@ const TooltipContent = React.forwardRef<
|
|||||||
ref={ref}
|
ref={ref}
|
||||||
sideOffset={sideOffset}
|
sideOffset={sideOffset}
|
||||||
className={cn(
|
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,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
|
Loading…
Reference in New Issue
Block a user