From 34bcdc3b055dca1cfbb7cc3035fcf492dc14951f Mon Sep 17 00:00:00 2001
From: zyachel <aricla+git@protonmail.com>
Date: Sun, 1 Jun 2025 13:08:06 +0000
Subject: [PATCH] fix(name,title): handle empty states in "did you know"
 section

---
 src/components/name/DidYouKnow.tsx  | 81 ++++++++++++++++-------------
 src/components/title/DidYouKnow.tsx |  8 ++-
 2 files changed, 53 insertions(+), 36 deletions(-)

diff --git a/src/components/name/DidYouKnow.tsx b/src/components/name/DidYouKnow.tsx
index bf65c60..86a5801 100644
--- a/src/components/name/DidYouKnow.tsx
+++ b/src/components/name/DidYouKnow.tsx
@@ -9,43 +9,54 @@ type Props = {
 const DidYouKnow = ({ data }: Props) => (
   <section className={styles.container}>
     <h2 className='heading heading__secondary'>Did you know</h2>
-    {!!data.trivia?.total && (
-      <section>
-        <h3 className='heading heading__tertiary'>Trivia</h3>
-        <div dangerouslySetInnerHTML={{ __html: data.trivia.html }}></div>
-      </section>
-    )}
-    {!!data.quotes?.total && (
-      <section>
-        <h3 className='heading heading__tertiary'>Quotes</h3>
-        <div dangerouslySetInnerHTML={{ __html: data.quotes.html }}></div>
-      </section>
-    )}
-    {!!data.trademark?.total && (
-      <section>
-        <h3 className='heading heading__tertiary'>Trademark</h3>
-        <div dangerouslySetInnerHTML={{ __html: data.trademark.html }}></div>
-      </section>
-    )}
-    {!!data.nicknames.length && (
-      <section>
-        <h3 className='heading heading__tertiary'>Nicknames</h3>
-        <p>{data.nicknames.join(', ')}</p>
-      </section>
-    )}
-    {!!data.salary?.total && (
-      <section>
-        <h3 className='heading heading__tertiary'>Salary</h3>
-        <p>
-          <span>{data.salary.value} in </span>
-          <Link href={`/title/${data.salary.title.id}`}>
-            <a className={'link'}>{data.salary.title.text}</a>
-          </Link>
-          <span> ({data.salary.title.year})</span>
-        </p>
-      </section>
+    {isEmpty(data) ? (
+      <p>Nothing interesting to show.</p>
+    ) : (
+      <>
+        {!!data.trivia?.total && (
+          <section>
+            <h3 className='heading heading__tertiary'>Trivia</h3>
+            <div dangerouslySetInnerHTML={{ __html: data.trivia.html }}></div>
+          </section>
+        )}
+        {!!data.quotes?.total && (
+          <section>
+            <h3 className='heading heading__tertiary'>Quotes</h3>
+            <div dangerouslySetInnerHTML={{ __html: data.quotes.html }}></div>
+          </section>
+        )}
+        {!!data.trademark?.total && (
+          <section>
+            <h3 className='heading heading__tertiary'>Trademark</h3>
+            <div dangerouslySetInnerHTML={{ __html: data.trademark.html }}></div>
+          </section>
+        )}
+        {!!data.nicknames.length && (
+          <section>
+            <h3 className='heading heading__tertiary'>Nicknames</h3>
+            <p>{data.nicknames.join(', ')}</p>
+          </section>
+        )}
+        {!!data.salary?.total && (
+          <section>
+            <h3 className='heading heading__tertiary'>Salary</h3>
+            <p>
+              <span>{data.salary.value} in </span>
+              <Link href={`/title/${data.salary.title.id}`}>
+                <a className={'link'}>{data.salary.title.text}</a>
+              </Link>
+              <span> ({data.salary.title.year})</span>
+            </p>
+          </section>
+        )}
+      </>
     )}
   </section>
 );
 
 export default DidYouKnow;
+
+const isEmpty = (data: Props['data']) =>
+  Boolean(
+    !data.nicknames.length && !data.quotes && !data.salary && !data.trademark && !data.trivia
+  );
\ No newline at end of file
diff --git a/src/components/title/DidYouKnow.tsx b/src/components/title/DidYouKnow.tsx
index 01de91d..66c5ab2 100644
--- a/src/components/title/DidYouKnow.tsx
+++ b/src/components/title/DidYouKnow.tsx
@@ -7,7 +7,13 @@ type Props = {
 };
 
 const DidYouKnow = ({ data }: Props) => {
-  if (!Object.keys(data).length) return <></>;
+  if (!Object.keys(data).length)
+    return (
+      <section className={styles.didYouKnow}>
+        <h2 className='heading heading__secondary'>Did you know</h2>
+        <p>Nothing interesting to show.</p>
+      </section>
+    );
   return (
     <section className={styles.didYouKnow}>
       <h2 className='heading heading__secondary'>Did you know</h2>