57 lines
2.4 KiB
TypeScript
57 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import {Button} from '@/components/ui/button.tsx';
|
|
import {X, Home} from 'lucide-react';
|
|
|
|
interface ConfigTab {
|
|
id: string | number;
|
|
title: string;
|
|
}
|
|
|
|
interface ConfigTabListProps {
|
|
tabs: ConfigTab[];
|
|
activeTab: string | number;
|
|
setActiveTab: (tab: string | number) => void;
|
|
closeTab: (tab: string | number) => void;
|
|
onHomeClick: () => void;
|
|
}
|
|
|
|
export function ConfigTabList({tabs, activeTab, setActiveTab, closeTab, onHomeClick}: ConfigTabListProps) {
|
|
return (
|
|
<div className="inline-flex items-center h-full px-[0.5rem] overflow-x-auto">
|
|
<Button
|
|
onClick={onHomeClick}
|
|
variant="outline"
|
|
className={`h-7 mr-[0.5rem] rounded-md flex items-center ${activeTab === 'home' ? '!bg-[#1d1d1f] !text-white !border-[#2d2d30] !hover:bg-[#1d1d1f] !active:bg-[#1d1d1f] !focus:bg-[#1d1d1f] !hover:text-white !active:text-white !focus:text-white' : ''}`}
|
|
>
|
|
<Home className="w-4 h-4"/>
|
|
</Button>
|
|
{tabs.map((tab, index) => {
|
|
const isActive = tab.id === activeTab;
|
|
return (
|
|
<div
|
|
key={tab.id}
|
|
className={index < tabs.length - 1 ? "mr-[0.5rem]" : ""}
|
|
>
|
|
<div className="inline-flex rounded-md shadow-sm" role="group">
|
|
<Button
|
|
onClick={() => setActiveTab(tab.id)}
|
|
variant="outline"
|
|
className={`h-7 rounded-r-none ${isActive ? '!bg-[#1d1d1f] !text-white !border-[#2d2d30] !hover:bg-[#1d1d1f] !active:bg-[#1d1d1f] !focus:bg-[#1d1d1f] !hover:text-white !active:text-white !focus:text-white' : ''}`}
|
|
>
|
|
{tab.title}
|
|
</Button>
|
|
|
|
<Button
|
|
onClick={() => closeTab(tab.id)}
|
|
variant="outline"
|
|
className="h-7 rounded-l-none p-0 !w-9"
|
|
>
|
|
<X className="!w-5 !h-5" strokeWidth={2.5}/>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|