feat(SW-66, SW-348): search functionality and ui

components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css

@@ -0,0 +1,32 @@
+.container {
+  display: grid;
+  grid-template-rows: 1fr min(50px);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-Medium);
+  min-height: 250px;
+  margin-bottom: var(--Spacing-x-half);
+  overflow: hidden;
+}
+
+.titleContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--Scandic-Brand-Pale-Peach);
+}
+
+.title {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.burgundyTitle {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

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

@@ -0,0 +1,34 @@
+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 { getLang } from "@/i18n/serverContext"
+
+import styles from "./emptyUpcomingStays.module.css"
+
+export default async function EmptyUpcomingStaysBlock() {
+  const { formatMessage } = await getIntl()
+  return (
+    <section className={styles.container}>
+      <div className={styles.titleContainer}>
+        <Title as="h5" level="h3" color="red" className={styles.title}>
+          {formatMessage({ id: "You have no upcoming stays." })}
+          <span className={styles.burgundyTitle}>
+            {formatMessage({ id: "Where should you go next?" })}
+          </span>
+        </Title>
+      </div>
+      <Link
+        href={homeHrefs[env.NODE_ENV][getLang()]}
+        className={styles.link}
+        color="peach80"
+      >
+        {formatMessage({ id: "Get inspired" })}
+        <ArrowRightIcon color="peach80" />
+      </Link>
+    </section>
+  )
+}