chore: refactor tabs

This commit is contained in:
2024-09-19 12:06:19 +01:00
parent 0aff59b274
commit 032294456e
4 changed files with 27 additions and 27 deletions

View File

@ -12,6 +12,7 @@ export interface Tab {
interface TabsProps {
tabs: Tab[];
tab: Tab;
className?: string;
setTab: (t: Tab) => void;
}
@ -23,7 +24,7 @@ export const TabSelector = ({ t, tab, setTab }: TabElementProps) => {
return (
<div
className={classNames(
"px-4 py-2 my-1 border border-border-color rounded-full cursor-pointer font-semibold bg-gray-dark",
"flex gap-2 items-center px-4 py-2 my-1 border border-border-color rounded-full cursor-pointer font-semibold bg-gray-dark",
"hover:drop-shadow-sm hover:bg-gray",
{
"": tab.value === t.value,
@ -36,10 +37,10 @@ export const TabSelector = ({ t, tab, setTab }: TabElementProps) => {
);
};
const TabSelectors = ({ tabs, tab, setTab }: TabsProps) => {
const TabSelectors = ({ tabs, tab, className, setTab }: TabsProps) => {
const horizontalScroll = useHorizontalScroll();
return (
<div className="flex gap-2 overflow-y-auto hide-scrollbar" ref={horizontalScroll}>
<div className={classNames(className, "flex gap-2 overflow-y-auto hide-scrollbar")} ref={horizontalScroll}>
{tabs.map((t, index) => (
<TabSelector key={index} tab={tab} setTab={setTab} t={t} />
))}