feat(SW-243): implement mobile design

2024-08-19 14:37:17 +02:00
parent 8dae837ef2
commit bdafef492f
9 changed files with 257 additions and 0 deletions
@@ -0,0 +1,41 @@
+.test {
+  display: flex;
+  width: 100%;
+  max-width: 365px;
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-Small);
+  overflow: hidden;
+}
+
+.image {
+  height: 100%;
+  width: 100%;
+  max-width: 105px;
+  object-fit: cover;
+}
+
+.info {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x2);
+  font-family: var(--typography-Caption-Regular-fontFamily);
+  font-size: var(--typography-Caption-Regular-fontSize);
+}
+
+.hotel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-half);
+}
+
+.stay {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-half);
+}
+.dates {
+  display: flex;
+  align-items: center;
+}
@@ -0,0 +1,41 @@
+import { ArrowRightIcon, ScandicLogoIcon } from "@/components/Icons"
+import Image from "@/components/Image"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import styles from "./confirmationCard.module.css"
+
+export default function ConfirmationCard() {
+  return (
+    <section className={styles.test}>
+      <div>
+        <Image
+          src="https://test3.scandichotels.com/imagevault/publishedmedia/i11isd60bh119s9486b7/downtown-camper-by-scandic-lobby-reception-desk-ch.jpg?w=640"
+          alt=""
+          height={400}
+          width={200}
+          className={styles.image}
+        />
+      </div>
+      <div className={styles.info}>
+        <header>
+          <ScandicLogoIcon color="red" />
+          <Title as="h5" textTransform="capitalize">
+            Helsinki Hub
+          </Title>
+        </header>
+        <div className={styles.hotel}>
+          <span>Kaisaniemenkatu 7, Helsinki</span>
+          <span>Call us at +358 300 870680</span>
+        </div>
+        <div className={styles.stay}>
+          <span>1 night</span>
+          <div className={styles.dates}>
+            <span>2024.03.09</span>
+            <ArrowRightIcon height={15} width={15} />
+            <span>2024.03.10</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}