@catalystsoftware/ui 1.0.5 → 1.0.7

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

@@ -1,839 +0,0 @@
-/**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>
-  )
-} */