Badge

import { BellIcon } from "lucide-react";

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

export function BadgeDemo() {
	return (
		<div className="flex items-center gap-3">
			<Badge>Badge</Badge>
			<Badge size="lg" variant="primary">
				<BellIcon data-icon="inline-start" />
				Notifications
			</Badge>
		</div>
	);
}

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

export function BadgeVariants() {
	return (
		<div className="flex flex-wrap items-center gap-2">
			<Badge>Default</Badge>
			<Badge variant="primary">Primary</Badge>
			<Badge variant="success">Success</Badge>
			<Badge variant="warning">Warning</Badge>
			<Badge variant="destructive">Destructive</Badge>
		</div>
	);
}

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

export function BadgeSizes() {
	return (
		<div className="flex flex-wrap items-center gap-2">
			<Badge size="sm">Small</Badge>
			<Badge>Default</Badge>
			<Badge size="lg">Large</Badge>
		</div>
	);
}

import { BellIcon, CheckCheckIcon } from "lucide-react";

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

export function BadgeIcon() {
	return (
		<div className="flex flex-wrap items-center gap-2">
			<Badge>
				<BellIcon data-icon="inline-start" />
				Notifications
			</Badge>
			<Badge variant="success">
				<CheckCheckIcon data-icon="inline-end" />
				New
			</Badge>
		</div>
	);
}

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

export function BadgeColors() {
	return (
		<div className="flex flex-wrap items-center gap-2">
			<Badge className="bg-green-50 text-green-900 dark:bg-green-800 dark:text-green-50">
				Custom green
			</Badge>
			<Badge className="bg-blue-50 text-blue-900 dark:bg-blue-800 dark:text-blue-50">
				Custom blue
			</Badge>
			<Badge className="bg-amber-50 text-amber-900 dark:bg-amber-800 dark:text-amber-50">
				Custom amber
			</Badge>
		</div>
	);
}

"use client";

import {
	BellIcon,
	CheckCheckIcon,
	StarIcon,
	TriangleAlertIcon,
} from "lucide-react";

import {
	type Translations,
	useTranslation,
} from "@/components/language-selector";
import { Badge } from "@/components/ui/badge";

const translations: Translations = {
	en: {
		dir: "ltr",
		values: {
			new: "New",
			verified: "Verified",
			pending: "Pending",
			notifications: "Notifications",
		},
	},
	ar: {
		dir: "rtl",
		values: {
			new: "جديد",
			verified: "موثق",
			pending: "قيد الانتظار",
			notifications: "الإشعارات",
		},
	},
	he: {
		dir: "rtl",
		values: {
			new: "חדש",
			verified: "מאומת",
			pending: "ממתין",
			notifications: "התראות",
		},
	},
};

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

	return (
		<div
			className="flex flex-wrap items-center gap-2"
			lang={language}
			dir={dir}
		>
			<Badge variant="primary">
				<StarIcon data-icon="inline-start" />
				{t.new}
			</Badge>
			<Badge variant="success">
				<CheckCheckIcon data-icon="inline-start" />
				{t.verified}
			</Badge>
			<Badge variant="warning">
				<TriangleAlertIcon data-icon="inline-start" />
				{t.pending}
			</Badge>
			<Badge>
				<BellIcon data-icon="inline-start" />
				{t.notifications}
			</Badge>
		</div>
	);
}