Add settings page for alert preferences
This commit is contained in:
@@ -2,15 +2,13 @@
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { CloudSun, Droplets, TriangleAlert } from "lucide-react";
|
||||
import { CloudSun, Droplets, Settings, TriangleAlert } from "lucide-react";
|
||||
import { NAV_ITEMS } from "@/lib/constants";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { InstallPWAButton } from "@/components/ui/install-pwa-button";
|
||||
import { ThemeToggle } from "@/components/ui/theme-toggle";
|
||||
import { LanguageToggle } from "@/components/ui/language-toggle";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
|
||||
const icons = [CloudSun, TriangleAlert, Droplets];
|
||||
const icons = [CloudSun, TriangleAlert, Droplets, Settings];
|
||||
|
||||
export function AppShell({ children }: { children: React.ReactNode }) {
|
||||
const pathname = usePathname();
|
||||
@@ -34,8 +32,6 @@ export function AppShell({ children }: { children: React.ReactNode }) {
|
||||
</nav>
|
||||
<div className="flex items-center gap-2">
|
||||
<InstallPWAButton />
|
||||
<LanguageToggle />
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@@ -45,9 +41,9 @@ export function AppShell({ children }: { children: React.ReactNode }) {
|
||||
const Icon = icons[index];
|
||||
const active = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
|
||||
return (
|
||||
<Link key={item.href} href={item.href} className={cn("flex min-w-[5rem] flex-col items-center gap-1 rounded-card px-3 py-2 text-[0.68rem] font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent", active ? "bg-foreground text-background" : "text-muted")}>
|
||||
<Link key={item.href} href={item.href} className={cn("flex min-w-0 flex-1 flex-col items-center gap-1 rounded-card px-2 py-2 text-[0.68rem] font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent", active ? "bg-foreground text-background" : "text-muted")}>
|
||||
<Icon className="size-4" />
|
||||
{t(item.labelKey)}
|
||||
<span className="max-w-full truncate">{t(item.labelKey)}</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
|
||||
Reference in New Issue
Block a user