feat: choose time

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

@@ -1,13 +1,18 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-const Header = () => {
+type Props = {
+  title?: string
+}
+const Header = ({
+  title,
+}: Props) => {
   const { t } = useTranslation()
 
   return (
     <div className='flex flex-col border-b-[0.5px] border-divider-regular'>
       <div className='system-md-semibold flex items-center px-2 py-1.5 text-text-primary'>
-        {t('time.title.pickTime')}
+        {title || t('time.title.pickTime')}
       </div>
     </div>
   )

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

@@ -20,6 +20,8 @@ const TimePicker = ({
   onChange,
   onClear,
   renderTrigger,
+  title,
+  popupClassName,
 }: TimePickerProps) => {
   const { t } = useTranslation()
   const [isOpen, setIsOpen] = useState(false)
@@ -142,10 +144,10 @@ const TimePicker = ({
           </div>
         )}
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='z-50'>
+      <PortalToFollowElemContent className={cn('z-50', popupClassName)}>
         <div className='mt-1 w-[252px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg shadow-shadow-shadow-5'>
           {/* Header */}
-          <Header />
+          <Header title={title} />
 
           {/* Time Options */}
           <Options

web/app/components/base/date-and-time-picker/types.ts

@@ -54,6 +54,8 @@ export type TimePickerProps = {
   onChange: (date: Dayjs | undefined) => void
   onClear: () => void
   renderTrigger?: () => React.ReactNode
+  title?: string
+  popupClassName?: string
 }
 
 export type TimePickerFooterProps = {