47 lines
2.0 KiB
TypeScript
47 lines
2.0 KiB
TypeScript
import {Button} from "@/components/ui/button";
|
|
import {Menu, X, Terminal as TerminalIcon} from "lucide-react";
|
|
import {useTabs} from "@/ui/Mobile/Apps/Navigation/Tabs/TabContext.tsx";
|
|
import {cn} from "@/lib/utils.ts";
|
|
|
|
interface MenuProps {
|
|
onSidebarOpenClick?: () => void;
|
|
}
|
|
|
|
export function BottomNavbar({onSidebarOpenClick}: MenuProps) {
|
|
const {tabs, currentTab, setCurrentTab, removeTab} = useTabs();
|
|
|
|
return (
|
|
<div className="w-full h-[80px] bg-[#18181B] flex items-center p-2 gap-2">
|
|
<Button className="w-[40px] h-[40px] flex-shrink-0" variant="outline" onClick={onSidebarOpenClick}>
|
|
<Menu/>
|
|
</Button>
|
|
<div className="flex-1 overflow-x-auto whitespace-nowrap thin-scrollbar">
|
|
<div className="inline-flex gap-2">
|
|
{tabs.map(tab => (
|
|
<div key={tab.id} className="inline-flex rounded-md shadow-sm" role="group">
|
|
<Button
|
|
variant="outline"
|
|
className={cn(
|
|
"h-10 rounded-r-none !px-3 border-1 border-[#303032]",
|
|
tab.id === currentTab && '!bg-[#09090b] !text-white'
|
|
)}
|
|
onClick={() => setCurrentTab(tab.id)}
|
|
>
|
|
<TerminalIcon className="mr-1 h-4 w-4"/>
|
|
{tab.title}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="h-10 rounded-l-none !px-2 border-1 border-[#303032]"
|
|
onClick={() => removeTab(tab.id)}
|
|
>
|
|
<X className="h-4 w-4"/>
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|