feat: add ui to empty state overview component

components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css

@@ -3,12 +3,11 @@
   background-color: var(--Scandic-Brand-Pale-Peach);
   border-radius: var(--Corner-radius-Medium);
   display: flex;
-  gap: var(--Spacing-x3);
+  gap: var(--Spacing-x9);
   flex-direction: column;
-  justify-content: center;
   margin-bottom: var(--Spacing-x-half);
   min-height: 250px;
-  padding: var(--Spacing-x0) var(--Spacing-x3);
+  justify-content: end;
 }
 
 .burgundyTitle {
@@ -16,3 +15,14 @@
   display: block;
   text-align: center;
 }
+
+.link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  background-color: var(--Base-Surface-Primary-Normal);
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x0);
+  border-radius: var(--Spacing-x0) var(--Spacing-x0) var(--Corner-radius-Medium)
+    var(--Corner-radius-Medium);
+}

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

@@ -1,11 +1,16 @@
-import Button from "@/components/TempDesignSystem/Button"
+import { homeHrefs } from "@/constants/homeHrefs"
+import { env } from "@/env/server"
+
+import { ArrowRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 
 import styles from "./emptyUpcomingStays.module.css"
 
-export default async function EmptyUpcomingStaysBlock() {
+import { LangParams } from "@/types/params"
+
+export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
   const { formatMessage } = await getIntl()
   return (
     <section className={styles.container}>
@@ -16,9 +21,14 @@ export default async function EmptyUpcomingStaysBlock() {
           {formatMessage({ id: "Where should you go next?" })}
         </span>
       </Title>
-      <Button asChild intent="primary" type="button">
-        <Link href="#">{formatMessage({ id: "Get inspired" })}</Link>
-      </Button>
+      <Link
+        href={homeHrefs[env.NODE_ENV][lang]}
+        className={styles.link}
+        color="peach80"
+      >
+        {formatMessage({ id: "Get inspired" })}
+        <ArrowRightIcon color="peach80" />
+      </Link>
     </section>
   )
 }

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

@@ -34,7 +34,7 @@ export default async function SoonestStays({
           ))}
         </Grids.Stackable>
       ) : (
-        <EmptyUpcomingStaysBlock />
+        <EmptyUpcomingStaysBlock lang={lang} />
       )}
     </SectionContainer>
   )

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

@@ -19,6 +19,8 @@ export default function StayCard({ stay, lang }: StayCardProps) {
   const departDate = depart.format("DD MMM YYYY")
   const departDateTime = depart.format("YYYY-MM-DD")
 
+  const guestAmount = 3
+
   return (
     <article className={styles.stay}>
       <Image
@@ -45,7 +47,7 @@ export default function StayCard({ stay, lang }: StayCardProps) {
           </div>
           <div className={styles.guest}>
             <PersonIcon color="burgundy" className={styles.icon} />
-            <Caption>2 guests</Caption>
+            <Caption>{`${guestAmount} ${guestAmount > 1 ? "Guests" : "Guest"}`}</Caption>
           </div>
         </div>
       </footer>