55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
import { Star, User, Users } from "lucide-react"
|
|
import { cn } from "~/lib/utils"
|
|
|
|
interface BottomNavigationProps {
|
|
activeTab: string
|
|
onTabChange: (tab: string) => void
|
|
favoriteCount: number
|
|
}
|
|
|
|
export default function BottomNavigation({ activeTab, onTabChange, favoriteCount }: BottomNavigationProps) {
|
|
return (
|
|
<div className="fixed bottom-0 left-0 right-0 bg-background border-t border-border md:hidden z-50">
|
|
<div className="flex items-center justify-around h-16">
|
|
<button
|
|
onClick={() => onTabChange("you")}
|
|
className={cn(
|
|
"flex flex-col items-center justify-center w-full h-full",
|
|
activeTab === "you" ? "text-primary" : "text-muted-foreground",
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-1">
|
|
<User className="h-4 w-4" />
|
|
<span className="text-xs font-medium">Vos colles</span>
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => onTabChange("favorites")}
|
|
className={cn(
|
|
"flex flex-col items-center justify-center w-full h-full gap-1",
|
|
activeTab === "favorites" ? "text-primary" : "text-muted-foreground",
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-1">
|
|
<Star className="h-4 w-4" />
|
|
<span className="text-xs font-medium">Vos favoris ({favoriteCount})</span>
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => onTabChange("class")}
|
|
className={cn(
|
|
"flex flex-col items-center justify-center w-full h-full",
|
|
activeTab === "class" ? "text-primary" : "text-muted-foreground",
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-1">
|
|
<Users className="h-4 w-4" />
|
|
<span className="text-xs font-medium">Votre classe</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|