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