feat: add scandic icon

2024-07-04 14:43:31 +02:00
parent 85232401c8
commit 81034c8f2f
4 changed files with 138 additions and 8 deletions
--- a/components/HotelReservation/SelectHotel/HotelCard/index.tsx
+++ b/components/HotelReservation/SelectHotel/HotelCard/index.tsx
@@ -1,17 +1,48 @@
+import { ScandicLogoIcon } from "@/components/Icons"
+import Image from "@/components/Image"
+import Button from "@/components/TempDesignSystem/Button"
+import Chip from "@/components/TempDesignSystem/Chip"
+import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"

 import styles from "./hotelCard.module.css"

-import { LangParams } from "@/types/params"
+const chipValues = [
+  "Free cancellation until 18:00",
+  "Breakfast included",
+  "Free WiFi",
+  "Pay at the hotel",
+]

 export default function HotelCard() {
  return (
    <div className={styles.card}>
+      <Image src="" alt="hotel image" className={styles.image} />
      <div className={styles.information}>
-        <Title as="h5" color="red">
-          Scandic
-        </Title>
-        <Title as="h4">Helsinki Hub</Title>
+        <div className={styles.title}>
+          <ScandicLogoIcon color="red" />
+          <Title as="h4">Helsinki Hub</Title>
+        </div>
+        <div className={styles.description}>
+          <span>Kaisaniemenkatu 7, Helsinki</span>
+          <span>
+            Modern urban hotel in a impressive 1920s printing house in Helsinki
+            city centre.
+          </span>
+        </div>
+        <div className={styles.labels}>
+          {chipValues.map((value) => (
+            <Chip key={value}>{value}</Chip>
+          ))}
+        </div>
+        <div className={styles.button}>
+          <Body color="burgundy">
+            <span>Only 4 rooms left</span>
+          </Body>
+          <Button theme="base" intent="primary" size="small">
+            Book from 1549 SEK/night
+          </Button>
+        </div>
      </div>
    </div>
  )