Skip to content

Commit 173ad73

Browse files
cedoorcedoor
committed
feat(website): add links to project cards
1 parent 767df87 commit 173ad73

File tree

8 files changed

+106
-41
lines changed

8 files changed

+106
-41
lines changed

‎apps/website/src/app/page.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,9 @@ export default function Home() {
7474
title={project.name}
7575
description={project.tagline}
7676
categories={project.categories}
77-
url={project.links.website || project.links.github}
77+
url={project.links.website}
78+
githubUrl={project.links.github}
79+
discordUrl={project.links.discord}
7880
/>
7981
))}
8082
</VStack>

‎apps/website/src/components/Carousel.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,9 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps
9191
title={project.name}
9292
description={project.tagline}
9393
categories={project.categories}
94-
url={project.links.website || project.links.github}
94+
url={project.links.website}
95+
githubUrl={project.links.github}
96+
discordUrl={project.links.discord}
9597
/>
9698
</Box>
9799
))}

‎apps/website/src/components/NavbarLinks.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,25 +28,26 @@ export default function NavbarLinks({ onClick }: NavbarProps) {
2828
<Link
2929
onClick={onClick}
3030
as={NextLink}
31-
href="/learn"
31+
href="/build"
3232
variant="navlink"
33-
borderBottomColor={pathname === "/learn" ? "ceruleanBlue" : "transparent"}
33+
borderBottomColor={pathname === "/build" ? "ceruleanBlue" : "transparent"}
3434
>
3535
<Heading fontSize="18px" fontWeight="normal">
36-
Learn
36+
Build
3737
</Heading>
3838
</Link>
3939
<Link
4040
onClick={onClick}
4141
as={NextLink}
42-
href="/build"
42+
href="/learn"
4343
variant="navlink"
44-
borderBottomColor={pathname === "/build" ? "ceruleanBlue" : "transparent"}
44+
borderBottomColor={pathname === "/learn" ? "ceruleanBlue" : "transparent"}
4545
>
4646
<Heading fontSize="18px" fontWeight="normal">
47-
Build
47+
Learn
4848
</Heading>
4949
</Link>
50+
5051
<Link href="https://docs.semaphore.pse.dev" variant="navlink" isExternal>
5152
<HStack spacing="3">
5253
<Heading fontSize="18px" fontWeight="normal">

‎apps/website/src/components/ProjectCard.tsx‎

Lines changed: 63 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,74 @@
1-
import { Card, CardBody, HStack, Heading, Link, LinkProps, Tag, Text } from "@chakra-ui/react"
1+
import { Card, CardBody, CardFooter, HStack, Heading, Link, LinkProps, Tag, Text } from "@chakra-ui/react"
2+
import IconDiscord from "../icons/IconDiscord"
3+
import IconGithub from "../icons/IconGithub"
4+
import IconWebsite from "../icons/IconWebsite"
25

36
export type ProjectCardProps = {
47
categories: string[]
58
title: string
69
description: string
710
url?: string
11+
githubUrl?: string
12+
discordUrl?: string
813
}
914

10-
export default function ProjectCard({ categories, title, description, url, ...props }: ProjectCardProps & LinkProps) {
15+
export default function ProjectCard({
16+
categories,
17+
title,
18+
description,
19+
url,
20+
githubUrl,
21+
discordUrl,
22+
...props
23+
}: ProjectCardProps & LinkProps) {
1124
return (
12-
<Link href={url} isExternal h="full" {...props}>
13-
<Card
14-
bg="darkBlue"
15-
borderRadius="18px"
16-
color="white"
17-
border="1px"
18-
borderColor="alabaster.950"
19-
padding="55px 34px 55px 34px"
20-
w="full"
21-
h="full"
22-
_hover={{ borderColor: "ceruleanBlue" }}
23-
>
24-
<HStack gap="8px" mb="2rem" wrap="wrap">
25-
{categories.map((category) => (
26-
<Tag variant="outline" key={category}>
27-
{category}
28-
</Tag>
29-
))}
30-
</HStack>
31-
<CardBody padding={0}>
32-
<Heading fontSize="24px" lineHeight="33px">
33-
{title}
34-
</Heading>
35-
<Text mt="1rem" gap="10px" fontSize="14px" lineHeight="22.4px">
36-
{description}
37-
</Text>
38-
</CardBody>
39-
</Card>
40-
</Link>
25+
<Card
26+
bg="darkBlue"
27+
borderRadius="18px"
28+
color="white"
29+
border="1px"
30+
borderColor="alabaster.950"
31+
padding="34px"
32+
w="full"
33+
h="full"
34+
_hover={{ borderColor: "ceruleanBlue" }}
35+
>
36+
<HStack gap="8px" mb="2rem" wrap="wrap">
37+
{categories.map((category) => (
38+
<Tag variant="outline" key={category}>
39+
{category}
40+
</Tag>
41+
))}
42+
</HStack>
43+
<CardBody padding={0}>
44+
<Heading fontSize="24px" lineHeight="33px">
45+
{title}
46+
</Heading>
47+
<Text mt="1rem" gap="10px" fontSize="14px" lineHeight="22.4px">
48+
{description}
49+
</Text>
50+
</CardBody>
51+
{(url || githubUrl || discordUrl) && (
52+
<CardFooter pb="0" pl="0">
53+
<HStack>
54+
{githubUrl && (
55+
<Link href={githubUrl} isExternal>
56+
<IconGithub boxSize={{ base: "16px", md: "24px" }} />
57+
</Link>
58+
)}
59+
{url && (
60+
<Link href={url} isExternal>
61+
<IconWebsite boxSize={{ base: "16px", md: "24px" }} />
62+
</Link>
63+
)}
64+
{discordUrl && (
65+
<Link href={discordUrl} isExternal>
66+
<IconDiscord boxSize={{ base: "16px", md: "24px" }} />
67+
</Link>
68+
)}
69+
</HStack>
70+
</CardFooter>
71+
)}
72+
</Card>
4173
)
4274
}

‎apps/website/src/components/ProjectsList.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,9 @@ export default function ProjectsList(props: any) {
105105
title={project.name}
106106
description={project.tagline}
107107
categories={project.categories}
108-
url={project.links.website || project.links.github}
108+
url={project.links.website}
109+
githubUrl={project.links.github}
110+
discordUrl={project.links.discord}
109111
/>
110112
</GridItem>
111113
))}

‎apps/website/src/data/projects.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@
105105
"pse": true,
106106
"icon": "",
107107
"links": {
108-
"website": "https://community.semaphore.pse.dev/semaphore-explorer",
108+
"website": "https://explorer.semaphore.pse.dev",
109109
"github": "https://github.com/semaphore-protocol/explorer",
110110
"discord": "https://semaphore.pse.dev/discord"
111111
}

‎apps/website/src/icons/IconGithub.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Icon, IconProps } from "@chakra-ui/react"
2+
import React from "react"
3+
4+
export default function IconGithub(props: IconProps): JSX.Element {
5+
return (
6+
<Icon viewBox="0 0 22 23" {...props}>
7+
<path
8+
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"
9+
fill="currentColor"
10+
/>
11+
</Icon>
12+
)
13+
}

‎apps/website/src/icons/IconWebsite.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Icon, IconProps } from "@chakra-ui/react"
2+
import React from "react"
3+
4+
export default function IconWebsite(props: IconProps): JSX.Element {
5+
return (
6+
<Icon viewBox="0 0 18 18" {...props}>
7+
<path
8+
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"
9+
fill="currentColor"
10+
/>
11+
</Icon>
12+
)
13+
}

0 commit comments

Comments
 (0)