Featured Icon

import FeaturedIcon from '@/components/ui/featured-icon.tsx'

export default function Example() {
  return (
    <div className="p-6">
      <FeaturedIcon />
    </div>
  )
}

import * as React from 'react'

import { cva, type VariantProps } from 'class-variance-authority'

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

const featuredIconVariants = cva(
  'bg-primary/10 text-primary inline-flex shrink-0 items-center justify-center border-transparent shadow-none [&>svg]:pointer-events-none [&>svg]:shrink-0',
  {
    variants: {
      size: {
        xs: 'size-7 [&>svg]:size-4',
        sm: 'size-8 [&>svg]:size-4',
        md: 'size-9 [&>svg]:size-4',
        lg: 'size-10 [&>svg]:size-5'
      },
      shape: {
        rounded: 'rounded-md',
        round: 'rounded-full'
      }
    },
    defaultVariants: {
      size: 'md',
      shape: 'rounded'
    }
  }
)

function FeaturedIcon({
  className,
  size,
  shape,
  ...props
}: React.ComponentProps<'span'> & VariantProps<typeof featuredIconVariants>) {
  return <span data-slot='featured-icon' className={cn(featuredIconVariants({ size, shape }), className)} {...props} />
}

export { FeaturedIcon, featuredIconVariants }