All files / src/components/pages/create-group/modals/date-picker-modal 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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client';

import { useState } from 'react';

import { AnyFieldApi } from '@tanstack/react-form';
import clsx from 'clsx';

import { Icon } from '@/components/icon';
import { Calendar } from '@/components/pages/create-group/modals/date-picker-modal/calendar';
import { Button, ModalContent, ModalTitle, useModal } from '@/components/ui';

interface Props {
  dateField: AnyFieldApi;
}

export const DatePickerModal = ({ dateField }: Props) => {
  const { close } = useModal();
  const [tabMenu, setTabMenu] = useState<'date' | 'time'>('date');

  return (
    <ModalContent className='w-82.5'>
      <ModalTitle>날짜 및 시간</ModalTitle>
      <section className='mt-2'>
        <nav className='flex'>
          {DATE_MODAL_TAB_MENU.map(({ name, iconId }) => (
            <button
              key={name}
              className={clsx(
                'flex-center h-12 grow-1 border-b-2 border-gray-200 transition-colors duration-300',
                tabMenu === name && 'border-mint-500',
              )}
              type='button'
              onClick={() => setTabMenu(name)}
            >
              <Icon
                id={iconId}
                className={clsx('text-gray-500', tabMenu === name && 'text-mint-500')}
              />
            </button>
          ))}
        </nav>

        <Calendar
          currentTab={tabMenu}
          dateFieldValue={dateField.state.value}
          updateDateField={(selectedDate: string) => dateField.handleChange(selectedDate)}
        />

        <div className='mt-5'>
          <Button className='text-text-md-bold bg-mint-400' onClick={close}>
            확인
          </Button>
        </div>
      </section>
    </ModalContent>
  );
};

const DATE_MODAL_TAB_MENU = [
  { name: 'date', iconId: 'calendar-1' },
  { name: 'time', iconId: 'clock' },
] as const;