Spinner

"use client"

import { SpinnerIcon } from "@phosphor-icons/react"
import { cn } from "cn"

function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
  return (
    <SpinnerIcon
      data-slot="spinner"
      role="status"
      aria-label="Loading"
      className={cn("size-4 animate-spin", className)}
      {...props}
    />
  )
}

export { Spinner }

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

// The copy: change text here, not in the markup.
const COPY = {
  status: "Resolving dependencies…",
} as const

/** Spinner beside a status line. */
export default function SpinnerDemo() {
  return (
    <div className="flex items-center gap-3 text-sm/6 text-muted-foreground">
      <Spinner />
      {COPY.status}
    </div>
  )
}