refactor: reorganize component organization

components/ContentType/HotelPage/AmenitiesList/index.tsx

@@ -1,13 +1,12 @@
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import { ChevronRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
+import SidePeekContainer from "@/components/TempDesignSystem/SidePeek/Container"
 import SidePeekContent from "@/components/TempDesignSystem/SidePeek/Content"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
 
-import SidePeekContainer from "../SidePeekContainer"
-
 import styles from "./amenitiesList.module.css"
 
 import { HotelData } from "@/types/hotel"

components/TempDesignSystem/SidePeek/Content/content.module.css

@@ -0,0 +1,25 @@
+.content {
+  display: grid;
+  grid-template-rows: min-content auto;
+  gap: var(--Spacing-x4);
+  height: 100%;
+  padding: var(--Spacing-x4) var(--Spacing-x5);
+}
+
+.header {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.header:has(> h2) {
+  justify-content: space-between;
+}
+
+.closeBtn {
+  border: none;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  cursor: pointer;
+}

components/TempDesignSystem/SidePeek/Content/index.tsx

@@ -3,10 +3,9 @@
 import { Children, PropsWithChildren } from "react"
 
 import { CloseIcon } from "@/components/Icons"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
-import Title from "../Text/Title"
+import styles from "./content.module.css"
-
-import styles from "./sidePeek.module.css"
 
 export default function Content({
   title,
@@ -24,7 +23,12 @@ export default function Content({
     <aside className={styles.content}>
       <header className={styles.header}>
         {title && (
-          <Title level={"h2"} as={"h3"}>
+          <Title
+            color="burgundy"
+            textTransform="uppercase"
+            level={"h2"}
+            as={"h3"}
+          >
             {title}
           </Title>
         )}

components/TempDesignSystem/SidePeek/sidePeek.module.css

@@ -18,41 +18,10 @@
   animation: slide-up 300ms reverse;
 }
 
-.header {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.header:has(> h2) {
-  justify-content: space-between;
-}
-
-.title {
-  text-transform: uppercase;
-  color: var(--Scandic-Brand-Burgundy);
-}
-
-.closeBtn {
-  border: none;
-  background-color: transparent;
-  display: flex;
-  align-items: center;
-  padding: 0;
-  cursor: pointer;
-}
-
 .dialog {
   height: 100%;
 }
 
-.content {
-  display: grid;
-  grid-template-rows: min-content auto;
-  gap: var(--Spacing-x4);
-  height: 100%;
-  padding: var(--Spacing-x4) var(--Spacing-x5);
-}
-
 @keyframes slide-in {
   from {
     right: -600px;