Add candidate avatar to candidate pages

DublinInquirer · Apr 8, 2024 · b0135d7 · b0135d7
1 parent c13e199
commit b0135d7
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/src/components/CandidateAvatar.astro b/src/components/CandidateAvatar.astro
@@ -6,9 +6,10 @@ import Link from "./Link.astro";
 interface Props {
   candidateFullName: string;
   profilePictureUrl?: string;
+  showName?: boolean;
 }
 
-const { candidateFullName, profilePictureUrl } = Astro.props;
+const { candidateFullName, profilePictureUrl, showName = true } = Astro.props;
 const srcUrl = profilePictureUrl
   ? `https://i0.wp.com/dublininquirer.com${new URL(profilePictureUrl).pathname}?resize=64%2C64&ssl=1`
   : "data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==";
@@ -17,8 +18,10 @@ const srcUrl = profilePictureUrl
 <div class="p-1">
   <Link to={`candidates/${lodash.kebabCase(candidateFullName)}`}>
     <img src={srcUrl} class="rounded-full w-16 h-16" />
-    <p class="text-xs text-center w-16">
-      {candidateFullName}
-    </p>
+    {
+      showName ? (
+        <p class="text-xs text-center w-16">{candidateFullName}</p>
+      ) : null
+    }
   </Link>
 </div>
diff --git a/src/pages/candidates/[candidate].astro b/src/pages/candidates/[candidate].astro
@@ -5,6 +5,7 @@ import { marked } from "marked";
 import {
   airtableClient,
   getLookupFieldValue,
+  getOptionalStringFieldValue,
   getStringFieldValue,
 } from "../../airtable-api";
 import Layout from "../../layouts/Layout.astro";
@@ -13,6 +14,7 @@ import HeaderTitle from "../../components/HeaderTitle.astro";
 import HeaderSubtitle from "../../components/HeaderSubtitle.astro";
 import QuestionText from "../../components/QuestionText.astro";
 import Link from "../../components/Link.astro";
+import CandidateAvatar from "../../components/CandidateAvatar.astro";
 
 export async function getStaticPaths() {
   const candidates = await airtableClient("Candidates")
@@ -40,6 +42,10 @@ export async function getStaticPaths() {
       candidateRecord,
       "Area local authority name"
     );
+    const candidateProfilePictureUrl = getOptionalStringFieldValue(
+      candidateRecord,
+      "Profile picture"
+    );
 
     const questions = questionRecords
       .filter(
@@ -73,6 +79,7 @@ export async function getStaticPaths() {
         candidateFullName,
         candidateAreaName,
         candidateAreaLocalAuthorityName,
+        candidateProfilePictureUrl,
         questions,
         hasAnswers,
       },
@@ -84,13 +91,21 @@ const {
   candidateFullName,
   candidateAreaName,
   candidateAreaLocalAuthorityName,
+  candidateProfilePictureUrl,
   questions,
   hasAnswers,
 } = Astro.props;
 ---
 
 <Layout>
   <HeaderSection>
+    <div class="flex place-content-center">
+      <CandidateAvatar
+        candidateFullName={candidateFullName}
+        profilePictureUrl={candidateProfilePictureUrl}
+        showName={false}
+      />
+    </div>
     <HeaderTitle>{candidateFullName}</HeaderTitle>
     <HeaderSubtitle>
       Candidate for