Spinner

import { Spinner } from "@/components/spinner"export function SpinnerBasic() {  return (    <div className="flex flex-col gap-6">      <div className="flex items-center gap-6">        <Spinner />        <Spinner className="size-6" />      </div>    </div>  )}

import { Button } from "@/components/button"import { Spinner } from "@/components/spinner"export function SpinnerInButtons() {  return (    <div className="flex flex-col gap-6">      <div className="flex flex-wrap items-center gap-4">        <Button>          <Spinner data-icon="inline-start" /> Submit        </Button>        <Button disabled>          <Spinner data-icon="inline-start" /> Disabled        </Button>        <Button variant="outline" disabled>          <Spinner data-icon="inline-start" /> Outline        </Button>        <Button variant="outline" size="icon" disabled>          <Spinner data-icon="inline-start" />          <span className="sr-only">Loading...</span>        </Button>      </div>    </div>  )}

import { Badge } from "@/components/badge"import { Spinner } from "@/components/spinner"export function SpinnerInBadges() {  return (    <div className="flex flex-col gap-6 items-center justify-center">      <div className="flex flex-wrap items-center justify-center gap-4">        <Badge>          <Spinner data-icon="inline-start" />          Badge        </Badge>        <Badge variant="secondary">          <Spinner data-icon="inline-start" />          Badge        </Badge>        <Badge variant="destructive">          <Spinner data-icon="inline-start" />          Badge        </Badge>        <Badge variant="outline">          <Spinner data-icon="inline-start" />          Badge        </Badge>      </div>    </div>  )}

import { Field, FieldLabel } from "@/components/field"import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/input-group"import { Spinner } from "@/components/spinner"export function SpinnerInInputGroup() {  return (    <div className="flex flex-col gap-6">      <Field>        <FieldLabel htmlFor="input-group-spinner">Input Group</FieldLabel>        <InputGroup>          <InputGroupInput id="input-group-spinner" />          <InputGroupAddon>            <Spinner />          </InputGroupAddon>        </InputGroup>      </Field>    </div>  )}

import { Button } from "@/components/button"import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/empty"import { Spinner } from "@/components/spinner"import { ArrowRightIcon } from "lucide-react"export function SpinnerInEmpty() {  return (    <div className="flex flex-col gap-6">      <Empty className="min-h-[300px]">        <EmptyHeader>          <EmptyMedia variant="icon">            <Spinner />          </EmptyMedia>          <EmptyTitle>No projects yet</EmptyTitle>          <EmptyDescription>            You haven&apos;t created any projects yet. Get started by creating            your first project.          </EmptyDescription>        </EmptyHeader>        <EmptyContent>          <div className="flex gap-2">            <Button asChild>              <a href="#">Create project</a>            </Button>            <Button variant="outline">Import project</Button>          </div>          <Button variant="link" asChild className="text-muted-foreground">            <a href="#">              Learn more{" "}              <ArrowRightIcon />            </a>          </Button>        </EmptyContent>      </Empty>    </div>  )}