Add Tabs navigation

lib/experimental/Navigation/Tabs/index.stories.tsx

@@ -0,0 +1,60 @@
+import { action } from "@storybook/addon-actions"
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { Tabs } from "."
+
+const meta: Meta<typeof Tabs> = {
+  component: Tabs,
+  tags: ["autodocs"],
+  argTypes: {
+    secondary: {
+      control: "boolean",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Tabs>
+
+const tabItems = [
+  { label: "Overview", link: "/overview" },
+  { label: "Courses", link: "/courses" },
+  { label: "Categories", link: "/categories" },
+  { label: "Catalog", link: "/catalog" },
+  { label: "Requests", link: "/requests" },
+]
+
+const TabsExample = ({ secondary = false }: { secondary?: boolean }) => {
+  const [activeTab, setActiveTab] = useState("Overview")
+
+  return (
+    <div onClick={(e) => e.preventDefault()}>
+      <Tabs
+        tabs={tabItems}
+        activeTab={activeTab}
+        onTabChange={(tab) => {
+          setActiveTab(tab.label)
+          action("Tab changed")(tab)
+        }}
+        secondary={secondary}
+      />
+      <p className="mt-4 flex h-full min-h-60 items-center justify-center rounded-lg bg-f1-background-secondary/50 p-4 text-f1-foreground-secondary">
+        {activeTab}
+      </p>
+    </div>
+  )
+}
+
+export const Primary: Story = {
+  args: {
+    secondary: false,
+  },
+  render: (args) => <TabsExample {...args} />,
+}
+
+export const Secondary: Story = {
+  args: {
+    secondary: true,
+  },
+  render: (args) => <TabsExample {...args} />,
+}

lib/experimental/Navigation/Tabs/index.tsx

@@ -0,0 +1,36 @@
+import { TabNavigation, TabNavigationLink } from "@/ui/tab-navigation"
+
+interface TabItem {
+  label: string
+  link: string
+}
+
+interface TabsProps {
+  tabs: TabItem[]
+  activeTab: string
+  onTabChange: (tab: TabItem) => void
+  secondary?: boolean
+}
+
+export function Tabs({
+  tabs,
+  activeTab,
+  onTabChange,
+  secondary = false,
+}: TabsProps) {
+  return (
+    <TabNavigation secondary={secondary}>
+      {tabs.map((tab) => (
+        <TabNavigationLink
+          key={tab.label}
+          active={activeTab === tab.label}
+          onClick={() => onTabChange(tab)}
+          href={tab.link}
+          secondary={secondary}
+        >
+          {tab.label}
+        </TabNavigationLink>
+      ))}
+    </TabNavigation>
+  )
+}

lib/ui/tab-navigation.tsx

@@ -0,0 +1,137 @@
+import { cn } from "@/lib/utils"
+import * as NavigationMenuPrimitives from "@radix-ui/react-navigation-menu"
+import { cva, type VariantProps } from "class-variance-authority"
+import { motion } from "framer-motion"
+import * as React from "react"
+
+function getSubtree(
+  options: { asChild: boolean | undefined; children: React.ReactNode },
+  content: React.ReactNode | ((children: React.ReactNode) => React.ReactNode)
+) {
+  const { asChild, children } = options
+  if (!asChild)
+    return typeof content === "function" ? content(children) : content
+
+  const firstChild = React.Children.only(children) as React.ReactElement
+  return React.cloneElement(firstChild, {
+    children:
+      typeof content === "function"
+        ? content(firstChild.props.children)
+        : content,
+  })
+}
+
+const tabNavigationVariants = cva(
+  "flex items-center justify-start gap-1 overflow-x-auto whitespace-nowrap border-b border-b-f1-border-secondary px-6 py-3 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+  {
+    variants: {
+      secondary: {
+        true: "bg-f1-background-secondary/25",
+        false: "bg-f1-background-transparent",
+      },
+    },
+    defaultVariants: {
+      secondary: false,
+    },
+  }
+)
+
+interface TabNavigationProps
+  extends React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitives.Root>,
+    VariantProps<typeof tabNavigationVariants> {}
+
+const TabNavigation = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitives.Root>,
+  TabNavigationProps
+>(({ className, children, secondary, ...props }, forwardedRef) => (
+  <NavigationMenuPrimitives.Root ref={forwardedRef} {...props} asChild={false}>
+    <NavigationMenuPrimitives.List
+      className={cn(tabNavigationVariants({ secondary }), className)}
+    >
+      {children}
+    </NavigationMenuPrimitives.List>
+  </NavigationMenuPrimitives.Root>
+))
+
+TabNavigation.displayName = "TabNavigation"
+
+const tabNavigationLinkVariants = cva(
+  "flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 font-medium transition-all",
+  {
+    variants: {
+      secondary: {
+        true: "bg-f1-background/60 group-hover:border-f1-border group-data-[active=true]:border-f1-border group-data-[active=true]:text-f1-foreground",
+        false:
+          "bg-f1-background-transparent group-hover:bg-f1-background-secondary group-hover:text-f1-foreground group-data-[active=true]:bg-f1-background-secondary group-data-[active=true]:text-f1-foreground",
+      },
+      disabled: {
+        true: "pointer-events-none text-f1-foreground-disabled",
+      },
+    },
+    defaultVariants: {
+      secondary: false,
+      disabled: false,
+    },
+  }
+)
+
+interface TabNavigationLinkProps
+  extends Omit<
+      React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitives.Link>,
+      "onSelect"
+    >,
+    VariantProps<typeof tabNavigationLinkVariants> {
+  active?: boolean
+}
+
+const TabNavigationLink = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitives.Link>,
+  TabNavigationLinkProps
+>(
+  (
+    { asChild, disabled, active, className, children, secondary, ...props },
+    forwardedRef
+  ) => (
+    <NavigationMenuPrimitives.Item className="flex">
+      <NavigationMenuPrimitives.Link
+        data-active={active ? "true" : undefined}
+        aria-disabled={disabled || undefined}
+        className={cn(
+          "group relative flex shrink-0 select-none items-center justify-center rounded-md no-underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-f1-ring focus-visible:ring-offset-1",
+          disabled ? "pointer-events-none" : ""
+        )}
+        ref={forwardedRef}
+        onSelect={() => {}}
+        asChild={asChild}
+        {...props}
+      >
+        {getSubtree({ asChild, children }, (children) => (
+          <span
+            className={cn(
+              "border border-solid border-transparent text-f1-foreground-secondary",
+              tabNavigationLinkVariants({ secondary, disabled }),
+              className
+            )}
+          >
+            {children}
+            {active && !secondary && (
+              <motion.div
+                layoutId="underline"
+                className="absolute inset-x-0 -bottom-3 h-px bg-f1-background-bold"
+                transition={{
+                  type: "spring",
+                  bounce: 0.2,
+                  duration: 0.5,
+                }}
+              />
+            )}
+          </span>
+        ))}
+      </NavigationMenuPrimitives.Link>
+    </NavigationMenuPrimitives.Item>
+  )
+)
+
+TabNavigationLink.displayName = "TabNavigationLink"
+
+export { TabNavigation, TabNavigationLink }