@catalystsoftware/ui 1.0.5 → 1.0.6

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

@@ -1,744 +0,0 @@
-/**
-
-
-
-
-
-
-export function PopoverX({ popover = 'default', children, ...props }: any) {
-    switch (popover) {
-        case 'Closable':
-            break
-        default:
-            break;
-    }
-}
-
-const PopoverRatingsDemo = () => {
-  const totalReviews = Object.values(ratings).reduce((acc, count) => acc + count, 0)
-  const totalRating = Object.entries(ratings).reduce((acc, [star, count]) => acc + Number(star) * count, 0)
-  const averageRating = Number((totalRating / totalReviews || 0).toFixed(2))
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant='outline' size='icon'>
-          <StarIcon />
-          <span className='sr-only'>Ratings & reviews</span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className='w-80'>
-        <div className='grid gap-4'>
-          <div className='space-y-1'>
-            <div className='flex items-center gap-1'>
-              <span className='text-xl font-semibold'>{averageRating}</span>
-              <StarIcon className='size-5 fill-amber-500 stroke-amber-500 dark:fill-amber-400 dark:stroke-amber-400' />
-            </div>
-            <div className='text-sm font-medium'>Total {totalReviews} reviews</div>
-            <p className='text-muted-foreground text-sm'>All reviews are from genuine customers.</p>
-          </div>
-          <div className='grid'>
-            <div className='flex items-center justify-between'>
-              <Badge variant='secondary' className='rounded-sm'>
-                +6 this week
-              </Badge>
-              <a href='#' className='text-sm hover:underline'>
-                See all
-              </a>
-            </div>
-            <Separator className='my-2' />
-            <ul className='space-y-2'>
-              {Object.entries(ratings)
-                .reverse()
-                .map(([star, count]) => (
-                  <li key={star} className='flex items-center gap-2'>
-                    <span className='shrink-0 text-sm'>{star} star</span>
-                    <Progress value={(count / totalReviews) * 100} className='w-full' />
-                    <span className='shrink-0 text-sm'>{count.toString()}</span>
-                  </li>
-                ))}
-            </ul>
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-const PopoverDimensionsDemo = () => {
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant='outline' size='icon'>
-          <PencilRulerIcon />
-          <span className='sr-only'>Dimensions</span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className='w-80'>
-        <div className='grid gap-4'>
-          <div className='space-y-2'>
-            <h4 className='leading-none font-medium'>Dimensions</h4>
-            <p className='text-muted-foreground text-sm'>Set the dimensions for the layer.</p>
-          </div>
-          <div className='grid gap-2'>
-            <div className='grid grid-cols-3 items-center gap-4'>
-              <Label htmlFor='width'>Width</Label>
-              <Input id='width' defaultValue='100%' className='col-span-2 h-8' />
-            </div>
-            <div className='grid grid-cols-3 items-center gap-4'>
-              <Label htmlFor='maxWidth'>Max. width</Label>
-              <Input id='maxWidth' defaultValue='300px' className='col-span-2 h-8' />
-            </div>
-            <div className='grid grid-cols-3 items-center gap-4'>
-              <Label htmlFor='height'>Height</Label>
-              <Input id='height' defaultValue='25px' className='col-span-2 h-8' />
-            </div>
-            <div className='grid grid-cols-3 items-center gap-4'>
-              <Label htmlFor='maxHeight'>Max. height</Label>
-              <Input id='maxHeight' defaultValue='none' className='col-span-2 h-8' />
-            </div>
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-const PopoverPricingDemo = () => {
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant='outline' size='icon'>
-          <DollarSignIcon />
-          <span className='sr-only'>Pricing details</span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className='w-80'>
-        <div className='grid gap-2.5'>
-          <div className='flex items-center justify-between'>
-            <span className='text-lg font-semibold'>Enterprise Plan</span>
-            <span className='text-sm font-medium'>$49.99/month</span>
-          </div>
-          <p className='text-sm'>
-            Get unlimited access to all features including AI-powered analytics, custom branding, priority support, and
-            advanced team collaboration tools.
-          </p>
-          <div className='flex items-center gap-2'>
-            <Badge variant='destructive' className='rounded-sm px-1.5 py-px text-xs'>
-              Limited Offer
-            </Badge>
-            <span className='text-muted-foreground text-xs'>20% discount on annual plan</span>
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-const PopoverVolumeDemo = () => {
-  const [value, setValue] = useState([45])
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant='outline' size='icon'>
-          <Volume2Icon />
-          <span className='sr-only'>Volume control</span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className='w-80'>
-        <div className='space-y-3'>
-          <div className='flex items-center justify-between gap-2'>
-            <Label className='leading-5'>Volume</Label>
-            <output className='text-sm font-medium tabular-nums'>{value[0]}</output>
-          </div>
-          <div className='flex items-center gap-2'>
-            <VolumeXIcon className='size-4 shrink-0 opacity-60' />
-            <Slider value={value} onValueChange={setValue} aria-label='Volume slider' />
-            <Volume2Icon className='size-4 shrink-0 opacity-60' />
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-const PopoverAboutDemo = () => {
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant='outline' size='icon'>
-          <InfoIcon />
-          <span className='sr-only'>About Shadcn Studio</span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className='w-80'>
-        <div className='grid gap-4'>
-          <div className='space-y-1.5 text-center'>
-            <div className='text-lg font-semibold'>About Shadcn Studio</div>
-            <p className='text-muted-foreground text-sm'>
-              Welcome to Shadcn Studio — your toolkit for building sleek, customizable UI components with ease!
-            </p>
-          </div>
-          <Button size='sm' asChild>
-            <a
-              href='https://shadcnstudio.com/docs/getting-started/introduction'
-              target='_blank'
-              rel='noopener noreferrer'
-            >
-              Learn More
-            </a>
-          </Button>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-const PopoverDownloadDemo = () => {
-  const [isPaused, setIsPaused] = useState(false)
-  const [isCanceled, setIsCanceled] = useState(false)
-  const [value, setValue] = useState(0)
-  const [open, setOpen] = useState(false)
-  const [hasStarted, setHasStarted] = useState(false)
-
-  useEffect(() => {
-    if (open && !hasStarted && !isCanceled) {
-      setHasStarted(true)
-    }
-  }, [open, hasStarted, isCanceled])
-
-  useEffect(() => {
-    if (!hasStarted || isPaused || isCanceled) return
-
-    const timer = setInterval(() => {
-      setValue(prev => {
-        if (prev < 100) {
-          return Math.min(100, prev + Math.floor(Math.random() * 10) + 1)
-        } else {
-          clearInterval(timer)
-
-          return prev
-        }
-      })
-    }, 500)
-
-    return () => {
-      clearInterval(timer)
-    }
-  }, [open, isPaused, isCanceled, hasStarted])
-
-  const getText = () => {
-    if (isCanceled) return 'Download Canceled'
-    if (isPaused) return 'Download Paused'
-    if (value === 100) return 'Download Complete'
-
-    return 'Downloading File'
-  }
-
-  return (
-    <Popover onOpenChange={setOpen} open={open}>
-      <PopoverTrigger asChild>
-        <Button variant='outline' size='icon'>
-          <DownloadIcon />
-          <span className='sr-only'>Download File</span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className='w-80'>
-        <div className='grid gap-4'>
-          <div className='flex items-center gap-2'>
-            <div className='relative flex size-6 items-center justify-center'>
-              <span
-                className={cn('border-primary absolute inset-0 rounded-full border border-dashed', {
-                  'animate-spin [animation-duration:3s]': value < 100 && !isPaused && !isCanceled
-                })}
-              />
-              <DownloadIcon className='z-1 size-3' />
-            </div>
-            <span className='flex-1 text-sm font-medium'>{getText()}</span>
-            {!isCanceled && <span className='text-sm font-semibold'>{`${value}%`}</span>}
-          </div>
-          <Progress value={value} className='w-full' />
-          <div className='grid grid-cols-2 gap-2'>
-            <Button size='sm' onClick={() => setIsPaused(!isPaused)} disabled={value === 100 || isCanceled}>
-              {isPaused ? 'Resume' : 'Pause'}
-            </Button>
-            <Button
-              variant='secondary'
-              size='sm'
-              onClick={() => {
-                if (value < 100) {
-                  setValue(0)
-                  setIsCanceled(true)
-                  setHasStarted(false)
-                }
-
-                setOpen(false)
-              }}
-            >
-              Cancel
-            </Button>
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-const PopoverDeleteFileDemo = () => {
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant='outline' size='icon'>
-          <FileWarningIcon />
-          <span className='sr-only'>Delete File</span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className='w-80'>
-        <div className='flex flex-col items-center gap-4'>
-          <div className='flex aspect-square size-12 items-center justify-center rounded-full bg-red-500/10'>
-            <FileWarningIcon className='text-destructive size-6' />
-          </div>
-          <div className='space-y-2 text-center'>
-            <div className='font-semibold text-balance'>Are you sure you want to delete this file?</div>
-            <p className='text-muted-foreground text-sm'>
-              Deleting this file can affect your project and other files connection so keep in mind before making
-              decision
-            </p>
-          </div>
-          <div className='grid w-full grid-cols-2 gap-2'>
-            <Button variant='secondary' size='sm'>
-              Cancel
-            </Button>
-            <Button variant='destructive' size='sm'>
-              Delete File
-            </Button>
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-const PopoverFeedbackDemo = () => {
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant='outline' size='icon'>
-          <MessageCircleIcon />
-          <span className='sr-only'>Feedback</span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className='w-80'>
-        <div className='grid gap-2'>
-          <div className='font-medium'>Feedback</div>
-          <Textarea placeholder='Type your message here.' className='max-h-56' />
-          <div className='grid w-full grid-cols-2 gap-2'>
-            <Button size='sm'>Send</Button>
-            <Button variant='secondary' size='sm'>
-              Cancel
-            </Button>
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-const PopoverFilterDemo = () => {
-  const [selected, setSelected] = useState(['Most liked', 'Newest'])
-  const [price, setPrice] = useState([450])
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant='outline' size='icon'>
-          <FunnelPlusIcon />
-          <span className='sr-only'>Filter</span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent>
-        <div className='grid gap-4'>
-          <div className='flex items-center justify-between gap-2'>
-            <span className='font-medium'>Filter</span>
-            <Button
-              variant='secondary'
-              className='h-7 rounded-full px-2 py-1 text-xs'
-              onClick={() => {
-                setSelected(['Most liked', 'Newest'])
-                setPrice([450])
-              }}
-            >
-              Reset all
-            </Button>
-          </div>
-          <div className='flex flex-col gap-2'>
-            {filters.map((label, index) => (
-              <div key={index} className='flex items-center gap-2'>
-                <Checkbox
-                  id={`filter-${index + 1}`}
-                  checked={selected.includes(label)}
-                  onCheckedChange={checked =>
-                    setSelected(checked ? [...selected, label] : selected.filter(item => item !== label))
-                  }
-                />
-                <Label htmlFor={`filter-${index + 1}`}>{label}</Label>
-              </div>
-            ))}
-          </div>
-          <div className='grid gap-3'>
-            <Label>Price range</Label>
-            <div className='space-y-2'>
-              <Slider value={price} onValueChange={setPrice} step={50} max={1000} aria-label='Price range' />
-              <span className='text-muted-foreground flex w-full items-center justify-between gap-1 text-xs font-medium'>
-                <span>0</span>
-                <span>500</span>
-                <span>1000</span>
-              </span>
-            </div>
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-const useDebounce = (value: string, delay: number = 300) => {
-  const [debouncedValue, setDebouncedValue] = useState(value)
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setDebouncedValue(value)
-    }, delay)
-
-    return () => {
-      clearTimeout(timer)
-    }
-  }, [value, delay])
-
-  return debouncedValue
-}
-
-const PopoverSearchDemo = () => {
-  const [inputValue, setInputValue] = useState('')
-  const [isLoading, setIsLoading] = useState(false)
-  const debouncedSearch = useDebounce(inputValue)
-  const [filteredUsers, setFilteredUsers] = useState(users)
-
-  // Handle loading state when input changes
-  useEffect(() => {
-    if (inputValue) {
-      setIsLoading(true)
-    } else {
-      setIsLoading(false)
-    }
-  }, [inputValue])
-
-  // Apply filtering after debounce and update loading state
-  useEffect(() => {
-    if (debouncedSearch.trim() === '') {
-      setFilteredUsers(users)
-      setIsLoading(false)
-    } else {
-      const searchTerm = debouncedSearch.toLowerCase()
-
-      const filtered = users.filter(user => user.name.toLowerCase().includes(searchTerm))
-
-      setFilteredUsers(filtered)
-      setIsLoading(false)
-    }
-  }, [debouncedSearch])
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant='outline' size='icon'>
-          <SearchIcon />
-          <span className='sr-only'>Search users</span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className='w-80'>
-        <div className='grid gap-4'>
-          <div className='relative'>
-            <div className='text-muted-foreground pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center pl-3 peer-disabled:opacity-50'>
-              <SearchIcon className='size-4' />
-              <span className='sr-only'>Search</span>
-            </div>
-            <Input
-              type='search'
-              placeholder='Search users'
-              value={inputValue}
-              onChange={e => setInputValue(e.target.value)}
-              className='peer px-9 [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none'
-            />
-            {isLoading && (
-              <div className='text-muted-foreground pointer-events-none absolute inset-y-0 right-0 flex items-center justify-center pr-3 peer-disabled:opacity-50'>
-                <LoaderCircleIcon className='size-4 animate-spin' />
-                <span className='sr-only'>Loading...</span>
-              </div>
-            )}
-          </div>
-          <ul className='space-y-2'>
-            {filteredUsers.length > 0 ? (
-              filteredUsers.map((user, index) => (
-                <li key={index} className='flex items-center gap-2'>
-                  <Avatar className='size-6'>
-                    <AvatarImage src={user.image} alt={user.name} />
-                    <AvatarFallback className='text-xs'>{user.fallback}</AvatarFallback>
-                  </Avatar>
-                  <div className='flex-1 text-sm font-medium'>{user.name}</div>
-                  {user.notifications && (
-                    <span className='text-muted-foreground text-xs'>{`${user.notifications} Notification${user.notifications > 1 ? 's' : ''}`}</span>
-                  )}
-                </li>
-              ))
-            ) : (
-              <li className='py-2 text-center text-sm'>No users found</li>
-            )}
-          </ul>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-const PopoverNotificationsDemo = () => {
-  const [readMessages, setReadMessages] = useState([3])
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant='outline' size='icon'>
-          <BellIcon />
-          <span className='sr-only'>Notifications</span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className='w-80 p-0'>
-        <div className='grid'>
-          <div className='flex items-center justify-between gap-2 px-4 py-2.5'>
-            <span className='font-medium'>Notifications</span>
-            <Button
-              variant='secondary'
-              className='h-7 rounded-full px-2 py-1 text-xs'
-              onClick={() => setReadMessages(notifications.map(item => item.id))}
-            >
-              Mark as all read
-            </Button>
-          </div>
-          <Separator className='' />
-          <ul className='grid gap-4 p-2'>
-            {notifications.map(item => (
-              <li
-                key={item.id}
-                className='hover:bg-accent flex items-start gap-2 rounded-lg px-2 py-1.5'
-                onClick={() => setReadMessages([...readMessages, item.id])}
-              >
-                <Avatar className='rounded-lg'>
-                  <AvatarImage src={item.image} alt={item.fallback} />
-                  <AvatarFallback className='rounded-lg text-xs'>{item.fallback}</AvatarFallback>
-                </Avatar>
-                <div className='flex-1 space-y-1'>
-                  <div className='text-sm font-medium'>{item.message}</div>
-                  <p className='text-muted-foreground text-xs'>{`${item.time} ago`}</p>
-                </div>
-                {!readMessages.includes(item.id) && (
-                  <CircleIcon className='fill-primary text-primary size-2 self-center' />
-                )}
-              </li>
-            ))}
-          </ul>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-const PopoverAboutHimalayasDemo = () => {
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant='outline' size='icon'>
-          <MapPinIcon />
-          <span className='sr-only'>About Himalayas</span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className='w-85 p-0'>
-        <div className='flex'>
-          <div className='space-y-2 p-4'>
-            <p className='font-medium'>About Himalayas</p>
-            <p className='text-muted-foreground text-xs'>
-              The Great Himalayan mountain ranges in the Indian sub-continent region.{' '}
-            </p>
-            <a
-              href='https://en.wikipedia.org/wiki/Himalayas'
-              target='_blank'
-              rel='noopener noreferrer'
-              className='flex w-fit text-xs hover:underline'
-            >
-              Read more
-              <ChevronRightIcon className='size-4' />
-            </a>
-          </div>
-          <img
-            src='https://lp-cms-production.imgix.net/2021-01/GettyRF_450207051.jpg?height=136'
-            alt='the himalayas'
-            className='h-34 w-2/5 rounded-r-md object-cover'
-          />
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-const PopoverSlideInLeftDemo = () => {
-  const [copied, setCopied] = useState<boolean>(false)
-
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText('SUMMER25OFF')
-      setCopied(true)
-      setTimeout(() => setCopied(false), 1500)
-    } catch (err) {
-      console.error('Failed to copy text: ', err)
-    }
-  }
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant='outline'>Slide-in from left</Button>
-      </PopoverTrigger>
-      <PopoverContent className='data-[state=open]:slide-in-from-left-20 data-[state=closed]:slide-out-to-left-20 data-[state=open]:slide-in-from-top-0 data-[state=closed]:slide-out-to-top-0 data-[state=closed]:zoom-out-100 data-[state=open]:zoom-in-100 w-80 duration-400'>
-        <div className='flex flex-col items-center gap-4'>
-          <div className='space-y-1 text-center'>
-            <div className='text-lg font-semibold'>Summer Sale Discount</div>
-            <p className='text-sm'>Scan this code at checkout for 25% off</p>
-          </div>
-          <div className='aspect-square rounded-xl border p-2'>
-            <img
-              src='https://cdn.shadcnstudio.com/ss-assets/components/popover/qr-code.png?height=152'
-              alt='Discount QR Code'
-              className='size-38 rounded-md'
-            />
-          </div>
-          <div className='flex w-full items-center gap-1.5'>
-            <Separator className='flex-1' />
-            <span className='text-muted-foreground text-xs'>or use coupon code</span>
-            <Separator className='flex-1' />
-          </div>
-          <div className='flex w-full gap-2'>
-            <Input
-              type='text'
-              placeholder='Discount code'
-              defaultValue='SUMMER25OFF'
-              className='disabled:bg-muted'
-              disabled
-            />
-            <Button variant='outline' size='icon' className='relative' onClick={handleCopy}>
-              <span className={cn('transition-all', copied ? 'scale-100 opacity-100' : 'scale-0 opacity-0')}>
-                <CheckIcon className='stroke-green-600 dark:stroke-green-400' />
-              </span>
-              <span
-                className={cn(
-                  'absolute left-2.25 transition-all',
-                  copied ? 'scale-0 opacity-0' : 'scale-100 opacity-100'
-                )}
-              >
-                <CopyIcon />
-              </span>
-            </Button>
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-const PopoverSlideInBottomDemo = () => {
-  const id = useId()
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant='outline'>Slide-in from bottom</Button>
-      </PopoverTrigger>
-      <PopoverContent className='data-[state=open]:slide-in-from-bottom-20 data-[state=closed]:slide-out-to-bottom-20 data-[state=closed]:zoom-out-100 data-[state=open]:zoom-in-100 w-80 duration-400'>
-        <div className='grid gap-4'>
-          <div className='space-y-1'>
-            <div className='font-medium'>Share to team members</div>
-            <p className='text-muted-foreground text-sm'>
-              Give your team members access to this project and start collaborating in real time
-            </p>
-          </div>
-          <div className='w-full space-y-1.5'>
-            <Label htmlFor={id} className='text-muted-foreground text-xs font-normal'>
-              Email address
-            </Label>
-            <div className='flex gap-2'>
-              <Input id={id} type='email' placeholder='example@xyz.com' className='h-8' />
-              <Button type='submit' size='sm'>
-                Share invite
-              </Button>
-            </div>
-          </div>
-          <div className='space-y-1.5'>
-            <Label className='text-muted-foreground text-xs font-normal'>Team members</Label>
-            <ul className='grid gap-2'>
-              {members.map((member, index) => (
-                <li key={index} className='flex items-center gap-3'>
-                  <Checkbox id={`member-${index + 1}`} />
-                  <Label htmlFor={`member-${index + 1}`} className='flex flex-1 items-center gap-2'>
-                    <div className='flex flex-1 items-center gap-2'>
-                      <Avatar className='size-6'>
-                        <AvatarImage src={member.image} alt={member.name} />
-                        <AvatarFallback className='text-xs'>{member.fallback}</AvatarFallback>
-                      </Avatar>
-                      <span className='text-sm font-medium'>{member.name}</span>
-                    </div>
-                    <span className='text-muted-foreground text-xs'>{member.designation}</span>
-                  </Label>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-const PopoverZoomInDemo = () => {
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant='outline'>Zoom in</Button>
-      </PopoverTrigger>
-      <PopoverContent className='data-[state=open]:!zoom-in-0 data-[state=closed]:!zoom-out-0 origin-center duration-400'>
-        <div className='grid gap-4'>
-          <div className='flex flex-col items-center gap-2'>
-            <Avatar className='size-20'>
-              <AvatarImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' alt='Howard Lloyd' />
-              <AvatarFallback className='text-xs'>HL</AvatarFallback>
-            </Avatar>
-            <div className='flex flex-col items-center text-center'>
-              <p className='text-lg font-semibold'>Howard Lloyd</p>
-              <span className='text-sm'>@iamhoward</span>
-            </div>
-          </div>
-          <div className='from-border/20 via-border to-border/20 mx-auto h-px w-45 bg-gradient-to-r' />
-          <p className='text-center text-sm italic'>
-            Product Manager @oliviasparks, passionate about building user-centric solutions that solve real problems.
-          </p>
-          <div className='flex justify-center gap-2 text-sm'>
-            <div className='font-medium'>
-              512 <span className='text-muted-foreground font-normal'>followers</span>
-            </div>
-            <div className='font-medium'>
-              128 <span className='text-muted-foreground font-normal'>following</span>
-            </div>
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-} */