MonthGrid 月份日历

'use client'

import { useState } from 'react'
import { Check } from 'lucide-react'
import { Button, Inline, MonthGrid, Stack, Text, type MonthGridDay } from '@hina-ui/react'

export default function Demo() {
  const [signed, setSigned] = useState([1, 2, 3, 4, 7, 8, 9, 10, 11, 14, 15, 16, 17, 18])

  function cellClass(day: MonthGridDay) {
    if (day.isOutside) return
    if (signed.includes(day.day)) return 'bg-accent-soft/40'
    if (day.weekday === 0 || day.weekday === 6 || day.date === '2026-09-25') return 'bg-subtle'
  }

  return (
    <Stack className="w-full max-w-lg" gap="sm">
      <Inline justify="between">
        <Text weight="medium">每月签到</Text>
        <Text size="sm" tone="muted">
          2026 年 9 月
        </Text>
      </Inline>
      <MonthGrid
        month="2026-09"
        today="2026-09-21"
        showHeader={false}
        showOutsideDays={false}
        dayMinHeight={72}
        fixedWeeks={false}
        cellClass={cellClass}
        size="sm"
        label="九月签到记录"
        renderDayTrailing={({ date, day, label }) =>
          signed.includes(day) ? (
            <Text as="span" tone="accent" className="inline-flex" aria-label={`${label} · 已签到`}>
              <Check className="size-3" aria-hidden="true" />
            </Text>
          ) : date === '2026-09-25' ? (
            <Text size="xs" tone="muted" aria-label="团队休假日">
              休
            </Text>
          ) : null
        }
      >
        {({ isToday, day, label }) =>
          isToday && !signed.includes(day) ? (
            <Button
              size="sm"
              variant="soft"
              className="hn-press-none h-6 min-w-0 px-1 text-xs"
              aria-label={`${label} · 签到`}
              onClick={() => setSigned([...signed, day])}
            >
              签到
            </Button>
          ) : null
        }
      </MonthGrid>
      <Text size="sm" tone="muted" role="status">
        本月已签到 {signed.length} 天。浅色底表示已签到；25 日为团队休假日。
      </Text>
    </Stack>
  )
}

'use client'

import { useState } from 'react'
import { Button, Inline, MonthGrid, Stack, Text, type MonthGridDay } from '@hina-ui/react'
import { monthGridPrices } from '../../month-grid'

const prices = monthGridPrices()
const price = (date: string) => prices[date]

export default function Demo() {
  const [selected, setSelected] = useState('')

  function cellClass(day: MonthGridDay) {
    if (selected === day.date) return 'bg-accent-soft'
    if (!day.isOutside && (day.isPast || !price(day.date)?.rooms)) return 'bg-subtle'
  }

  return (
    <Stack className="w-full max-w-2xl" gap="sm">
      <Inline justify="between" wrap>
        <Text weight="medium">每日房价</Text>
        <Text size="sm" tone="muted">
          2026 年 9 月 · 每晚
        </Text>
      </Inline>
      <MonthGrid
        month="2026-09"
        today="2026-09-21"
        showHeader={false}
        showOutsideDays={false}
        fixedWeeks={false}
        dayMinHeight={104}
        dayPadding={0}
        cellClass={cellClass}
        dayClass="gap-0 @max-[480px]/hn-month-grid:min-h-24"
        label="九月房价"
        renderDay={({ date, dayLabel, label, isPast, isToday }) => (
          <Button
            asChild
            variant="ghost"
            tone="neutral"
            size="sm"
            ripple={false}
            disabled={isPast || !price(date)?.rooms}
            className="hn-press-none h-auto w-full flex-1 items-center justify-between gap-1 rounded-none border-0 px-1 py-2 text-center focus-visible:outline-offset-[-2px] @min-[480px]/hn-month-grid:items-start @min-[480px]/hn-month-grid:px-3 @min-[480px]/hn-month-grid:text-start"
            onClick={() => setSelected(date)}
          >
            <Stack
              as="button"
              {...{ type: 'button', disabled: isPast || !price(date)?.rooms }}
              aria-pressed={selected === date}
              aria-label={`${label}，${price(date)?.rooms ? `¥${price(date)!.price}，剩余 ${price(date)!.rooms} 间` : '售罄'}`}
            >
              <Text
                as="time"
                {...{ dateTime: date }}
                aria-current={isToday ? 'date' : undefined}
                size="sm"
                tone={isToday ? 'accent' : 'default'}
                weight={isToday ? 'medium' : 'normal'}
              >
                {dayLabel}
              </Text>
              {price(date)?.rooms ? (
                <Text
                  size="xs"
                  tone={isPast ? 'muted' : 'accent'}
                  className="@min-[480px]/hn-month-grid:text-sm"
                >
                  ¥{price(date)!.price}
                </Text>
              ) : (
                <Text size="xs" tone="muted" className="max-w-full truncate">
                  售罄
                </Text>
              )}
              <Text size="xs" tone="muted" aria-hidden="true">
                <Text as="span" size="inherit" className="@max-[480px]/hn-month-grid:hidden">
                  {isPast ? '已过期' : price(date)?.rooms ? `余 ${price(date)!.rooms} 间` : '无房'}
                </Text>
                <Text as="span" size="inherit" className="hidden @max-[480px]/hn-month-grid:inline">
                  {!isPast && price(date)?.rooms ? `${price(date)!.rooms}间` : '—'}
                </Text>
              </Text>
            </Stack>
          </Button>
        )}
        renderFooter={() => (
          <Text size="sm" tone="muted" role="status">
            {selected
              ? `已选择 ${selected}，¥${price(selected)!.price} / 晚`
              : '选择可预订的日期。已过期及售罄日期不可操作。'}
          </Text>
        )}
      />
      <Text size="sm" tone="muted">
        整格按钮铺满内部空间，背景由 cellClass 控制。价格、库存与选中状态均由业务持有。
      </Text>
    </Stack>
  )
}

'use client'

import { useState } from 'react'
import { ChevronLeft, ChevronRight } from 'lucide-react'
import { IconButton, Inline, MonthGrid, Select, Stack, Switch, Text } from '@hina-ui/react'

const options = [
  { label: '2026 年 9 月', value: '2026-09' },
  { label: '2026 年 10 月', value: '2026-10' },
  { label: '2026 年 11 月', value: '2026-11' },
]

export default function Demo() {
  const [month, setMonth] = useState('2026-09')
  const [fixed, setFixed] = useState(false)
  const [outside, setOutside] = useState(false)

  return (
    <Stack className="w-full max-w-lg">
      <Inline gap="lg" wrap>
        <Switch checked={fixed} onCheckedChange={setFixed}>
          固定六周
        </Switch>
        <Switch checked={outside} onCheckedChange={setOutside}>
          显示相邻月份
        </Switch>
      </Inline>
      <MonthGrid
        month={month}
        onMonthChange={value => setMonth(value ?? '')}
        today="2026-09-21"
        min="2026-09-10"
        max="2026-11-20"
        fixedWeeks={fixed}
        showOutsideDays={outside}
        weekStartsOn={0}
        size="sm"
        label="开放日期范围"
        renderHeader={({ prev, next, canPrev, canNext }) => (
          <>
            <IconButton label="上个月" size="sm" disabled={!canPrev} onClick={prev}>
              <ChevronLeft className="rtl:rotate-180" />
            </IconButton>
            <Select
              value={month}
              onValueChange={value => setMonth(String(value))}
              options={options}
              size="sm"
              aria-label="月份"
              className="min-w-0 flex-1"
            />
            <IconButton label="下个月" size="sm" disabled={!canNext} onClick={next}>
              <ChevronRight className="rtl:rotate-180" />
            </IconButton>
          </>
        )}
        renderFooter={() => (
          <Text size="xs" tone="muted">
            开放范围：9 月 10 日至 11 月 20 日。每周从周日开始。
          </Text>
        )}
      >
        {({ isDisabled, isOutside }) =>
          !isOutside ? (
            <Text size="xs" tone="muted" className="text-center">
              {isDisabled ? '—' : '开放'}
            </Text>
          ) : null
        }
      </MonthGrid>
    </Stack>
  )
}