feat: date and time picker (#13985)

web/app/components/base/date-and-time-picker/calendar/days-of-week.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { useDaysOfWeek } from '../hooks'
+
+export const DaysOfWeek = () => {
+  const daysOfWeek = useDaysOfWeek()
+
+  return (
+    <div className='grid grid-cols-7 gap-x-0.5 p-2 border-b-[0.5px] border-divider-regular'>
+      {daysOfWeek.map(day => (
+        <div
+          key={day}
+          className='flex items-center justify-center text-text-tertiary system-2xs-medium'
+        >
+          {day}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default React.memo(DaysOfWeek)

web/app/components/base/date-and-time-picker/calendar/index.tsx

@@ -0,0 +1,27 @@
+import type { FC } from 'react'
+import type { CalendarProps } from '../types'
+import { DaysOfWeek } from './days-of-week'
+import CalendarItem from './item'
+
+const Calendar: FC<CalendarProps> = ({
+  days,
+  selectedDate,
+  onDateClick,
+  wrapperClassName,
+}) => {
+  return <div className={wrapperClassName}>
+    <DaysOfWeek/>
+    <div className='grid grid-cols-7 gap-0.5 p-2'>
+      {
+        days.map(day => <CalendarItem
+          key={day.date.format('YYYY-MM-DD')}
+          day={day}
+          selectedDate={selectedDate}
+          onClick={onDateClick}
+        />)
+      }
+    </div>
+  </div>
+}
+
+export default Calendar

web/app/components/base/date-and-time-picker/calendar/item.tsx

@@ -0,0 +1,30 @@
+import React, { type FC } from 'react'
+import type { CalendarItemProps } from '../types'
+import cn from '@/utils/classnames'
+import dayjs from 'dayjs'
+
+const Item: FC<CalendarItemProps> = ({
+  day,
+  selectedDate,
+  onClick,
+}) => {
+  const { date, isCurrentMonth } = day
+  const isSelected = selectedDate?.isSame(date, 'date')
+  const isToday = date.isSame(dayjs(), 'date')
+
+  return (
+    <button
+      onClick={() => onClick(date)}
+      className={cn(
+        'relative px-1 py-2 rounded-lg flex items-center justify-center system-sm-medium',
+        isCurrentMonth ? 'text-text-secondary' : 'text-text-quaternary hover:text-text-secondary',
+        isSelected ? 'text-components-button-primary-text system-sm-medium bg-components-button-primary-bg' : 'hover:bg-state-base-hover',
+      )}
+    >
+      {date.date()}
+      {isToday && <div className='absolute bottom-1 mx-auto w-1 h-1 rounded-full bg-components-button-primary-bg' />}
+    </button>
+  )
+}
+
+export default React.memo(Item)