Calendar

'use client'

import { Calendar } from '@nerdfish/react/calendar'
import * as React from 'react'

export default function CalendarExample() {
	const [date, setDate] = React.useState<Date | undefined>(new Date())

	return (
		<Calendar
			mode="single"
			selected={date}
			onSelect={setDate}
			className="rounded-base border-border p-friends border shadow-sm"
			captionLayout="dropdown"
		/>
	)
}

'use client'

import { Calendar, type DateRange } from '@nerdfish/react/calendar'
import { useState } from 'react'

export default function CalendarRangeExample() {
	const [range, setRange] = useState<DateRange | undefined>({
		from: new Date(),
		to: new Date(),
	})

	return (
		<div className="max-w-sm">
			<Calendar
				mode="range"
				numberOfMonths={2}
				selected={range}
				onSelect={setRange}
				cellSize="32px"
				className="rounded-base border-border p-friends border shadow-sm"
				captionLayout="dropdown"
			/>
		</div>
	)
}

'use client'

import { Calendar } from '@nerdfish/react/calendar'
import * as React from 'react'

export default function CalendarCellSizeExample() {
	const [date, setDate] = React.useState<Date | undefined>(new Date())

	return (
		<Calendar
			mode="single"
			cellSize="56px"
			selected={date}
			onSelect={setDate}
			className="rounded-base border-border p-friends border shadow-sm"
			captionLayout="dropdown"
		/>
	)
}

'use client'

import {
	CalendarMini,
	CalendarMiniDay,
	CalendarMiniDays,
	CalendarMiniNavigation,
} from '@nerdfish/react/calendar-mini'

export default function CalendarMiniExample() {
	return (
		<CalendarMini>
			<CalendarMiniNavigation direction="prev" />
			<CalendarMiniDays>
				{(date) => <CalendarMiniDay date={date} key={date.toISOString()} />}
			</CalendarMiniDays>
			<CalendarMiniNavigation direction="next" />
		</CalendarMini>
	)
}