fix(name,title): handle empty states in "did you know" section

src/components/name/DidYouKnow.tsx

@@ -9,6 +9,10 @@ type Props = {
 const DidYouKnow = ({ data }: Props) => (
   <section className={styles.container}>
     <h2 className='heading heading__secondary'>Did you know</h2>
+    {isEmpty(data) ? (
+      <p>Nothing interesting to show.</p>
+    ) : (
+      <>
         {!!data.trivia?.total && (
           <section>
             <h3 className='heading heading__tertiary'>Trivia</h3>
@@ -45,7 +49,14 @@ const DidYouKnow = ({ data }: Props) => (
             </p>
           </section>
         )}
+      </>
+    )}
   </section>
 );
 
 export default DidYouKnow;
+
+const isEmpty = (data: Props['data']) =>
+  Boolean(
+    !data.nicknames.length && !data.quotes && !data.salary && !data.trademark && !data.trivia
+  );

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>