feat(website): add links to project cards

semaphore-protocol · Jan 10, 2024 · 173ad73 · 173ad73
1 parent 767df87
commit 173ad73
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 41 deletions.
diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
@@ -74,7 +74,9 @@ export default function Home() {
                                 title={project.name}
                                 description={project.tagline}
                                 categories={project.categories}
-                                url={project.links.website || project.links.github}
+                                url={project.links.website}
+                                githubUrl={project.links.github}
+                                discordUrl={project.links.discord}
                             />
                         ))}
                     </VStack>

diff --git a/apps/website/src/components/Carousel.tsx b/apps/website/src/components/Carousel.tsx
@@ -91,7 +91,9 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps
                                     title={project.name}
                                     description={project.tagline}
                                     categories={project.categories}
-                                    url={project.links.website || project.links.github}
+                                    url={project.links.website}
+                                    githubUrl={project.links.github}
+                                    discordUrl={project.links.discord}
                                 />
                             </Box>
                         ))}

diff --git a/apps/website/src/components/NavbarLinks.tsx b/apps/website/src/components/NavbarLinks.tsx
@@ -28,25 +28,26 @@ export default function NavbarLinks({ onClick }: NavbarProps) {
             <Link
                 onClick={onClick}
                 as={NextLink}
-                href="/learn"
+                href="/build"
                 variant="navlink"
-                borderBottomColor={pathname === "/learn" ? "ceruleanBlue" : "transparent"}
+                borderBottomColor={pathname === "/build" ? "ceruleanBlue" : "transparent"}
             >
                 <Heading fontSize="18px" fontWeight="normal">
-                    Learn
+                    Build
                 </Heading>
             </Link>
             <Link
                 onClick={onClick}
                 as={NextLink}
-                href="/build"
+                href="/learn"
                 variant="navlink"
-                borderBottomColor={pathname === "/build" ? "ceruleanBlue" : "transparent"}
+                borderBottomColor={pathname === "/learn" ? "ceruleanBlue" : "transparent"}
             >
                 <Heading fontSize="18px" fontWeight="normal">
-                    Build
+                    Learn
                 </Heading>
             </Link>
+
             <Link href="https://docs.semaphore.pse.dev" variant="navlink" isExternal>
                 <HStack spacing="3">
                     <Heading fontSize="18px" fontWeight="normal">

diff --git a/apps/website/src/components/ProjectCard.tsx b/apps/website/src/components/ProjectCard.tsx
@@ -1,42 +1,74 @@
-import { Card, CardBody, HStack, Heading, Link, LinkProps, Tag, Text } from "@chakra-ui/react"
+import { Card, CardBody, CardFooter, HStack, Heading, Link, LinkProps, Tag, Text } from "@chakra-ui/react"
+import IconDiscord from "../icons/IconDiscord"
+import IconGithub from "../icons/IconGithub"
+import IconWebsite from "../icons/IconWebsite"
 
 export type ProjectCardProps = {
     categories: string[]
     title: string
     description: string
     url?: string
+    githubUrl?: string
+    discordUrl?: string
 }
 
-export default function ProjectCard({ categories, title, description, url, ...props }: ProjectCardProps & LinkProps) {
+export default function ProjectCard({
+    categories,
+    title,
+    description,
+    url,
+    githubUrl,
+    discordUrl,
+    ...props
+}: ProjectCardProps & LinkProps) {
     return (
-        <Link href={url} isExternal h="full" {...props}>
-            <Card
-                bg="darkBlue"
-                borderRadius="18px"
-                color="white"
-                border="1px"
-                borderColor="alabaster.950"
-                padding="55px 34px 55px 34px"
-                w="full"
-                h="full"
-                _hover={{ borderColor: "ceruleanBlue" }}
-            >
-                <HStack gap="8px" mb="2rem" wrap="wrap">
-                    {categories.map((category) => (
-                        <Tag variant="outline" key={category}>
-                            {category}
-                        </Tag>
-                    ))}
-                </HStack>
-                <CardBody padding={0}>
-                    <Heading fontSize="24px" lineHeight="33px">
-                        {title}
-                    </Heading>
-                    <Text mt="1rem" gap="10px" fontSize="14px" lineHeight="22.4px">
-                        {description}
-                    </Text>
-                </CardBody>
-            </Card>
-        </Link>
+        <Card
+            bg="darkBlue"
+            borderRadius="18px"
+            color="white"
+            border="1px"
+            borderColor="alabaster.950"
+            padding="34px"
+            w="full"
+            h="full"
+            _hover={{ borderColor: "ceruleanBlue" }}
+        >
+            <HStack gap="8px" mb="2rem" wrap="wrap">
+                {categories.map((category) => (
+                    <Tag variant="outline" key={category}>
+                        {category}
+                    </Tag>
+                ))}
+            </HStack>
+            <CardBody padding={0}>
+                <Heading fontSize="24px" lineHeight="33px">
+                    {title}
+                </Heading>
+                <Text mt="1rem" gap="10px" fontSize="14px" lineHeight="22.4px">
+                    {description}
+                </Text>
+            </CardBody>
+            {(url || githubUrl || discordUrl) && (
+                <CardFooter pb="0" pl="0">
+                    <HStack>
+                        {githubUrl && (
+                            <Link href={githubUrl} isExternal>
+                                <IconGithub boxSize={{ base: "16px", md: "24px" }} />
+                            </Link>
+                        )}
+                        {url && (
+                            <Link href={url} isExternal>
+                                <IconWebsite boxSize={{ base: "16px", md: "24px" }} />
+                            </Link>
+                        )}
+                        {discordUrl && (
+                            <Link href={discordUrl} isExternal>
+                                <IconDiscord boxSize={{ base: "16px", md: "24px" }} />
+                            </Link>
+                        )}
+                    </HStack>
+                </CardFooter>
+            )}
+        </Card>
     )
 }
diff --git a/apps/website/src/components/ProjectsList.tsx b/apps/website/src/components/ProjectsList.tsx
@@ -105,7 +105,9 @@ export default function ProjectsList(props: any) {
                                 title={project.name}
                                 description={project.tagline}
                                 categories={project.categories}
-                                url={project.links.website || project.links.github}
+                                url={project.links.website}
+                                githubUrl={project.links.github}
+                                discordUrl={project.links.discord}
                             />
                         </GridItem>
                     ))}

diff --git a/apps/website/src/data/projects.json b/apps/website/src/data/projects.json
@@ -105,7 +105,7 @@
         "pse": true,
         "icon": "",
         "links": {
-            "website": "https://community.semaphore.pse.dev/semaphore-explorer",
+            "website": "https://explorer.semaphore.pse.dev",
             "github": "https://github.com/semaphore-protocol/explorer",
             "discord": "https://semaphore.pse.dev/discord"
         }

diff --git a/apps/website/src/icons/IconGithub.tsx b/apps/website/src/icons/IconGithub.tsx
@@ -0,0 +1,13 @@
+import { Icon, IconProps } from "@chakra-ui/react"
+import React from "react"
+
+export default function IconGithub(props: IconProps): JSX.Element {
+    return (
+        <Icon viewBox="0 0 22 23" {...props}>
+            <path
+                d="M10.9997 2.69641C5.93509 2.69641 1.83301 6.79849 1.83301 11.8631C1.83197 13.7874 2.43692 15.6632 3.56204 17.2244C4.68716 18.7855 6.27531 19.9527 8.10118 20.5604C8.55951 20.6402 8.73093 20.3652 8.73093 20.1241C8.73093 19.9068 8.71901 19.1854 8.71901 18.4172C6.41634 18.8417 5.82051 17.8562 5.63718 17.3402C5.53359 17.0762 5.08718 16.2631 4.69759 16.0449C4.37676 15.8735 3.91843 15.4491 4.68568 15.4381C5.40801 15.4262 5.92318 16.1027 6.09551 16.3777C6.92051 17.7637 8.23868 17.3741 8.76484 17.1339C8.84551 16.5381 9.08568 16.1375 9.34968 15.9083C7.31009 15.6792 5.17884 14.8881 5.17884 11.3818C5.17884 10.3845 5.53359 9.56041 6.11843 8.91783C6.02676 8.68866 5.70593 7.74908 6.21009 6.48866C6.21009 6.48866 6.97734 6.24849 8.73093 7.42916C9.47715 7.22205 10.2482 7.11781 11.0226 7.11933C11.8018 7.11933 12.5809 7.22199 13.3143 7.42824C15.0669 6.23658 15.8351 6.48958 15.8351 6.48958C16.3393 7.74999 16.0184 8.68958 15.9268 8.91874C16.5107 9.56041 16.8663 10.3735 16.8663 11.3818C16.8663 14.9 14.7241 15.6792 12.6845 15.9083C13.0163 16.1943 13.3033 16.7443 13.3033 17.6042C13.3033 18.8297 13.2913 19.8152 13.2913 20.125C13.2913 20.3652 13.4637 20.6512 13.922 20.5595C15.7416 19.9451 17.3228 18.7757 18.4429 17.2156C19.5631 15.6556 20.1658 13.7836 20.1663 11.8631C20.1663 6.79849 16.0643 2.69641 10.9997 2.69641Z"
+                fill="currentColor"
+            />
+        </Icon>
+    )
+}
diff --git a/apps/website/src/icons/IconWebsite.tsx b/apps/website/src/icons/IconWebsite.tsx
@@ -0,0 +1,13 @@
+import { Icon, IconProps } from "@chakra-ui/react"
+import React from "react"
+
+export default function IconWebsite(props: IconProps): JSX.Element {
+    return (
+        <Icon viewBox="0 0 18 18" {...props}>
+            <path
+                d="M9.00033 17.1963C4.39783 17.1963 0.666992 13.4655 0.666992 8.863C0.666992 4.2605 4.39783 0.529663 9.00033 0.529663C13.6028 0.529663 17.3337 4.2605 17.3337 8.863C17.3337 13.4655 13.6028 17.1963 9.00033 17.1963ZM7.09199 15.2522C6.26984 13.5083 5.79355 11.6215 5.68949 9.69633H2.38533C2.54748 10.9787 3.07859 12.1865 3.91413 13.1728C4.74967 14.159 5.85367 14.8814 7.09199 15.2522V15.2522ZM7.35866 9.69633C7.48449 11.7288 8.06533 13.638 9.00033 15.323C9.96059 13.5935 10.5215 11.6709 10.642 9.69633H7.35866V9.69633ZM15.6153 9.69633H12.3112C12.2071 11.6215 11.7308 13.5083 10.9087 15.2522C12.147 14.8814 13.251 14.159 14.0865 13.1728C14.9221 12.1865 15.4532 10.9787 15.6153 9.69633V9.69633ZM2.38533 8.02966H5.68949C5.79355 6.10448 6.26984 4.21773 7.09199 2.47383C5.85367 2.84456 4.74967 3.56696 3.91413 4.55324C3.07859 5.53953 2.54748 6.74725 2.38533 8.02966V8.02966ZM7.35949 8.02966H10.6412C10.521 6.05516 9.9603 4.13261 9.00033 2.403C8.04006 4.13254 7.47912 6.0551 7.35866 8.02966H7.35949ZM10.9087 2.47383C11.7308 4.21773 12.2071 6.10448 12.3112 8.02966H15.6153C15.4532 6.74725 14.9221 5.53953 14.0865 4.55324C13.251 3.56696 12.147 2.84456 10.9087 2.47383V2.47383Z"
+                fill="currentColor"
+            />
+        </Icon>
+    )
+}