v3 - InformationMessage Component + replacement in main/page.tsx

src/app/(main)/page.tsx

@@ -6,13 +6,12 @@ import SectionRenderer from "src/utils/renderSection";
 import { loadQuery } from "studio/lib/store";
 import { Metadata } from "next";
 import { fetchSeoData, generateMetadataFromSeo } from "src/utils/seo";
-import CustomErrorMessage from "src/blog/components/customErrorMessage/CustomErrorMessage";
+import InformationSection from "src/blog/components/informationSection/InformationSection";
 import { LinkType } from "studio/lib/payloads/navigation";
 
 export async function generateMetadata(): Promise<Metadata> {
   const { data: landingId } = await loadQuery<string>(LANDING_QUERY);
   const seo = await fetchSeoData(SEO_PAGE_QUERY, { id: landingId });
-
   return generateMetadataFromSeo(seo);
 }
 
@@ -43,9 +42,11 @@ const Home = async () => {
 
   if (!landingId) {
     return (
-      <CustomErrorMessage
-        title="Landing Page Has Not Been Set"
-        body="It looks like there's no page set as your landing page in the Studio. Head over to the Studio to select a landing page and guide visitors to the right place!"
+      <InformationSection
+        title="Welcome! Velkommen! Välkommen!"
+        body={
+          "It looks like there's no page set as your landing page in the Studio.\nHead over to the Studio to select a landing page and guide visitors to the right place!"
+        }
         link={navigationManagerLink}
       />
     );
@@ -59,9 +60,9 @@ const Home = async () => {
 
   if (!initialLandingPage.data) {
     return (
-      <CustomErrorMessage
+      <InformationSection
         title="Landing Page is Missing Content"
-        body={`Your landing page is set, but it looks like there’s no content yet. Visit the Studio to start adding content and make your landing page come to life!`}
+        body={`Your landing page is set, but it looks like there’s no content yet.\n Visit the Studio to start adding content and make your landing page come to life!`}
         link={pagesLink}
       />
     );

src/blog/Blog.tsx

@@ -8,9 +8,8 @@ import BlogHero from "./components/hero/BlogHero";
 import PostPreview from "src/blog/components/postPreview/PostPreview";
 import PostPreviewGrid from "./components/postPreviewGrid/PostPreviewGrid";
 import LoadingNews from "./components/loadingNews/LoadingNews";
-import CustomErrorMessage, {
-  homeLink,
-} from "./components/customErrorMessage/CustomErrorMessage";
+import CustomErrorMessage from "./components/customErrorMessage/CustomErrorMessage";
+import { homeLink } from "./components/utils/linkTypes";
 
 interface BlogProps {
   blog: BlogPage;

src/blog/components/customErrorMessage/CustomErrorMessage.tsx

@@ -1,27 +1,9 @@
 import Button from "src/components/buttons/Button";
 import LinkButton from "src/components/linkButton/LinkButton";
 import Text from "src/components/text/Text";
-import { ILink, LinkType } from "studio/lib/payloads/navigation";
+import { ILink } from "studio/lib/payloads/navigation";
 import styles from "./customErrorMessage.module.css";
 
-export const homeLink = {
-  _key: "return-home",
-  _type: "link",
-  linkTitle: "Return to home",
-  linkType: LinkType.Internal,
-  internalLink: {
-    _ref: "/",
-  },
-};
-
-export const studioLink = {
-  _key: "go-to-studio",
-  _type: "link",
-  linkTitle: "Go to studio",
-  linkType: LinkType.Internal,
-  internalLink: { _ref: "/studio" },
-};
-
 interface CustomErrorMessageProps {
   title: string;
   body: string;

src/blog/components/informationSection/InformationSection.tsx

@@ -0,0 +1,34 @@
+import LinkButton from "src/components/linkButton/LinkButton";
+import Text from "src/components/text/Text";
+import { ILink } from "studio/lib/payloads/navigation";
+import styles from "./informationSection.module.css";
+import React from "react";
+
+interface InformationSectionProps {
+  title: string;
+  body: string;
+  link?: ILink;
+}
+
+const InformationSection = ({ title, body, link }: InformationSectionProps) => {
+  return (
+    <section className={styles.wrapper}>
+      <div className={styles.info}>
+        <Text type="h1">{title}</Text>
+        <span>
+          {body.split("\n").map((line, index) => (
+            <Text key={index}>
+              {line}
+              <br />
+            </Text>
+          ))}
+        </span>
+        <div className={styles.buttonWrapper}>
+          {link && <LinkButton type="primary" link={link} />}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default InformationSection;

src/blog/components/informationSection/informationSection.module.css

@@ -0,0 +1,31 @@
+.wrapper {
+  display: flex;
+  padding: 5rem 2rem;
+  align-items: center;
+  align-self: stretch;
+  @media (min-width: 640px) {
+    padding: 5rem 3rem;
+    justify-content: center;
+  }
+
+  @media (min-width: 1024px) {
+    padding: 7.5rem;
+  }
+}
+
+.info {
+  max-width: 88rem;
+  display: flex;
+  padding: 3rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1.5rem;
+  align-self: stretch;
+  border-radius: 1rem;
+}
+
+.buttonWrapper {
+  display: flex;
+  align-items: flex-start;
+  gap: 1.5rem;
+}

src/blog/components/utils/linkTypes.ts

@@ -0,0 +1,19 @@
+import { LinkType } from "studio/lib/payloads/navigation";
+
+export const homeLink = {
+  _key: "return-home",
+  _type: "link",
+  linkTitle: "Return to home",
+  linkType: LinkType.Internal,
+  internalLink: {
+    _ref: "/",
+  },
+};
+
+export const studioLink = {
+  _key: "go-to-studio",
+  _type: "link",
+  linkTitle: "Go to studio",
+  linkType: LinkType.Internal,
+  internalLink: { _ref: "/studio" },
+};