Progress

"use client";

import * as React from "react";

import { Progress } from "@/components/ui/progress";

export function ProgressDemo() {
	const [progress, setProgress] = React.useState(13);

	React.useEffect(() => {
		const timer = setTimeout(() => setProgress(66), 500);
		return () => clearTimeout(timer);
	}, []);

	return <Progress value={progress} className="w-[60%]" />;
}

import {
	Progress,
	ProgressLabel,
	ProgressValue,
} from "@/components/ui/progress";

export function ProgressLabelExample() {
	return (
		<Progress value={56} className="w-full max-w-sm">
			<ProgressLabel>Upload progress</ProgressLabel>
			<ProgressValue />
		</Progress>
	);
}

import { Progress } from "@/components/ui/progress";

export function ProgressVariants() {
	return (
		<div className="flex w-full max-w-sm flex-col gap-4">
			<div className="space-y-1">
				<p className="text-muted-foreground text-xs">Default</p>
				<Progress value={45} variant="default" className="w-full" />
			</div>
			<div className="space-y-1">
				<p className="text-muted-foreground text-xs">Primary</p>
				<Progress value={50} variant="primary" className="w-full" />
			</div>
			<div className="space-y-1">
				<p className="text-muted-foreground text-xs">Success</p>
				<Progress value={72} variant="success" className="w-full" />
			</div>
			<div className="space-y-1">
				<p className="text-muted-foreground text-xs">Warning</p>
				<Progress value={38} variant="warning" className="w-full" />
			</div>
			<div className="space-y-1">
				<p className="text-muted-foreground text-xs">Destructive</p>
				<Progress value={88} variant="destructive" className="w-full" />
			</div>
		</div>
	);
}

import {
	Progress,
	ProgressLabel,
	ProgressValue,
} from "@/components/ui/progress";

export function ProgressSizes() {
	return (
		<div className="flex w-full max-w-sm flex-col gap-6">
			<Progress value={40} size="sm" className="w-full">
				<ProgressLabel>Small</ProgressLabel>
				<ProgressValue />
			</Progress>
			<Progress value={55} size="default" className="w-full">
				<ProgressLabel>Default</ProgressLabel>
				<ProgressValue />
			</Progress>
			<Progress value={70} size="lg" className="w-full">
				<ProgressLabel>Large</ProgressLabel>
				<ProgressValue />
			</Progress>
		</div>
	);
}

"use client";

import * as React from "react";

import { Progress } from "@/registry/new-york-v4//ui/progress";
import { Slider } from "@/registry/new-york-v4//ui/slider";

export function ProgressControlled() {
	const [value, setValue] = React.useState(50);

	return (
		<div className="flex w-full max-w-sm flex-col gap-4">
			<Progress size="lg" value={value} className="w-full" />
			<Slider
				value={value}
				onValueChange={(value) => setValue(value as number)}
				min={0}
				max={100}
				step={1}
			/>
		</div>
	);
}

"use client";

import {
	type Translations,
	useTranslation,
} from "@/components/language-selector";
import {
	Progress,
	ProgressLabel,
	ProgressValue,
} from "@/components/ui/progress";

const translations: Translations = {
	en: {
		dir: "ltr",
		values: {
			label: "Upload progress",
		},
	},
	ar: {
		dir: "rtl",
		values: {
			label: "تقدم الرفع",
		},
	},
	he: {
		dir: "rtl",
		values: {
			label: "התקדמות העלאה",
		},
	},
};

function toArabicNumerals(num: number): string {
	const arabicNumerals = ["٠", "١", "٢", "٣", "٤", "٥", "٦", "٧", "٨", "٩"];
	return num
		.toString()
		.split("")
		.map((digit) => arabicNumerals[Number.parseInt(digit, 10)] ?? digit)
		.join("");
}

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

	const formatNumber = (num: number): string => {
		if (language === "ar") {
			return toArabicNumerals(num);
		}
		return num.toString();
	};

	return (
		<div className="w-full max-w-sm" lang={language} dir={dir}>
			<Progress value={56} className="w-full">
				<ProgressLabel>{t.label}</ProgressLabel>
				<ProgressValue>
					{(_formatted, value) => (
						<span className="ms-auto">{formatNumber(value ?? 0)}%</span>
					)}
				</ProgressValue>
			</Progress>
		</div>
	);
}