49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslations } from "next-intl";
|
|
|
|
import { LocaleToggle } from "@/components/layout/locale-toggle";
|
|
import { SoundToggle } from "@/components/sound-toggle";
|
|
import { ThemeToggle } from "@/components/theme-toggle";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type FloatingPreferencesProps = {
|
|
locale: string;
|
|
className?: string;
|
|
};
|
|
|
|
export function FloatingPreferences({
|
|
locale,
|
|
className,
|
|
}: FloatingPreferencesProps) {
|
|
const t = useTranslations("navigation");
|
|
|
|
return (
|
|
<div className={cn("fixed inset-x-0 top-0 z-50 px-4 pt-4 sm:px-6", className)}>
|
|
<div className="mx-auto flex w-full justify-center">
|
|
<div className="inline-flex items-center justify-center gap-1 rounded-pill border border-border/70 bg-background/80 p-1 shadow-panel backdrop-blur-chrome">
|
|
<SoundToggle
|
|
ariaLabel={t("soundMute")}
|
|
mutedAriaLabel={t("soundUnmute")}
|
|
mutedToastLabel={t("soundMuted")}
|
|
unmutedToastLabel={t("soundEnabled")}
|
|
variant="ghost"
|
|
className="h-9 w-9 rounded-pill border border-transparent bg-transparent text-foreground/80 hover:bg-accent hover:text-foreground"
|
|
/>
|
|
<ThemeToggle
|
|
ariaLabel={t("themeToggle")}
|
|
lightToastLabel={t("themeLight")}
|
|
darkToastLabel={t("themeDark")}
|
|
variant="ghost"
|
|
className="h-9 w-9 rounded-pill border border-transparent bg-transparent text-foreground/80 hover:bg-accent hover:text-foreground"
|
|
/>
|
|
<LocaleToggle
|
|
locale={locale}
|
|
className="h-9 w-9 rounded-pill border border-transparent bg-transparent p-0 text-foreground/80 hover:bg-accent hover:text-foreground"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|