feat: add ui for stay card

components/Icons/Person.tsx

@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function PersonIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <mask
+        id="mask0_1572_4293"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
+        <rect width="20" height="20" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_1572_4293)">
+        <path
+          d="M10 10C9.16667 10 8.45833 9.70833 7.875 9.125C7.29167 8.54167 7 7.83333 7 7C7 6.16667 7.29167 5.45833 7.875 4.875C8.45833 4.29167 9.16667 4 10 4C10.8333 4 11.5417 4.29167 12.125 4.875C12.7083 5.45833 13 6.16667 13 7C13 7.83333 12.7083 8.54167 12.125 9.125C11.5417 9.70833 10.8333 10 10 10ZM4 14.5V14C4 13.6806 4.08681 13.3785 4.26042 13.0938C4.43403 12.809 4.67361 12.5694 4.97917 12.375C5.74306 11.9306 6.55064 11.5903 7.40192 11.3542C8.25321 11.1181 9.11779 11 9.99567 11C10.8736 11 11.7396 11.1181 12.5938 11.3542C13.4479 11.5903 14.2569 11.9306 15.0208 12.375C15.3264 12.5556 15.566 12.7917 15.7396 13.0833C15.9132 13.375 16 13.6806 16 14V14.5C16 14.9125 15.853 15.2656 15.5591 15.5594C15.2652 15.8531 14.9119 16 14.4992 16H5.4941C5.08137 16 4.72917 15.8531 4.4375 15.5594C4.14583 15.2656 4 14.9125 4 14.5ZM5.5 14.5H14.5V14C14.5 13.9281 14.479 13.8628 14.437 13.8039C14.395 13.7451 14.3396 13.6993 14.2708 13.6667C13.6319 13.2778 12.9514 12.9861 12.2292 12.7917C11.5069 12.5972 10.7639 12.5 10 12.5C9.23611 12.5 8.49306 12.5972 7.77083 12.7917C7.04861 12.9861 6.36806 13.2778 5.72917 13.6667C5.65972 13.7222 5.60417 13.7759 5.5625 13.8276C5.52083 13.8793 5.5 13.9368 5.5 14V14.5ZM10.0044 8.5C10.4181 8.5 10.7708 8.35269 11.0625 8.05808C11.3542 7.76346 11.5 7.40929 11.5 6.99558C11.5 6.58186 11.3527 6.22917 11.0581 5.9375C10.7635 5.64583 10.4093 5.5 9.99558 5.5C9.58186 5.5 9.22917 5.64731 8.9375 5.94192C8.64583 6.23654 8.5 6.59071 8.5 7.00442C8.5 7.41814 8.64731 7.77083 8.94192 8.0625C9.23654 8.35417 9.59071 8.5 10.0044 8.5Z"
+          fill="#1C1B1F"
+        />
+      </g>
+    </svg>
+  )
+}

components/Icons/index.tsx

@@ -12,5 +12,6 @@ export { default as HouseIcon } from "./House"
 export { default as InfoCircleIcon } from "./InfoCircle"
 export { default as LocationIcon } from "./Location"
 export { default as LockIcon } from "./Lock"
+export { default as PersonIcon } from "./Person"
 export { default as PhoneIcon } from "./Phone"
 export { default as PlusCircleIcon } from "./PlusCircle"

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

@@ -1,6 +1,6 @@
 import { dt } from "@/lib/dt"
 
-import { CalendarIcon } from "@/components/Icons"
+import { CalendarIcon, PersonIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
@@ -32,15 +32,21 @@ export default function StayCard({ stay, lang }: StayCardProps) {
         <Title as="h5" className={styles.hotel} level="h3">
           {hotelInformation.hotelName}
         </Title>
-        <div className={styles.date}>
-          <CalendarIcon color="burgundy" />
-          <Caption asChild>
-            <time dateTime={arrivalDateTime}>{arrivalDate}</time>
-          </Caption>
-          {" - "}
-          <Caption asChild>
-            <time dateTime={departDateTime}>{departDate}</time>
-          </Caption>
+        <div className={styles.information}>
+          <div className={styles.date}>
+            <CalendarIcon color="burgundy" className={styles.icon} />
+            <Caption asChild>
+              <time dateTime={arrivalDateTime}>{arrivalDate}</time>
+            </Caption>
+            {" - "}
+            <Caption asChild>
+              <time dateTime={departDateTime}>{departDate}</time>
+            </Caption>
+          </div>
+          <div className={styles.guest}>
+            <PersonIcon color="burgundy" className={styles.icon} />
+            <Caption>2 guests</Caption>
+          </div>
         </div>
       </footer>
     </article>

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

@@ -32,8 +32,19 @@
   text-wrap: nowrap;
 }
 
-.date {
+.information {
+  display: flex;
+  gap: var(--Spacing-x2);
+}
+
+.date,
+.guest {
   align-items: center;
   display: flex;
   gap: var(--Spacing-x-half);
-}
+}
+
+.icon {
+  height: 1.5rem;
+  width: 1.5rem;
+}

components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx

@@ -2,7 +2,6 @@ import { homeHrefs } from "@/constants/homeHrefs"
 import { env } from "@/env/server"
 
 import { ArrowRightIcon } from "@/components/Icons"
-import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"