Bottom Navigation

1import { BottomNavigation, BottomNavigationList, BottomNavigationItem, BottomNavigationItemIcon } from "@/components/ui/bottom-navigation";
2
3<BottomNavigation />

1"use client";
2
3import { ark } from "@ark-ui/react/factory";
4import { Tabs as ArkTabs } from "@ark-ui/react/tabs";
5import type React from "react";
6import { cn } from "@/lib/utils";
7
8export const BottomNavigation = (
9  props: React.ComponentProps<typeof ArkTabs.Root>
10) => {
11  const { className, ...rest } = props;
12
13  return (
14    <ArkTabs.Root
15      className={cn(
16        "w-full",
17        "min-h-[calc(var(--spacing)*14+env(safe-area-inset-bottom,0))]",
18        className
19      )}
20      data-slot="bottom-navigation"
21      {...rest}
22    />
23  );
24};
25
26export const BottomNavigationList = (
27  props: React.ComponentProps<typeof ArkTabs.List>
28) => {