feat: add mobile ui to calendar

components/DatePicker/index.tsx

@@ -1,13 +1,16 @@
 "use client"
+import { da, de, fi, nb, sv } from "date-fns/locale"
 import { useEffect, useRef, useState } from "react"
 import { useFormContext, useWatch } from "react-hook-form"
 
+import { Lang } from "@/constants/languages"
 import { dt } from "@/lib/dt"
 
 import Body from "@/components/TempDesignSystem/Text/Body"
 import useLang from "@/hooks/useLang"
 
-import DatePicker from "./DatePicker"
+import DatePickerDesktop from "./Screen/Desktop"
+import DatePickerMobile from "./Screen/Mobile"
 
 import styles from "./date-picker.module.css"
 
@@ -15,6 +18,14 @@ import type { DateRange } from "react-day-picker"
 
 import type { DatePickerFormProps } from "@/types/components/datepicker"
 
+const locales = {
+  [Lang.da]: da,
+  [Lang.de]: de,
+  [Lang.fi]: fi,
+  [Lang.no]: nb,
+  [Lang.sv]: sv,
+}
+
 export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
   const lang = useLang()
   const [isOpen, setIsOpen] = useState(false)
@@ -44,11 +55,9 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
         setIsOpen(false)
       }
     }
-
-    document.addEventListener("click", handleClickOutside)
-
+    document.body.addEventListener("click", handleClickOutside)
     return () => {
-      document.removeEventListener("click", handleClickOutside)
+      document.body.removeEventListener("click", handleClickOutside)
     }
   }, [setIsOpen])
 
@@ -67,10 +76,17 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
       <input {...register("date.from")} type="hidden" />
       <input {...register("date.to")} type="hidden" />
       <div aria-modal className={styles.hideWrapper} role="dialog">
-        <DatePicker
+        <DatePickerDesktop
           close={close}
           handleOnSelect={handleSelectDate}
-          initialSelected={selectedDate}
+          locales={locales}
+          selectedDate={selectedDate}
+        />
+        <DatePickerMobile
+          close={close}
+          handleOnSelect={handleSelectDate}
+          locales={locales}
+          selectedDate={selectedDate}
         />
       </div>
     </div>