feat: props update

README.md

@@ -21,7 +21,7 @@ const MyComponent = () => {
       <TimePeriodSelector
         title='Select Time Period'
         language='en'
-        weekDayStyle={{ color: 'blue' }}
+        showTime
         className='time-period-selector'
       />
     </div>
@@ -31,12 +31,12 @@ const MyComponent = () => {
 
 ## Props
 
-| Name | Type | Description |
-| ---- | ---- | ----------- |
-| title | string | The title of the component |
-| language | 'zh','en' | The language of the component |
-| weekDayStyle | React.CSSProperties | The style of the week day |
-| className | string | The class name of the component |
+| Name      | Type                | Description                     |
+| --------- | ------------------- | ------------------------------- |
+| title     | string              | The title of the component      |
+| language  | 'zh','en'           | The language of the component   |
+| showTime  | boolean             | Whether to show time            |
+| className | string              | The class name of the component |
 
 ## Component Features
 
@@ -49,10 +49,11 @@ const MyComponent = () => {
 The TimePeriodSelector component uses weekDays as the list of days in a week and renders the selection area for each day based on this list. Each day's selected time periods (Time type) are stored as an array of numbers representing the selected time range.
 
 ```tsx
-const weekDays: readonly ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+const weekDays: readonly ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 type WeekDay = (typeof weekDays)[number];
 export type Time = Record<WeekDay, number[]>;
 ```
 
 ## License
-MIT License
+
+MIT License

src/index.tsx

@@ -32,11 +32,11 @@ export interface TimePeriodSelectorProps {
   style?: React.CSSProperties;
   title?: string;
   language?: 'zh' | 'en';
-  weekDayStyle?: React.CSSProperties;
-};
+  showTime?: boolean;
+}
 
 export function TimePeriodSelector(props: TimePeriodSelectorProps) {
-  const { className, style, title, language = 'en', weekDayStyle } = props;
+  const { className, style, title, language = 'en', showTime } = props;
   const weekDayDisplay =
     language === 'en' ? weekDayDisplayEn : weekDayDisplayZh;
 
@@ -221,12 +221,18 @@ export function TimePeriodSelector(props: TimePeriodSelectorProps) {
         </tbody>
       </table>
 
-      <div className='mb-5 mt-5 border-b border-gray-200' />
-
-      <div className='mb-2'>
-        {language === 'zh' ? '已选择时间:' : 'Selected Times:'}
-      </div>
-      <pre className='whitespace-pre-wrap text-xs '>{formatSelectedTimes()}</pre>
+      {showTime && (
+        <>
+          <div className='mb-5 mt-5 border-b border-gray-200' />
+
+          <div className='mb-2'>
+            {language === 'zh' ? '已选择时间:' : 'Selected Times:'}
+          </div>
+          <pre className='whitespace-pre-wrap text-xs '>
+            {formatSelectedTimes()}
+          </pre>
+        </>
+      )}
     </div>
   );
 }