feat(SW-72): move the room selection to its own component

app/[lang]/(live)/(public)/hotelreservation/select-rate/page.module.css

@@ -1,8 +1,3 @@
-.header {
-  margin-top: var(--Spacing-x2);
-  margin-bottom: var(--Spacing-x2);
-}
-
 .hotelInfo {
   margin-bottom: 64px;
 }
@@ -20,22 +15,3 @@
   margin-left: auto;
   margin-right: auto;
 }
-
-.page input[type="radio"] {
-  opacity: 0;
-  position: fixed;
-  width: 0;
-}
-
-.roomList {
-  margin-top: var(--Spacing-x4);
-  list-style: none;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  column-gap: var(--Spacing-x2);
-  row-gap: var(--Spacing-x4);
-}
-
-.roomList > li {
-  width: 100%;
-}

app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx

@@ -1,13 +1,10 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import RoomCard from "@/components/HotelReservation/SelectRate/RoomCard"
+import RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection"
-import Header from "@/components/Section/Header"
-import { getIntl } from "@/i18n"
 
 import styles from "./page.module.css"
 
 export default async function SelectRate() {
-  const { formatMessage } = await getIntl()
   const rooms = await serverClient().hotel.getRates({
     // TODO: pass the correct hotel ID and all other parameters that should be included in the search
     hotelId: "1",
@@ -17,34 +14,7 @@ export default async function SelectRate() {
     <div className={styles.page}>
       <main className={styles.content}>
         <div className={styles.hotelInfo}>Hotel info TBI</div>
-        <div className={styles.header}>
+        <RoomSelection rooms={rooms} />
-          <Header
-            title={formatMessage({ id: "Choose room" })}
-            subtitle={formatMessage({
-              id: "Which room class suits you the best?",
-            })}
-            link={{
-              href: "#",
-              text: formatMessage({
-                id: "All rooms comes with standard amenities",
-              }),
-            }}
-          />
-        </div>
-
-        <ul className={styles.roomList}>
-          {rooms.map((room) => (
-            <li key={room.id}>
-              <input
-                type="radio"
-                name="room"
-                value={room.id}
-                id={`room-${room.id}`}
-              />
-              <RoomCard room={room} />
-            </li>
-          ))}
-        </ul>
       </main>
     </div>
   )

components/HotelReservation/SelectRate/RoomSelection/index.tsx

@@ -0,0 +1,45 @@
+import Header from "@/components/Section/Header"
+import { getIntl } from "@/i18n"
+
+import RoomCard from "./RoomCard"
+
+import styles from "./roomSelection.module.css"
+
+import { RoomSelectionProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
+
+export default async function RoomSelection({ rooms }: RoomSelectionProps) {
+  const { formatMessage } = await getIntl()
+
+  return (
+    <div>
+      <div className={styles.header}>
+        <Header
+          title={formatMessage({ id: "Choose room" })}
+          subtitle={formatMessage({
+            id: "Which room class suits you the best?",
+          })}
+          link={{
+            href: "#",
+            text: formatMessage({
+              id: "All rooms comes with standard amenities",
+            }),
+          }}
+        />
+      </div>
+
+      <ul className={styles.roomList}>
+        {rooms.map((room) => (
+          <li key={room.id}>
+            <input
+              type="radio"
+              name="room"
+              value={room.id}
+              id={`room-${room.id}`}
+            />
+            <RoomCard room={room} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css

@@ -0,0 +1,23 @@
+.header {
+  margin-top: var(--Spacing-x2);
+  margin-bottom: var(--Spacing-x2);
+}
+
+.roomList {
+  margin-top: var(--Spacing-x4);
+  list-style: none;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  column-gap: var(--Spacing-x2);
+  row-gap: var(--Spacing-x4);
+}
+
+.roomList > li {
+  width: 100%;
+}
+
+.roomList input[type="radio"] {
+  opacity: 0;
+  position: fixed;
+  width: 0;
+}

types/components/hotelReservation/selectRate/roomSelection.ts

@@ -0,0 +1,5 @@
+import { Rate } from "@/server/routers/hotels/output"
+
+export type RoomSelectionProps = {
+  rooms: Rate[]
+}