Empty respones message for area page

src/pages/areas/[localAuthority]/[area].astro

@@ -86,6 +86,10 @@ export async function getStaticPaths() {
       };
     });
 
+    const hasAnswers = questions.some((question) =>
+      question.answers.some((answer) => Boolean(answer.answer))
+    );
+
     return {
       params: {
         localAuthority: lodash.kebabCase(
@@ -96,12 +100,13 @@ export async function getStaticPaths() {
       props: {
         area: electoralAreaName,
         questions,
+        hasAnswers,
       },
     };
   });
 }
 
-const { area, questions } = Astro.props;
+const { area, questions, hasAnswers } = Astro.props;
 ---
 
 <Layout>
@@ -110,23 +115,27 @@ const { area, questions } = Astro.props;
   </HeaderSection>
   <main class="px-gutter">
     {
-      questions.map((question) => (
-        <>
-          <QuestionText>{question.text}</QuestionText>
-          {question.answers.map((answer) => (
-            <>
-              <h3>
-                <Link
-                  to={`candidates/${lodash.kebabCase(answer.candidateFullName)}`}
-                >
-                  {answer.candidateFullName}
-                </Link>
-              </h3>
-              <p>{answer.answer}</p>
-            </>
-          ))}
-        </>
-      ))
+      hasAnswers ? (
+        questions.map((question) => (
+          <>
+            <QuestionText>{question.text}</QuestionText>
+            {question.answers.map((answer) => (
+              <>
+                <h3>
+                  <Link
+                    to={`candidates/${lodash.kebabCase(answer.candidateFullName)}`}
+                  >
+                    {answer.candidateFullName}
+                  </Link>
+                </h3>
+                <p>{answer.answer}</p>
+              </>
+            ))}
+          </>
+        ))
+      ) : (
+        <p>No candidates in this area have provided answers yet.</p>
+      )
     }
   </main>
 </Layout>