diff --git a/src/components/primitives/Tabs.tsx b/src/components/primitives/Tabs.tsx index 8c8923ee..6c10178d 100644 --- a/src/components/primitives/Tabs.tsx +++ b/src/components/primitives/Tabs.tsx @@ -2,12 +2,12 @@ import { Link, useLocation } from "@remix-run/react"; import type { ReactNode } from "react"; import { type VariantProps, tv } from "tailwind-variants"; +import { Container } from "../.."; import useThemableProps from "../../hooks/theming/useThemableProps"; import { mergeClass } from "../../utils/css"; import type { Component, Styled, Themable } from "../../utils/types"; import Group from "../extenders/Group"; import EventBlocker from "./EventBlocker"; -import { Container } from "../.."; export const tabsStyles = tv( { @@ -79,7 +79,7 @@ export const tabsStyles = tv( size: "md", }, }, - { twMerge: false } + { twMerge: false }, ); type TabsStyleProps = VariantProps; @@ -99,15 +99,7 @@ export type TabsProps = Component< HTMLButtonElement >; -export default function Tabs({ - look, - size, - to, - theme, - className, - tabs = [], - ...props -}: TabsProps) { +export default function Tabs({ look, size, to, theme, className, tabs = [], ...props }: TabsProps) { const themeVars = useThemableProps(props); const styleProps = tabsStyles({ look, size }); const location = useLocation(); @@ -121,7 +113,7 @@ export default function Tabs({ - {tabs.map((tab) => { + {tabs.map(tab => { return ( <> {tab.link ? ( @@ -129,13 +121,7 @@ export default function Tabs({ + className={mergeClass(styleProps, base(), className, location.pathname === tab.link && active())}> {tab.label} @@ -143,15 +129,9 @@ export default function Tabs({ )}