Animated Border

import { cn } from '@/lib/utils'

interface BorderProps {
  children?: React.ReactNode
  className?: string
  from?: string
  to?: string
  stop?: string
}

export const AnimatedBorder = ({
  children,
  className,
  from,
  to,
  stop
}: BorderProps) => {
  return (
    <div
      className={cn(
        'relative size-full overflow-hidden rounded-[calc(.75em+1.5px)] border p-[1px]',
        className
      )}
    >
      <div
        style={{
          backgroundImage: `conic-gradient(from 90deg at 50% 50%,${from} 0%,${to} 50%,${stop} 100%)`,
        }}
        className='absolute inset-[-1000%] animate-[spin_3s_linear_infinite]'
      />
      {children}
    </div>
  )
}