Calendar

"use client";

import React, {useState} from "react";
import {Calendar} from "@brynlabs/fusion-ui";
import {calendarPresets} from "@/app/(docs)/components/calendar/calendar-presets";

export const CalendarExample = () => {
  const [value, setValue] = useState<Date | undefined>(new Date());
  return (
    <div style={{display: "flex", flexDirection: "column", gap: "10px"}}>
      <Calendar value={value} onChange={setValue} presets={calendarPresets} locale={"de-DE"} />
      <div>
        Selected: <code suppressHydrationWarning>{value?.toISOString() ?? "undefined"}</code>
      </div>
    </div>
  );
};

"use client";

import React, {useState} from "react";
import {Button, CalendarPopover, IconCalendar} from "@brynlabs/fusion-ui";
import {calendarPresets} from "@/app/(docs)/components/calendar/calendar-presets";

export const CalendarPopoverExample = () => {
  const [value, setValue] = useState<Date | undefined>(undefined);
  return (
    <div style={{display: "flex", flexDirection: "column", gap: "10px", alignItems: "flex-start"}}>
      <CalendarPopover value={value} onChange={setValue} presets={calendarPresets}>
        <Button primaryIcon={<IconCalendar />} color={"neutral"}>
          {value ? value.toLocaleDateString() : "Pick a date"}
        </Button>
      </CalendarPopover>
      <div>
        Selected: <code suppressHydrationWarning>{value?.toISOString() ?? "undefined"}</code>
      </div>
    </div>
  );
};

"use client";

import React, {useState} from "react";
import {DateInput} from "@brynlabs/fusion-ui";
import {calendarPresets} from "@/app/(docs)/components/calendar/calendar-presets";

export const CalendarDateInputExample = () => {
  const [value, setValue] = useState<Date | undefined>(new Date());
  return (
    <div style={{display: "flex", flexDirection: "column", gap: "10px"}}>
      <DateInput
        label={"Appointment"}
        type={"datetime"}
        value={value}
        onChange={setValue}
        calendarProps={{presets: calendarPresets}}
      />
      <div>
        Selected: <code suppressHydrationWarning>{value?.toISOString() ?? "undefined"}</code>
      </div>
    </div>
  );
};

"use client";

import React, {useState} from "react";
import {DateRange, RangeCalendar} from "@brynlabs/fusion-ui";
import {rangeCalendarPresets} from "@/app/(docs)/components/calendar/calendar-presets";

export const RangeCalendarExample = () => {
  const [value, setValue] = useState<DateRange>({});
  return (
    <div style={{display: "flex", flexDirection: "column", gap: "10px"}}>
      <RangeCalendar
        value={value}
        onChange={setValue}
        presets={rangeCalendarPresets}
        locale={"de-DE"}
      />
      <div>
        Selected: <code>{value.start?.toISOString() ?? "undefined"}</code> →{" "}
        <code>{value.end?.toISOString() ?? "undefined"}</code>
      </div>
    </div>
  );
};

"use client";

import React, {useState} from "react";
import {Button, DateRange, IconCalendar, RangeCalendarPopover} from "@brynlabs/fusion-ui";

export const RangeCalendarPopoverExample = () => {
  const [value, setValue] = useState<DateRange>({});
  return (
    <div style={{display: "flex", flexDirection: "column", gap: "10px", alignItems: "flex-start"}}>
      <RangeCalendarPopover value={value} onChange={setValue}>
        <Button primaryIcon={<IconCalendar />} color={"neutral"}>
          {value.start && value.end
            ? `${value.start.toLocaleDateString()} – ${value.end.toLocaleDateString()}`
            : "Pick a range"}
        </Button>
      </RangeCalendarPopover>
      <div>
        Selected: <code>{value.start?.toISOString() ?? "undefined"}</code> →{" "}
        <code>{value.end?.toISOString() ?? "undefined"}</code>
      </div>
    </div>
  );
};