Spinner

'use client'

import { Item, ItemContent, ItemMedia, ItemTitle } from '@nerdfish/react/item'
import { Spinner } from '@nerdfish/react/spinner'

export default function SpinnerExample() {
	return (
		<div className="gap-friends flex w-full flex-col [--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>
	)
}

'use client'

import { Spinner } from '@nerdfish/react/spinner'

export default function SpinnerColorExample() {
	return (
		<div className="flex items-center gap-6">
			<Spinner className="text-destructive size-6" />
			<Spinner className="text-success size-6" />
			<Spinner className="text-info size-6" />
			<Spinner className="text-warning size-6" />
		</div>
	)
}

'use client'

import { Spinner } from '@nerdfish/react/spinner'

export default function SpinnerSizeExample() {
	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>
	)
}

'use client'

import { Button } from '@nerdfish/react/button'
import { Spinner } from '@nerdfish/react/spinner'

export default function SpinnerButtonExample() {
	return (
		<div className="flex flex-col items-center gap-4">
			<Button disabled size="sm">
				<Spinner />
				Loading...
			</Button>
			<Button variant="outline" disabled size="sm">
				<Spinner />
				Please wait
			</Button>
			<Button variant="secondary" disabled size="sm">
				<Spinner />
				Processing
			</Button>
		</div>
	)
}