fix: course card shouldn't be an <a> when it has no certificate

mwskwong · Dec 27, 2024 · 0451c0b · 0451c0b
1 parent 350e535
commit 0451c0b
Showing 1 changed file with 49 additions and 39 deletions.
diff --git a/src/app/education/page.tsx b/src/app/education/page.tsx
@@ -108,45 +108,55 @@ const EducationPage = async () => {
                   completedOn,
                   certificate,
                   categories,
-                }) => (
-                  <Card key={id} asChild>
-                    <a href={certificate} rel="noopener" target="_blank">
-                      <Flex direction="column" height="100%">
-                        {institution?.logo ? (
-                          <Flex align="center" justify="between">
-                            <Image
-                              alt={institution.name}
-                              className="object-scale-down"
-                              height={24}
-                              src={institution.logo}
-                              width={24}
-                            />
-                            <Badge color="gray">{institution.name}</Badge>
-                          </Flex>
-                        ) : null}
-                        <Heading as="h3" mt="4" size="4">
-                          {name}
-                        </Heading>
-                        <Text as="p" color="gray" mt="2" size="2">
-                          Completed on {dateFormatter.format(completedOn)}
-                        </Text>
-                        {categories ? (
-                          <Flex gap="3" mt="auto" pt="4">
-                            {categories.map((category) => (
-                              <Badge
-                                key={category}
-                                color={courseCategoryColors[category]}
-                                size="3"
-                              >
-                                {category}
-                              </Badge>
-                            ))}
-                          </Flex>
-                        ) : null}
-                      </Flex>
-                    </a>
-                  </Card>
-                ),
+                }) => {
+                  const content = (
+                    <Flex direction="column" height="100%">
+                      {institution?.logo ? (
+                        <Flex align="center" justify="between">
+                          <Image
+                            alt={institution.name}
+                            className="object-scale-down"
+                            height={24}
+                            src={institution.logo}
+                            width={24}
+                          />
+                          <Badge color="gray">{institution.name}</Badge>
+                        </Flex>
+                      ) : null}
+                      <Heading as="h3" mt="4" size="4">
+                        {name}
+                      </Heading>
+                      <Text as="p" color="gray" mt="2" size="2">
+                        Completed on {dateFormatter.format(completedOn)}
+                      </Text>
+                      {categories ? (
+                        <Flex gap="3" mt="auto" pt="4">
+                          {categories.map((category) => (
+                            <Badge
+                              key={category}
+                              color={courseCategoryColors[category]}
+                              size="3"
+                            >
+                              {category}
+                            </Badge>
+                          ))}
+                        </Flex>
+                      ) : null}
+                    </Flex>
+                  );
+
+                  return (
+                    <Card key={id} asChild={Boolean(certificate)}>
+                      {certificate ? (
+                        <a href={certificate} rel="noopener" target="_blank">
+                          {content}
+                        </a>
+                      ) : (
+                        content
+                      )}
+                    </Card>
+                  );
+                },
               )}
             </Grid>
           </Section>