41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
import type { ComponentPropsWithoutRef } from "@radix-ui/react-primitive";
|
|
import React from "react";
|
|
import cx from "~/utilities/classnames";
|
|
|
|
export type TabProps = {
|
|
tabs: Array<{ value: string; label: string }>;
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
export function Tabs({ tabs, children }: TabProps) {
|
|
return (
|
|
<TabsPrimitive.Root defaultValue={tabs[0].value}>
|
|
<TabsPrimitive.List className="">
|
|
{tabs.map(({ value, label }) => (
|
|
<TabsPrimitive.Trigger
|
|
value={value}
|
|
key={`tab-trigger-${value}`}
|
|
className={cx(
|
|
"group",
|
|
"mr-1 px-4 py-1 rounded-t-sm transition",
|
|
"text-slate-500 hover:bg-slate-100 hover:bg-opacity-50 dark:text-slate-300 dark:hover:bg-slate-900 dark:hover:bg-opacity-40",
|
|
"radix-state-active:bg-slate-100 radix-state-active:bg-opacity-50 radix-state-active:dark:bg-slate-900 radix-state-active:dark:text-white"
|
|
)}
|
|
>
|
|
{label}
|
|
</TabsPrimitive.Trigger>
|
|
))}
|
|
</TabsPrimitive.List>
|
|
{children}
|
|
</TabsPrimitive.Root>
|
|
);
|
|
}
|
|
|
|
export const TabContent = React.forwardRef<
|
|
React.ElementRef<typeof TabsPrimitive.Content>,
|
|
ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
|
|
>((props, ref) => {
|
|
return <TabsPrimitive.TabsContent ref={ref} {...props} />;
|
|
});
|