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