Spinner

import { Spinner } from "@/components/ui/spinner";
import { Surface } from "@/components/ui/surface";

export function SpinnerDemo() {
	return (
		<Surface className="flex w-full max-w-sm items-center gap-3 rounded-3xl p-6">
			<Spinner />
			<div className="flex min-w-0 flex-1 flex-col">
				<span className="truncate font-medium text-base">
					Processing payment...
				</span>
				<span className="text-muted-foreground text-sm">Please wait</span>
			</div>
			<span className="text-base tabular-nums">$100.00</span>
		</Surface>
	);
}

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

export function SpinnerVariants() {
	return (
		<div className="flex flex-wrap items-center gap-6">
			<Spinner variant="default" />
			<Spinner variant="primary" />
			<Spinner variant="success" />
			<Spinner variant="warning" />
			<Spinner variant="destructive" />
		</div>
	);
}

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

export function SpinnerSizes() {
	return (
		<div className="flex items-center gap-6">
			<Spinner size="sm" />
			<Spinner size="default" />
			<Spinner size="lg" />
			<Spinner size="xl" />
		</div>
	);
}

import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";

export function SpinnerButton() {
	return (
		<div className="flex flex-col items-center gap-4">
			<Button disabled size="sm">
				<Spinner data-icon="inline-start" size="sm" />
				Loading...
			</Button>
			<Button variant="outline" disabled size="sm">
				Please wait
				<Spinner data-icon="inline-end" size="sm" />
			</Button>
			<Button variant="secondary" disabled size="sm">
				<Spinner data-icon="inline-start" size="sm" />
				Processing
			</Button>
		</div>
	);
}

import { Badge } from "@/components/ui/badge";
import { Spinner } from "@/components/ui/spinner";

export function SpinnerBadge() {
	return (
		<div className="flex items-center gap-4">
			<Badge>
				<Spinner data-icon="inline-start" size="sm" />
				Syncing
			</Badge>
			<Badge variant="primary">
				Updating
				<Spinner data-icon="inline-end" size="sm" />
			</Badge>
			<Badge variant="warning">
				<Spinner data-icon="inline-start" size="sm" />
				Processing
			</Badge>
		</div>
	);
}

import { ArrowUpIcon } from "lucide-react";

import {
	InputGroup,
	InputGroupAddon,
	InputGroupButton,
	InputGroupInput,
	InputGroupTextarea,
} from "@/components/ui/input-group";
import { Spinner } from "@/components/ui/spinner";

export function SpinnerInputGroup() {
	return (
		<div className="flex w-full max-w-md flex-col gap-4">
			<InputGroup>
				<InputGroupInput placeholder="Send a message..." disabled />
				<InputGroupAddon align="inline-end">
					<Spinner size="sm" />
				</InputGroupAddon>
			</InputGroup>
			<InputGroup>
				<InputGroupTextarea placeholder="Send a message..." disabled />
				<InputGroupAddon align="block-end">
					<Spinner size="sm" /> Validating...
					<InputGroupButton disabled className="ml-auto" variant="default">
						<ArrowUpIcon />
						<span className="sr-only">Send</span>
					</InputGroupButton>
				</InputGroupAddon>
			</InputGroup>
		</div>
	);
}

import { Button } from "@/components/ui/button";
import {
	Empty,
	EmptyContent,
	EmptyDescription,
	EmptyHeader,
	EmptyMedia,
	EmptyTitle,
} from "@/components/ui/empty";
import { Spinner } from "@/components/ui/spinner";

export function SpinnerEmpty() {
	return (
		<Empty className="w-full">
			<EmptyHeader>
				<EmptyMedia variant="icon">
					<Spinner />
				</EmptyMedia>
				<EmptyTitle>Processing your request</EmptyTitle>
				<EmptyDescription>
					Please wait while we process your request. Do not refresh the page.
				</EmptyDescription>
			</EmptyHeader>
			<EmptyContent>
				<Button variant="outline" size="sm">
					Cancel
				</Button>
			</EmptyContent>
		</Empty>
	);
}

"use client";

import {
	type Translations,
	useTranslation,
} from "@/components/language-selector";
import { Spinner } from "@/components/ui/spinner";
import { Surface } from "@/components/ui/surface";

const translations: Translations = {
	en: {
		dir: "ltr",
		values: {
			title: "Processing payment...",
			amount: "$100.00",
		},
	},
	ar: {
		dir: "rtl",
		values: {
			title: "جاري معالجة الدفع...",
			amount: "١٠٠.٠٠ دولار",
		},
	},
	he: {
		dir: "rtl",
		values: {
			title: "מעבד תשלום...",
			amount: "$100.00",
		},
	},
};

export function SpinnerRtl() {
	const { dir, language, t } = useTranslation(translations, "ar");

	return (
		<Surface
			className="flex w-full max-w-sm items-center gap-3 rounded-3xl p-6"
			lang={language}
			dir={dir}
		>
			<Spinner />
			<div className="flex min-w-0 flex-1 flex-col">
				<span className="truncate font-medium text-sm">{t.title}</span>
			</div>
			<span className="text-sm tabular-nums">{t.amount}</span>
		</Surface>
	);
}