add tooltip to friends button
All checks were successful
deploy / deploy (push) Successful in 56s

This commit is contained in:
Lee 2023-11-05 03:16:22 +00:00
parent 87edf0e3e3
commit 606e129429
2 changed files with 62 additions and 49 deletions

@ -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,18 +24,59 @@ 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-[8px] 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-[10px] transition-all hover:cursor-pointer hover:bg-blue-500" href={href}
href={href} >
> <>
<> {icon}
{icon} <p className="hidden md:block">{text}</p>
<p className="hidden md:block">{text}</p> </>
</> </a>
</a> );
</div> }
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> <Tooltip>
<PopoverTrigger> <TooltipTrigger>
<NavbarButton <FriendsButton />
ariaLabel="View your friends" </TooltipTrigger>
text="Friends" <TooltipContent>Click to view your friends</TooltipContent>
icon={<UserIcon height={20} width={20} />} </Tooltip>
/>
</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>
<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}