refactor: extreact selected dates component

Author: jason89521

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

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 
 import useCalendarComponent from '../../../lib';
 import Calendar from '../Calendar';
+import SelectedDates from '../SelectedDates';
 
 export function Multiple() {
   const calendarControl = useCalendarComponent({ selectType: 'multiple' });
@@ -15,14 +16,7 @@ export function Multiple() {
   return (
     <div>
       <Calendar calendarControl={calendarControl} />
-      <p className='text-center mt-10 text-white flex flex-col'>
-        {selectedDates.map(date => {
-          const localeString = date.toLocaleString(navigator.language, {
-            dateStyle: 'long',
-          });
-          return <span key={localeString}>{localeString}</span>;
-        })}
-      </p>
+      <SelectedDates selectedDates={selectedDates} />
     </div>
   );
 }

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

@@ -1,5 +1,6 @@
 import useCalendarComponent from '../../../lib';
 import Calendar from '../Calendar';
+import SelectedDates from '../SelectedDates';
 
 export function Single() {
   const calendarControl = useCalendarComponent();
@@ -8,14 +9,7 @@ export function Single() {
   return (
     <div>
       <Calendar calendarControl={calendarControl} />
-      <p className='text-center mt-10 text-white flex flex-col'>
-        {selectedDates.map(date => {
-          const localeString = date.toLocaleString(navigator.language, {
-            dateStyle: 'long',
-          });
-          return <span key={localeString}>{localeString}</span>;
-        })}
-      </p>
+      <SelectedDates selectedDates={selectedDates} />
     </div>
   );
 }

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

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