Toggle Group

'use client'

import { ToggleGroup, ToggleGroupItem } from '@nerdfish/react/toggle-group'
import { BookmarkIcon, HeartIcon, StarIcon } from 'lucide-react'

export default function ToggleGroupExample() {
	return (
		<ToggleGroup multiple variant="outline" spacing={2} size="sm">
			<ToggleGroupItem
				value="star"
				aria-label="Toggle star"
				className="data-pressed:bg-transparent data-pressed:*:[svg]:fill-yellow-500 data-pressed:*:[svg]:stroke-yellow-500"
			>
				<StarIcon />
				Star
			</ToggleGroupItem>
			<ToggleGroupItem
				value="heart"
				aria-label="Toggle heart"
				className="data-pressed:bg-transparent data-pressed:*:[svg]:fill-red-500 data-pressed:*:[svg]:stroke-red-500"
			>
				<HeartIcon />
				Heart
			</ToggleGroupItem>
			<ToggleGroupItem
				value="bookmark"
				aria-label="Toggle bookmark"
				className="data-pressed:bg-transparent data-pressed:*:[svg]:fill-blue-500 data-pressed:*:[svg]:stroke-blue-500"
			>
				<BookmarkIcon />
				Bookmark
			</ToggleGroupItem>
		</ToggleGroup>
	)
}

'use client'

import { ToggleGroup, ToggleGroupItem } from '@nerdfish/react/toggle-group'
import { Bold, Italic, Underline } from 'lucide-react'

export default function ToggleGroupOutlineExample() {
	return (
		<ToggleGroup multiple variant="outline">
			<ToggleGroupItem value="bold" aria-label="Toggle bold">
				<Bold className="h-4 w-4" />
			</ToggleGroupItem>
			<ToggleGroupItem value="italic" aria-label="Toggle italic">
				<Italic className="h-4 w-4" />
			</ToggleGroupItem>
			<ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
				<Underline className="h-4 w-4" />
			</ToggleGroupItem>
		</ToggleGroup>
	)
}