تقويم (Calendar)

npx @smicolon/fasla-ui@latest add calendar

"use client"

import * as React from "react"
import { Calendar } from "@/components/ui/calendar"

export function DeliveryDay() {
  const [day, setDay] = React.useState<Date | undefined>(new Date())
  return <Calendar mode="single" selected={day} onSelect={setDay} />
}

"use client"

import * as React from "react"
import type { DateRange } from "react-day-picker"
import { Calendar } from "@/components/ui/calendar"

export function StayDates() {
  const [stay, setStay] = React.useState<DateRange | undefined>()
  return (
    <Calendar
      mode="range"
      numberOfMonths={2}
      selected={stay}
      onSelect={setStay}
      disabled={{ before: new Date() }}
    />
  )
}

"use client"

import * as React from "react"
import { Calendar } from "@/components/ui/calendar"
import { cn } from "@/lib/utils"

const slots = ["09:00", "09:30", "10:00", "10:30", "11:00", "11:30"]

export function Appointment() {
  const [day, setDay] = React.useState<Date>(new Date())
  const [time, setTime] = React.useState<string>()
  return (
    <div className="flex w-fit rounded-md bg-background p-3 shadow">
      <div className="relative w-[9.25rem] shrink-0 border-e">
        <div className="absolute inset-0 flex flex-col gap-4 px-3">
          <p className="pt-1 text-center text-sm font-medium">
            {day.toLocaleDateString(undefined, { weekday: "long", day: "numeric" })}
          </p>
          <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto">
            {slots.map((slot) => (
              <button
                key={slot}
                type="button"
                aria-pressed={slot === time}
                onClick={() => setTime(slot)}
                className={cn(
                  "h-8 shrink-0 rounded-md border text-sm",
                  slot === time ? "border-primary bg-primary text-primary-foreground" : "border-input hover:bg-accent"
                )}
              >
                {slot}
              </button>
            ))}
          </div>
        </div>
      </div>
      <Calendar
        mode="single"
        required
        selected={day}
        onSelect={setDay}
        className="ms-2 rounded-none p-0 shadow-none"
      />
    </div>
  )
}

"use client"

import * as React from "react"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"

const shift = (date: Date, days: number, months = 0) =>
  new Date(date.getFullYear(), date.getMonth() + months, date.getDate() + days)
const startOfMonth = (date: Date) => new Date(date.getFullYear(), date.getMonth(), 1)

export function DayWithPresets() {
  const today = new Date()
  const [day, setDay] = React.useState<Date>(today)
  const [month, setMonth] = React.useState<Date>(startOfMonth(today))
  const presets = [
    { label: "اليوم", date: today },
    { label: "أمس", date: shift(today, -1) },
    { label: "الأسبوع الماضي", date: shift(today, -7) },
    { label: "الشهر الماضي", date: shift(today, 0, -1) },
  ]
  return (
    <div className="flex w-fit flex-col items-center gap-6 rounded-md bg-background p-3 shadow">
      <div className="flex gap-1">
        {presets.map((preset) => (
          <Button
            key={preset.label}
            variant="ghost"
            size="xs"
            onClick={() => {
              setDay(preset.date)
              setMonth(startOfMonth(preset.date))
            }}
          >
            {preset.label}
          </Button>
        ))}
      </div>
      <Calendar
        mode="single"
        required
        month={month}
        onMonthChange={setMonth}
        selected={day}
        onSelect={setDay}
        className="rounded-none p-0 shadow-none"
      />
    </div>
  )
}

"use client"

import * as React from "react"
import { Calendar } from "@/components/ui/calendar"

export function BirthDay() {
  const [day, setDay] = React.useState<Date | undefined>()
  return (
    <Calendar
      mode="single"
      captionLayout="dropdown"
      startMonth={new Date(1926, 0)}
      endMonth={new Date()}
      selected={day}
      onSelect={setDay}
    />
  )
}