Toggle

import { BookmarkIcon } from "lucide-react";

import { Toggle } from "@/components/ui/toggle";

export function ToggleDemo() {
	return (
		<Toggle aria-label="Toggle bookmark">
			<BookmarkIcon className="group-aria-pressed/toggle:fill-primary" />
			Bookmark
		</Toggle>
	);
}

import { BoldIcon, ItalicIcon } from "lucide-react";

import { Toggle } from "@/components/ui/toggle";

export function ToggleGhost() {
	return (
		<div className="flex flex-wrap items-center gap-2">
			<Toggle variant="ghost" aria-label="Toggle italic">
				<ItalicIcon />
				Italic
			</Toggle>
			<Toggle variant="ghost" aria-label="Toggle bold">
				<BoldIcon />
				Bold
			</Toggle>
		</div>
	);
}

import { BookmarkIcon } from "lucide-react";

import { Toggle } from "@/components/ui/toggle";

export function ToggleSizes() {
	return (
		<div className="flex flex-wrap items-center gap-2">
			<Toggle size="xs" aria-label="Toggle extra small">
				Extra Small
			</Toggle>
			<Toggle size="sm" aria-label="Toggle small">
				Small
			</Toggle>
			<Toggle size="default" aria-label="Toggle default">
				Default
			</Toggle>
			<Toggle size="lg" aria-label="Toggle large">
				Large
			</Toggle>
			<Toggle size="icon-xs" aria-label="Toggle icon extra small">
				<BookmarkIcon />
			</Toggle>
			<Toggle size="icon-sm" aria-label="Toggle icon small">
				<BookmarkIcon />
			</Toggle>
			<Toggle size="icon" aria-label="Toggle icon">
				<BookmarkIcon />
			</Toggle>
			<Toggle size="icon-lg" aria-label="Toggle icon large">
				<BookmarkIcon />
			</Toggle>
		</div>
	);
}

import { Toggle } from "@/components/ui/toggle";

export function ToggleDisabled() {
	return (
		<div className="flex flex-wrap items-center gap-2">
			<Toggle aria-label="Toggle disabled" disabled>
				Disabled
			</Toggle>
			<Toggle variant="ghost" aria-label="Toggle ghost disabled" disabled>
				Disabled
			</Toggle>
		</div>
	);
}

"use client";

import { BookmarkIcon } from "lucide-react";

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

const translations: Translations = {
	en: {
		dir: "ltr",
		values: {
			label: "Bookmark",
		},
	},
	ar: {
		dir: "rtl",
		values: {
			label: "إشارة مرجعية",
		},
	},
	he: {
		dir: "rtl",
		values: {
			label: "סימנייה",
		},
	},
};

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

	return (
		<div lang={language} dir={dir}>
			<Toggle aria-label="Toggle bookmark">
				<BookmarkIcon className="group-aria-pressed/toggle:fill-primary" />
				{t.label}
			</Toggle>
		</div>
	);
}