All files / src/components/pages/create-group/modals/date-picker-modal/calendar/date-picker index.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client';

import {
  useContextCalendars,
  useContextDatePickerOffsetPropGetters,
  useContextDaysPropGetters,
} from '@rehookify/datepicker';
import clsx from 'clsx';

import { Icon } from '@/components/icon';

export const DatePicker = () => {
  const { calendars, weekDays } = useContextCalendars();
  const { addOffset, subtractOffset } = useContextDatePickerOffsetPropGetters();
  const { dayButton } = useContextDaysPropGetters();

  const { year, month, days } = calendars[0];

  return (
    <div className='border-b-1 pb-3'>
      <div className='flex-between px-2'>
        <p className='text-text-md-semibold text-gray-800'>
          {year} {month}
        </p>

        <div className='flex justify-end gap-4'>
          <button {...subtractOffset({ months: 1 })} aria-label='Previous month'>
            <Icon id='chevron-left-1' className='text-gray-600' />
          </button>
          <button {...addOffset({ months: 1 })} aria-label='Next month'>
            <Icon id='chevron-right-1' className='text-gray-600' />
          </button>
        </div>
      </div>

      <div className='mt-2 border-gray-200'>
        <ul className='grid grid-cols-7 text-gray-800'>
          {weekDays.map((day) => (
            <li key={`${month}-${day}`} className='flex-center size-10'>
              {day}
            </li>
          ))}
        </ul>
        <ul className='text-text-sm-regular grid grid-cols-7 grid-rows-5 gap-y-1 text-gray-800'>
          {days.map((d) => (
            <li key={d.$date.toDateString()}>
              <button
                {...dayButton(d)}
                className={clsx(
                  'flex-center size-10',
                  d.selected && 'bg-mint-500 text-text-sm-medium rounded-full text-white',
                  !d.inCurrentMonth && 'text-gray-600',
                )}
              >
                {d.day.replace('일', '')}
              </button>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};