@catalystsoftware/ui 1.0.0

package/components/catalyst-ui/x/tabs-x.tsx

@@ -0,0 +1,839 @@
+/**import { motion, AnimatePresence } from "framer-motion"
+import { useState, useRef, useLayoutEffect } from "react"
+import {  cn, Tabs,Badge,HoverCardContent,TooltipContent, TabsList, TabsTrigger, TabsContent, TooltipTrigger, Tooltip,  } from "~/components/catalyst-ui"
+
+
+
+const TabsDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore'>
+        <TabsList>
+          {tabs.map(tab => (
+            <TabsTrigger key={tab.value} value={tab.value}>
+              {tab.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const TabsOutlinedDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='gap-4'>
+        <TabsList className='bg-background gap-1 border p-1'>
+          {tabs.map(tab => (
+            <TabsTrigger
+              key={tab.value}
+              value={tab.value}
+              className='data-[state=active]:bg-primary dark:data-[state=active]:bg-primary data-[state=active]:text-primary-foreground dark:data-[state=active]:text-primary-foreground dark:data-[state=active]:border-transparent'
+            >
+              {tab.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const TabsWithIconDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='gap-4'>
+        <TabsList>
+          {tabs.map(({ icon: Icon, name, value }) => (
+            <TabsTrigger key={value} value={value} className='flex items-center gap-1 px-2.5 sm:px-3'>
+              <Icon />
+              {name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const TabsWithBadgeDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='gap-4'>
+        <TabsList>
+          {tabs.map(tab => (
+            <TabsTrigger key={tab.value} value={tab.value} className='flex items-center gap-1 px-2.5 sm:px-3'>
+              {tab.name}
+              <Badge className='h-5 min-w-5 px-1 tabular-nums'>{tab.count}</Badge>
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const TabsWithVerticalIconDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='gap-4'>
+        <TabsList className='h-full'>
+          {tabs.map(({ icon: Icon, name, value }) => (
+            <TabsTrigger key={value} value={value} className='flex flex-col items-center gap-1 px-2.5 sm:px-3'>
+              <Icon />
+              {name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const TabsWithVerticalBadgeDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='gap-4'>
+        <TabsList className='h-full'>
+          {tabs.map(tab => (
+            <TabsTrigger key={tab.value} value={tab.value} className='flex flex-col items-center gap-1 px-2.5 sm:px-3'>
+              <Badge className='h-5 min-w-5 px-1 tabular-nums'>{tab.count}</Badge>
+              {tab.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const TabsWithTooltipDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='gap-4'>
+        <TabsList className='h-full'>
+          {tabs.map(({ icon: Icon, name, value }) => (
+            <Tooltip key={value}>
+              <TooltipTrigger asChild>
+                <span>
+                  <TabsTrigger
+                    value={value}
+                    className='flex flex-col items-center gap-1 px-2.5 sm:px-3'
+                    aria-label='tab-trigger'
+                  >
+                    <Icon />
+                  </TabsTrigger>
+                </span>
+              </TooltipTrigger>
+              <TooltipContent className='px-2 py-1 text-xs'>{name}</TooltipContent>
+            </Tooltip>
+          ))}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const TabsSoftPillsDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='gap-4'>
+        <TabsList className='bg-background'>
+          {tabs.map(tab => (
+            <TabsTrigger
+              key={tab.value}
+              value={tab.value}
+              className='data-[state=active]:bg-primary/20 data-[state=active]:text-primary dark:data-[state=active]:text-primary dark:data-[state=active]:bg-primary/20 data-[state=active]:shadow-none dark:data-[state=active]:border-transparent'
+            >
+              {tab.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const TabsSolidPillsDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='gap-4'>
+        <TabsList className='bg-background'>
+          {tabs.map(tab => (
+            <TabsTrigger
+              key={tab.value}
+              value={tab.value}
+              className='data-[state=active]:bg-primary dark:data-[state=active]:bg-primary data-[state=active]:text-primary-foreground dark:data-[state=active]:text-primary-foreground dark:data-[state=active]:border-transparent'
+            >
+              {tab.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const TabsOutlinedPillsDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='gap-4'>
+        <TabsList className='bg-background'>
+          {tabs.map(tab => (
+            <TabsTrigger
+              key={tab.value}
+              value={tab.value}
+              className='data-[state=active]:border-border data-[state=active]:shadow-none'
+            >
+              {tab.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const TabsUnderlineDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='gap-4'>
+        <TabsList className='bg-background rounded-none border-b p-0'>
+          {tabs.map(tab => (
+            <TabsTrigger
+              key={tab.value}
+              value={tab.value}
+              className='bg-background data-[state=active]:border-primary dark:data-[state=active]:border-primary h-full rounded-none border-0 border-b-2 border-transparent data-[state=active]:shadow-none'
+            >
+              {tab.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const TabsSharpDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='gap-4'>
+        <TabsList className='bg-background rounded-none border-b p-0'>
+          {tabs.map(tab => (
+            <TabsTrigger
+              key={tab.value}
+              value={tab.value}
+              className='bg-background data-[state=active]:border-primary dark:data-[state=active]:border-primary h-full rounded-none border-b-2 border-transparent data-[state=active]:shadow-none'
+            >
+              {tab.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const TabsLiftedDemo = () => {
+  return (
+    <div>
+      <Tabs defaultValue='explore' className='gap-4'>
+        <TabsList className='bg-background justify-start rounded-none border-b p-0'>
+          {tabs.map(tab => (
+            <TabsTrigger
+              key={tab.value}
+              value={tab.value}
+              className='bg-background border-b-border dark:data-[state=active]:bg-background data-[state=active]:border-border data-[state=active]:border-b-background h-full rounded-none rounded-t border border-transparent data-[state=active]:-mb-0.5 data-[state=active]:shadow-none dark:border-b-0 dark:data-[state=active]:-mb-0.5'
+            >
+              {tab.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const TabsOverflowDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='gap-1'>
+          <TabsList className='mb-3'>
+            {tabs.map(tab => (
+              <TabsTrigger key={tab.value} value={tab.value}>
+                {tab.name}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const TabsVerticalDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='flex-row'>
+        <TabsList className='h-full flex-col'>
+          {tabs.map(tab => (
+            <TabsTrigger key={tab.value} value={tab.value} className='w-full'>
+              {tab.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const TabsVerticalUnderlineDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='flex-row'>
+        <TabsList className='bg-background h-full flex-col rounded-none border-l p-0'>
+          {tabs.map(tab => (
+            <TabsTrigger
+              key={tab.value}
+              value={tab.value}
+              className='bg-background data-[state=active]:border-primary dark:data-[state=active]:border-primary h-full w-full justify-start rounded-none border-0 border-l-2 border-transparent data-[state=active]:shadow-none'
+            >
+              {tab.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const TabsSoftVerticalDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='flex-row'>
+        <TabsList className='bg-background h-full flex-col'>
+          {tabs.map(tab => (
+            <TabsTrigger
+              key={tab.value}
+              value={tab.value}
+              className='data-[state=active]:bg-primary/20 data-[state=active]:text-primary dark:data-[state=active]:text-primary dark:data-[state=active]:bg-primary/20 w-full data-[state=active]:shadow-none dark:data-[state=active]:border-transparent'
+            >
+              {tab.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const TabsVerticalSolidDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='flex-row'>
+        <TabsList className='bg-background h-full flex-col'>
+          {tabs.map(tab => (
+            <TabsTrigger
+              key={tab.value}
+              value={tab.value}
+              className='data-[state=active]:bg-primary dark:data-[state=active]:bg-primary data-[state=active]:text-primary-foreground dark:data-[state=active]:text-primary-foreground w-full dark:data-[state=active]:border-transparent'
+            >
+              {tab.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const TabsVerticalSharpDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='flex-row'>
+        <TabsList className='bg-background h-full flex-col rounded-none border-l p-0'>
+          {tabs.map(tab => (
+            <TabsTrigger
+              key={tab.value}
+              value={tab.value}
+              className='bg-background data-[state=active]:border-primary dark:data-[state=active]:border-primary h-full w-full justify-start rounded-none border-l-3 border-transparent data-[state=active]:shadow-none'
+            >
+              {tab.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const TabsVerticalLinedDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='flex-row'>
+        <TabsList className='bg-background h-full flex-col rounded-none p-0'>
+          {tabs.map(tab => (
+            <TabsTrigger
+              key={tab.value}
+              value={tab.value}
+              className='bg-background data-[state=active]:border-primary dark:data-[state=active]:border-primary h-full w-full justify-start rounded-none border-0 border-l-2 border-transparent data-[state=active]:shadow-none'
+            >
+              {tab.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const TabsVerticalWithTooltipDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='flex-row gap-4'>
+        <TabsList className='h-full flex-col gap-2'>
+          {tabs.map(({ icon: Icon, name, value }) => (
+            <Tooltip key={value}>
+              <TooltipTrigger asChild>
+                <span>
+                  <TabsTrigger
+                    value={value}
+                    className='flex w-full flex-col items-center gap-1'
+                    aria-label='tab-trigger'
+                  >
+                    <Icon />
+                  </TabsTrigger>
+                </span>
+              </TooltipTrigger>
+              <TooltipContent className='px-2 py-1 text-xs' side='left'>
+                {name}
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const TabsVerticalWithIconDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='flex-row'>
+        <TabsList className='h-full flex-col'>
+          {tabs.map(({ icon: Icon, name, value }) => (
+            <TabsTrigger
+              key={value}
+              value={value}
+              className='flex w-full items-center justify-start gap-1.5 px-2.5 sm:px-3'
+            >
+              <Icon />
+              {name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const TabsVerticalWithBadgeDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='flex-row'>
+        <TabsList className='h-full flex-col gap-1.5'>
+          {tabs.map(tab => (
+            <TabsTrigger
+              key={tab.value}
+              value={tab.value}
+              className='flex w-full items-center justify-start gap-1.5 px-2.5 sm:px-3'
+            >
+              {tab.name}
+              <Badge className='h-5 min-w-5 px-1 tabular-nums'>{tab.count}</Badge>
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const TabsVerticalOutlineDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='flex-row'>
+        <TabsList className='bg-background h-full flex-col'>
+          {tabs.map(tab => (
+            <TabsTrigger
+              key={tab.value}
+              value={tab.value}
+              className='data-[state=active]:border-border w-full data-[state=active]:shadow-none'
+            >
+              {tab.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const TabsCustomDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='gap-4'>
+        <TabsList className='bg-background gap-1'>
+          {tabs.map(tab => (
+            <TabsTrigger
+              key={tab.value}
+              value={tab.value}
+              className='data-[state=active]:bg-primary dark:data-[state=active]:bg-primary data-[state=active]:text-primary-foreground dark:data-[state=active]:text-primary-foreground text-muted-foreground hover:text-foreground hover:bg-muted transition-colors duration-300 hover:border dark:data-[state=active]:border-transparent'
+            >
+              {tab.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const TabsCustomUnderlineDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='gap-4'>
+        <TabsList className='bg-background rounded-none border-b p-0'>
+          {tabs.map(tab => (
+            <TabsTrigger
+              key={tab.value}
+              value={tab.value}
+              className='bg-background data-[state=active]:border-primary dark:data-[state=active]:border-primary data-[state=active]:text-foreground text-muted-foreground dark:text-muted-foreground hover:text-foreground dark:hover:text-foreground hover:border-muted-foreground/30 h-full rounded-none border-0 border-b-2 border-transparent data-[state=active]:shadow-none'
+            >
+              {tab.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const AnimatedTabsDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='gap-4'>
+        <TabsList>
+          {tabs.map(tab => (
+            <TabsTrigger key={tab.value} value={tab.value}>
+              {tab.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        <TabsContents className='bg-background mx-1 -mt-2 mb-1 h-full rounded-sm'>
+          {tabs.map(tab => (
+            <TabsContent key={tab.value} value={tab.value}>
+              <p className='text-muted-foreground text-sm'>{tab.content}</p>
+            </TabsContent>
+          ))}
+        </TabsContents>
+      </Tabs>
+
+      <p className='text-muted-foreground mt-4 text-center text-xs'>
+        Inspired by{' '}
+        <a
+          className='hover:text-foreground underline'
+          href='https://animate-ui.com/docs/components/tabs'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          Animate UI
+        </a>
+      </p>
+    </div>
+  )
+}
+
+const ExpandableTabsDemo = () => {
+  const [activeTab, setActiveTab] = useState('explore')
+
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs value={activeTab} onValueChange={setActiveTab} className='gap-4'>
+        <TabsList className='h-auto gap-2 rounded-xl p-1'>
+          {tabs.map(({ icon: Icon, name, value }) => {
+            const isActive = activeTab === value
+
+            return (
+              <motion.div
+                key={value}
+                layout
+                className={cn(
+                  'flex h-8 items-center justify-center overflow-hidden rounded-md',
+                  isActive ? 'flex-1' : 'flex-none'
+                )}
+                onClick={() => setActiveTab(value)}
+                initial={false}
+                animate={{
+                  width: isActive ? 120 : 32
+                }}
+                transition={{
+                  type: 'tween',
+                  stiffness: 400,
+                  damping: 25
+                }}
+              >
+                <TabsTrigger value={value} asChild>
+                  <motion.div
+                    className='flex h-8 w-full items-center justify-center'
+                    animate={{ filter: 'blur(0px)' }}
+                    exit={{ filter: 'blur(2px)' }}
+                    transition={{ duration: 0.25, ease: 'easeOut' }}
+                  >
+                    <Icon className='aspect-square size-4 shrink-0' />
+                    <AnimatePresence initial={false}>
+                      {isActive && (
+                        <motion.span
+                          className='font-medium max-sm:hidden'
+                          initial={{ opacity: 0, scaleX: 0.8 }}
+                          animate={{ opacity: 1, scaleX: 1 }}
+                          transition={{ duration: 0.25, ease: 'easeOut' }}
+                          style={{ originX: 0 }}
+                        >
+                          {name}
+                        </motion.span>
+                      )}
+                    </AnimatePresence>
+                  </motion.div>
+                </TabsTrigger>
+              </motion.div>
+            )
+          })}
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+const AnimatedUnderlineTabsDemo = () => {
+  const [activeTab, setActiveTab] = useState('explore')
+  const tabRefs = useRef<(HTMLButtonElement | null)[]>([])
+  const [underlineStyle, setUnderlineStyle] = useState({ left: 0, width: 0 })
+
+  useLayoutEffect(() => {
+    const activeIndex = tabs.findIndex(tab => tab.value === activeTab)
+    const activeTabElement = tabRefs.current[activeIndex]
+
+    if (activeTabElement) {
+      const { offsetLeft, offsetWidth } = activeTabElement
+
+      setUnderlineStyle({
+        left: offsetLeft,
+        width: offsetWidth
+      })
+    }
+  }, [activeTab])
+
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs value={activeTab} onValueChange={setActiveTab} className='gap-4'>
+        <TabsList className='bg-background relative rounded-none border-b p-0'>
+          {tabs.map((tab, index) => (
+            <TabsTrigger
+              key={tab.value}
+              value={tab.value}
+              ref={el => {
+                tabRefs.current[index] = el
+              }}
+              className='bg-background dark:data-[state=active]:bg-background relative z-10 rounded-none border-0 data-[state=active]:shadow-none'
+            >
+              {tab.name}
+            </TabsTrigger>
+          ))}
+
+          <motion.div
+            className='bg-primary absolute bottom-0 z-20 h-0.5'
+            layoutId='underline'
+            style={{
+              left: underlineStyle.left,
+              width: underlineStyle.width
+            }}
+            transition={{
+              type: 'spring',
+              stiffness: 400,
+              damping: 40
+            }}
+          />
+        </TabsList>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.value} value={tab.value}>
+            <p className='text-muted-foreground text-sm'>{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+} */