feat: show value and selected dates for examples

Author: jason89521

packages/react-use-calendar-component/src/app/components/CalendarCell.tsx

@@ -20,9 +20,7 @@ export default function CalendarCell({
       onClick={() => selectThisDate()}
       type='button'
       title={title}>
-      <div className='flex items-center justify-center'>
-        <span>{dayOfMonth}</span>
-      </div>
+      {dayOfMonth}
     </button>
   );
 }

packages/react-use-calendar-component/src/app/components/Examples/Multiple.tsx

@@ -2,11 +2,10 @@ import { useState } from 'react';
 
 import useCalendarComponent from '../../../lib';
 import Calendar from '../Calendar';
-import SelectedDates from '../SelectedDates';
+import StateInfo from '../StateInfo';
 
 export function Multiple() {
   const [value, setValue] = useState([new Date()]);
-  console.log(value);
   const calendarControl = useCalendarComponent({
     selectType: 'multiple',
     value,
@@ -17,7 +16,7 @@ export function Multiple() {
   return (
     <div>
       <Calendar calendarControl={calendarControl} />
-      <SelectedDates selectedDates={selectedDates} />
+      <StateInfo value={value} selectedDates={selectedDates} />
     </div>
   );
 }

packages/react-use-calendar-component/src/app/components/Examples/Single.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import useCalendarComponent from '../../../lib';
 import Calendar from '../Calendar';
-import SelectedDates from '../SelectedDates';
+import StateInfo from '../StateInfo';
 
 export function Single() {
   const [value, setValue] = useState(new Date());
@@ -12,7 +12,7 @@ export function Single() {
   return (
     <div>
       <Calendar calendarControl={calendarControl} />
-      <SelectedDates selectedDates={selectedDates} />
+      <StateInfo value={[value]} selectedDates={selectedDates} />
     </div>
   );
 }

packages/react-use-calendar-component/src/app/components/SelectedDates.tsx

@@ -4,10 +4,10 @@ interface Props {
 
 export default function SelectedDates({ selectedDates }: Props) {
   return (
-    <p className='text-center mt-10 text-white flex flex-col'>
+    <div className='flex flex-col'>
       {selectedDates.map(date => {
         return <span key={date.toString()}>{date.toLocaleDateString()}</span>;
       })}
-    </p>
+    </div>
   );
 }

packages/react-use-calendar-component/src/app/components/StateInfo.tsx

@@ -0,0 +1,23 @@
+interface Props {
+  value: Date[];
+  selectedDates: Date[];
+}
+
+export default function StateInfo({ value, selectedDates }: Props) {
+  return (
+    <div className='text-white flex justify-between mt-5'>
+      <div className='flex flex-col'>
+        <div className='text-lg text-rose-300'>value:</div>
+        {value.map((v, index) => (
+          <span key={index}>{v.toLocaleDateString()}</span>
+        ))}
+      </div>
+      <div className='flex flex-col'>
+        <div className='text-lg text-rose-300'>selected dates:</div>
+        {selectedDates.map((date, index) => {
+          return <span key={index}>{date.toLocaleDateString()}</span>;
+        })}
+      </div>
+    </div>
+  );
+}