72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
import { dt } from "@/lib/dt"
|
|
|
|
import Image from "@/components/Image"
|
|
import Title from "@/components/MyPages/Title"
|
|
|
|
import styles from "./stay.module.css"
|
|
|
|
import type { LangParams } from "@/types/params"
|
|
import type { StayProps } from "@/types/components/myPages/myPage/stays"
|
|
|
|
export default function Stay({
|
|
dateArrive,
|
|
dateDepart,
|
|
guests,
|
|
hotel,
|
|
lang,
|
|
}: StayProps & LangParams) {
|
|
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}>
|
|
<div className={styles.badge}>
|
|
<time className={styles.time}>In {daysUntilArrival} days</time>
|
|
</div>
|
|
<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>
|
|
{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>
|
|
)
|
|
}
|