Fascinated/scoresaber-reloaded-v2
1
2
Fork 0
Code Issues 1 Pull Requests 10 Actions Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/Navbar.tsx
View File

@ -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,10 +24,9 @@ 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"
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}
>
<>
@ -34,31 +34,13 @@ function NavbarButton({ text, icon, href, ariaLabel }: ButtonProps) {
<p className="hidden md:block">{text}</p>
</>
</a>
</div>
);
}
export default function Navbar() {
function FriendsButton() {
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`}
/>
)}
<Popover>
<PopoverTrigger>
<NavbarButton
@ -95,6 +77,37 @@ export default function Navbar() {
)}
</PopoverContent>
</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
ariaLabel="View the global ranking"
text="Ranking"

2
src/components/ui/Tooltip.tsx
View File

@ -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}