Switch

'use client'

import { Field } from '@nerdfish/react/field'
import { Label } from '@nerdfish/react/label'
import { Switch } from '@nerdfish/react/switch'

export default function SwitchExample() {
	return (
		<Field orientation="horizontal" className="flex justify-center">
			<Switch id="airplane-mode" />
			<Label htmlFor="airplane-mode">Airplane Mode</Label>
		</Field>
	)
}

'use client'

import { Field } from '@nerdfish/react/field'
import { Label } from '@nerdfish/react/label'
import { Switch } from '@nerdfish/react/switch'

export default function SwitchSizeExample() {
	return (
		<div className="space-y-friends">
			<Field orientation="horizontal">
				<Switch size="xs" id="size-xs" />
				<Label htmlFor="size-xs">xs</Label>
			</Field>
			<Field orientation="horizontal">
				<Switch size="sm" id="size-sm" />
				<Label htmlFor="size-sm">sm</Label>
			</Field>
			<Field orientation="horizontal">
				<Switch size="md" id="size-md" />
				<Label htmlFor="size-md">md</Label>
			</Field>
			<Field orientation="horizontal">
				<Switch size="lg" id="size-lg" />
				<Label htmlFor="size-lg">lg</Label>
			</Field>
			<Field orientation="horizontal">
				<Switch size="xl" id="size-xl" />
				<Label htmlFor="size-xl">xl</Label>
			</Field>
		</div>
	)
}

'use client'

import { Switch, SwitchThumb } from '@nerdfish/react/switch'
import { MoonIcon, SunIcon } from 'lucide-react'

export default function SwitchIconExample() {
	return (
		<div className="flex items-center">
			<Switch
				size="lg"
				className="data-[checked]:bg-background-inverted data-[unchecked]:bg-background-secondary"
			>
				<SwitchThumb className="group/thumb">
					<SunIcon className="text-foreground-inverted size-3 group-data-[checked]/thumb:hidden" />
					<MoonIcon className="hidden size-3 group-data-[checked]/thumb:block" />
				</SwitchThumb>
			</Switch>
		</div>
	)
}