feat: date and time picker (#13985)

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

@@ -0,0 +1,59 @@
+import React, { type FC } from 'react'
+import Button from '../../button'
+import { type DatePickerFooterProps, ViewType } from '../types'
+import { RiTimeLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+import { useTranslation } from 'react-i18next'
+
+const Footer: FC<DatePickerFooterProps> = ({
+  needTimePicker,
+  displayTime,
+  view,
+  handleClickTimePicker,
+  handleSelectCurrentDate,
+  handleConfirmDate,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className={cn(
+      'flex justify-between items-center p-2 border-t-[0.5px] border-divider-regular',
+      !needTimePicker && 'justify-end',
+    )}>
+      {/* Time Picker */}
+      {needTimePicker && (
+        <button
+          type='button'
+          className='flex items-center rounded-md px-1.5 py-1 gap-x-[1px] border-[0.5px] border-components-button-secondary-border system-xs-medium
+                      bg-components-button-secondary-bg shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] text-components-button-secondary-accent-text'
+          onClick={handleClickTimePicker}
+        >
+          <RiTimeLine className='w-3.5 h-3.5' />
+          {view === ViewType.date && <span>{displayTime}</span>}
+          {view === ViewType.time && <span>{t('time.operation.pickDate')}</span>}
+        </button>
+      )}
+      <div className='flex items-center gap-x-1'>
+        {/* Now */}
+        <button
+          type='button'
+          className='flex items-center justify-center px-1.5 py-1 text-components-button-secondary-accent-text system-xs-medium'
+          onClick={handleSelectCurrentDate}
+        >
+          <span className='px-[3px]'>{t('time.operation.now')}</span>
+        </button>
+        {/* Confirm Button */}
+        <Button
+          variant='primary'
+          size='small'
+          className='w-16 px-1.5 py-1'
+          onClick={handleConfirmDate}
+        >
+          {t('time.operation.ok')}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(Footer)