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 Header from "@/components/Section/Header"
-import { getIntl } from "@/i18n"
+import RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection"
 
 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}>
-          <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>
+        <RoomSelection rooms={rooms} />
       </main>
     </div>
   )