feat(SW-243): add temp data

components/HotelReservation/BookingConfirmation/SummarySection/index.tsx

@@ -0,0 +1,35 @@
+import React from "react"
+
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+
+import styles from "./summarySection.module.css"
+
+import { SummarySectionProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
+
+export default async function SummarySection({ summary }: SummarySectionProps) {
+  const intl = await getIntl()
+  return (
+    <section className={styles.section}>
+      <Title as="h4" textAlign="center">
+        {intl.formatMessage({ id: "Summary" })}
+      </Title>
+      <div className={styles.summary}>
+        <span>{`Type of room: ${summary.roomType}`}</span>
+        <span>1648 SEK</span>
+      </div>
+      <div className={styles.summary}>
+        <span>{`Type of bed: ${summary.bedType}`}</span>
+        <span>0 SEK</span>
+      </div>
+      <div className={styles.summary}>
+        <span>{`Breakfast: ${summary.breakfast}`}</span>
+        <span>198 SEK</span>
+      </div>
+      <div className={styles.summary}>
+        <span>{`Flexibility: ${summary.flexibility}`}</span>
+        <span>200 SEK</span>
+      </div>
+    </section>
+  )
+}

components/HotelReservation/BookingConfirmation/SummarySection/summarySection.module.css

@@ -0,0 +1,12 @@
+.section {
+  width: 100%;
+}
+
+.summary {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--Spacing-x2) var(--Spacing-x0);
+  font-family: var(--typography-Caption-Regular-fontFamily);
+  font-size: var(--typography-Caption-Regular-fontSize);
+  border-bottom: 1px solid var(--Base-Border-Subtle);
+}