feat: static my stays

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

@@ -0,0 +1,72 @@
+import { dt } from "@/lib/dt"
+import Image from "@/components/Image"
+
+import styles from "./stay.module.css"
+import Title from "@/components/MyPages/Title"
+
+import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
+
+export default function StayCard({
+  stay,
+  lang,
+  showDayCount = false,
+}: StayCardProps) {
+  const { dateArrive, dateDepart, guests, hotel } = stay
+
+  const daysUntilArrival = dt(dateArrive).diff(dt(), "days")
+  const arrival = dt(dateArrive).locale(lang)
+  const arrivalDate = arrival.format("DD MMM")
+  const arrivalDateTime = arrival.format("YYYY-MM-DD")
+  const depart = dt(dateDepart).locale(lang)
+  const departDate = depart.format("DD MMM YYYY")
+  const departDateTime = depart.format("YYYY-MM-DD")
+
+  return (
+    <article className={styles.stay}>
+      <div className={styles.imageContainer}>
+        {showDayCount ? (
+          <div className={styles.badge}>
+            <time className={styles.time}>In {daysUntilArrival} days</time>
+          </div>
+        ) : null}
+        <Image
+          alt="Placeholder image flower"
+          height={73}
+          src="/_static/icons/flower-image.svg"
+          width={73}
+        />
+      </div>
+      <footer className={styles.footer}>
+        <Title as="h5" level="h3" uppercase className={styles.hotel}>
+          {hotel}
+        </Title>
+        <section className={styles.container}>
+          <div className={styles.date}>
+            <Image
+              alt="Calendar Icon"
+              height={20}
+              src="/_static/icons/calendar_month.svg"
+              width={20}
+            />
+            <p>
+              <time dateTime={arrivalDateTime}>{arrivalDate}</time>
+              {" - "}
+              <time dateTime={departDateTime}>{departDate}</time>
+            </p>
+          </div>
+          <div className={styles.guests}>
+            <Image
+              alt="Guests Icon"
+              height={20}
+              src="/_static/icons/person.svg"
+              width={20}
+            />
+            <span>
+              {guests} guest{guests > 1 ? "s" : ""}
+            </span>
+          </div>
+        </section>
+      </footer>
+    </article>
+  )
+}