feat(SW-66, SW-348): search functionality and ui

components/Blocks/DynamicContent/Stays/StayCard/index.tsx

@@ -0,0 +1,55 @@
+"use client"
+import { dt } from "@/lib/dt"
+
+import { CalendarIcon } from "@/components/Icons"
+import Image from "@/components/Image"
+import Link from "@/components/TempDesignSystem/Link"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import useLang from "@/hooks/useLang"
+
+import styles from "./stay.module.css"
+
+import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
+
+export default function StayCard({ stay }: StayCardProps) {
+  const lang = useLang()
+  const { checkinDate, checkoutDate, hotelInformation, bookingUrl } =
+    stay.attributes
+
+  const arrival = dt(checkinDate).locale(lang)
+  const arrivalDate = arrival.format("DD MMM")
+  const arrivalDateTime = arrival.format("YYYY-MM-DD")
+  const depart = dt(checkoutDate).locale(lang)
+  const departDate = depart.format("DD MMM YYYY")
+  const departDateTime = depart.format("YYYY-MM-DD")
+
+  return (
+    <Link href={bookingUrl}>
+      <article className={styles.stay}>
+        <Image
+          className={styles.image}
+          alt={hotelInformation.hotelContent.images.metaData.altText}
+          src={hotelInformation.hotelContent.images.imageSizes.small}
+          width={420}
+          height={240}
+        />
+        <footer className={styles.footer}>
+          <Title as="h5" className={styles.hotel} level="h3">
+            {hotelInformation.hotelName}
+          </Title>
+          <div className={styles.date}>
+            <CalendarIcon color="burgundy" height={24} width={24} />
+            <Caption asChild>
+              <time dateTime={arrivalDateTime}>{arrivalDate}</time>
+            </Caption>
+            {" - "}
+            <Caption asChild>
+              <time dateTime={departDateTime}>{departDate}</time>
+            </Caption>
+          </div>
+        </footer>
+      </article>
+    </Link>
+  )
+}

components/Blocks/DynamicContent/Stays/StayCard/stay.module.css

@@ -0,0 +1,43 @@
+.stay {
+  background-color: var(--Main-Grey-White);
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-Medium);
+  display: grid;
+  overflow: hidden;
+}
+
+.stay:hover {
+  border: 1.5px solid var(--Base-Border-Hover);
+}
+
+.image {
+  height: auto;
+  min-height: 220px;
+  object-fit: cover;
+  overflow: hidden;
+  width: 100%;
+}
+
+.footer {
+  color: var(--Scandic-Brand-Burgundy);
+  display: grid;
+  gap: var(--Spacing-x2);
+  margin-top: auto;
+  overflow: hidden;
+  padding: var(--Spacing-x2);
+  width: 100%;
+}
+
+.hotel {
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+}
+
+.date {
+  align-items: center;
+  display: flex;
+  gap: var(--Spacing-x-half);
+}