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

components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx

@@ -0,0 +1,51 @@
+import Button from "@/components/TempDesignSystem/Button"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+
+import styles from "./roomCard.module.css"
+
+import { RoomCardProps } from "@/types/components/hotelReservation/selectRate/roomCard"
+
+export default async function RoomCard({ room }: RoomCardProps) {
+  const { formatMessage } = await getIntl()
+  return (
+    <div className={styles.card}>
+      <div className={styles.cardBody}>
+        <div>
+          <Title className={styles.name} as="h5" level="h3">
+            {room.name}
+          </Title>
+          <div className={styles.nameInfo}>i</div>
+        </div>
+        <Caption color="burgundy">{room.size}</Caption>
+        <Caption color="burgundy">{room.description}</Caption>
+
+        <Caption color="burgundy">
+          {/* TODO: Handle currency and this whole line of text in a better way through intl */}
+          {formatMessage({ id: "From" })}{" "}
+          <span className={styles.price}>{room.pricePerNight}</span>{" "}
+          {room.currency}/{formatMessage({ id: "night" })}
+        </Caption>
+
+        <Button
+          asChild
+          type="button"
+          size="small"
+          theme="primaryDark"
+          className={styles.button}
+        >
+          <label htmlFor={`room-${room.id}`}>
+            {formatMessage({ id: "Choose room" })}
+          </label>
+        </Button>
+      </div>
+      {/* TODO: maybe use the `Image` component instead of the `img` tag. Waiting until we know how to get the image */}
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        alt={formatMessage({ id: "A photo of the room" })}
+        src={room.imageSrc}
+      />
+    </div>
+  )
+}

components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css

@@ -0,0 +1,39 @@
+.card {
+  font-size: 14px;
+  text-align: center;
+  display: flex;
+  flex-direction: column-reverse;
+  background-color: #fff;
+  border-radius: var(--Corner-radius-Small);
+  border: 1px solid rgba(77, 0, 27, 0.1);
+}
+
+.cardBody {
+  padding: var(--Spacing-x2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
+}
+
+.name {
+  display: inline-block;
+}
+.nameInfo {
+  float: right;
+}
+
+.price {
+  font-size: 24px;
+  font-weight: 600;
+  text-align: center;
+}
+
+.card .button {
+  display: inline;
+}
+
+.card img {
+  max-width: 100%;
+  aspect-ratio: 2.45;
+  object-fit: cover;
+}

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;
+}