Spinner

import {
    Item,
    ItemContent,
    ItemMedia,
    ItemTitle,
  } from "@/components/ui/item"
  import { Spinner } from "@/components/ui/spinner"
  
  export function SpinnerDemo() {
    return (
      <div className="flex w-full max-w-xs flex-col gap-4 [--radius:1rem]">
        <Item variant="muted">
          <ItemMedia>
            <Spinner />
          </ItemMedia>
          <ItemContent>
            <ItemTitle className="line-clamp-1">Processing payment...</ItemTitle>
          </ItemContent>
          <ItemContent className="flex-none justify-end">
            <span className="text-sm tabular-nums">$100.00</span>
          </ItemContent>
        </Item>
      </div>
    )
  }

import { Spinner } from "@/components/ui/spinner"

export function SpinnerSize() {
  return (
    <div className="flex items-center gap-6">
      <Spinner className="size-3" />
      <Spinner className="size-4" />
      <Spinner className="size-6" />
      <Spinner className="size-8" />
    </div>
  )
}