60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { Camera, MessageCircle } from "lucide-react";
|
|
|
|
import styles from "./app-bottom-nav.module.css";
|
|
|
|
export type AppBottomNavItem = "chat" | "privateRoom";
|
|
export type AppBottomNavVariant = "warm" | "dark";
|
|
|
|
export interface AppBottomNavProps {
|
|
activeItem?: AppBottomNavItem | null;
|
|
variant?: AppBottomNavVariant;
|
|
privateRoomLabel: string;
|
|
onChatClick: () => void;
|
|
onPrivateRoomClick: () => void;
|
|
}
|
|
|
|
export function AppBottomNav({
|
|
activeItem = null,
|
|
variant = "warm",
|
|
privateRoomLabel,
|
|
onChatClick,
|
|
onPrivateRoomClick,
|
|
}: AppBottomNavProps) {
|
|
return (
|
|
<nav className={getRootClass(variant)} aria-label="Primary navigation">
|
|
<button
|
|
type="button"
|
|
data-analytics-key="navigation.chat"
|
|
data-analytics-label="Chat navigation"
|
|
className={getButtonClass(activeItem === "chat")}
|
|
aria-current={activeItem === "chat" ? "page" : undefined}
|
|
onClick={onChatClick}
|
|
>
|
|
<MessageCircle size={20} aria-hidden="true" />
|
|
<span>Chat</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
data-analytics-key="navigation.private_room"
|
|
data-analytics-label="Private room navigation"
|
|
className={getButtonClass(activeItem === "privateRoom")}
|
|
aria-current={activeItem === "privateRoom" ? "page" : undefined}
|
|
onClick={onPrivateRoomClick}
|
|
>
|
|
<Camera size={20} aria-hidden="true" />
|
|
<span>{privateRoomLabel}</span>
|
|
</button>
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
function getRootClass(variant: AppBottomNavVariant): string {
|
|
return [styles.root, styles[variant]].filter(Boolean).join(" ");
|
|
}
|
|
|
|
function getButtonClass(active: boolean): string {
|
|
return [styles.button, active ? styles.active : ""].filter(Boolean).join(" ");
|
|
}
|