From 2935055b3190ab5d778d3e591c1ce875b7e51540 Mon Sep 17 00:00:00 2001
From: cedoor <me@cedoor.dev>
Date: Wed, 8 Nov 2023 16:05:54 +0000
Subject: [PATCH 1/2] refactor(website): merge carousel components

---
 apps/website/src/app/learn/page.tsx           |  40 ++++-
 apps/website/src/app/page.tsx                 |  27 ++-
 .../src/components/ArticlesCarousel.tsx       |  82 ----------
 apps/website/src/components/Carousel.tsx      | 154 ++++++++++++++++++
 .../src/components/ProjectsCarousel.tsx       | 101 ------------
 .../website/src/components/VideosCarousel.tsx |  77 ---------
 6 files changed, 208 insertions(+), 273 deletions(-)
 delete mode 100644 apps/website/src/components/ArticlesCarousel.tsx
 create mode 100644 apps/website/src/components/Carousel.tsx
 delete mode 100644 apps/website/src/components/ProjectsCarousel.tsx
 delete mode 100644 apps/website/src/components/VideosCarousel.tsx

diff --git a/apps/website/src/app/learn/page.tsx b/apps/website/src/app/learn/page.tsx
index 93c6d0c5f..303e7e891 100644
--- a/apps/website/src/app/learn/page.tsx
+++ b/apps/website/src/app/learn/page.tsx
@@ -15,7 +15,6 @@ import {
 import Image from "next/image"
 import InfoCard, { InfoBlock } from "../../components/InfoCard"
 import SectionBlock, { SectionBlockProps } from "../../components/SectionBlock"
-import MediaCarousel from "../../components/VideosCarousel"
 import IconEyelash from "@/icons/IconEyelash"
 import IconEye from "@/icons/IconEye"
 import IconUser from "@/icons/IconUser"
@@ -25,7 +24,7 @@ import IconGroup from "@/icons/IconGroup"
 import IconBadge from "@/icons/IconBadge"
 import IconCheck from "@/icons/IconCheck"
 import IconFlag from "@/icons/IconFlag"
-import ArticlesCarousel from "@/components/ArticlesCarousel"
+import Carousel from "@/components/Carousel"
 
 export default function Learn() {
     const infoCardTexts: InfoBlock[][] = [
@@ -270,6 +269,7 @@ await verifyProof(verificationKey, fullProof)`,
                     </TabPanels>
                 </Tabs>
             </VStack>
+
             <VStack p={"128px 80px"}>
                 {sectionBlockTexts.map((sectionBlockText, i) => (
                     <VStack key={i}>
@@ -286,13 +286,37 @@ await verifyProof(verificationKey, fullProof)`,
                 ))}
             </VStack>
 
-            <VStack backgroundColor={"darkBlue"} w={"100vw"}>
-                <VStack mt={"128px"} w="full" px={"80px"}>
-                    <MediaCarousel />
-                </VStack>
+            <VStack w="full" position="relative">
+                <Box
+                    backgroundColor="darkBlue"
+                    zIndex="-1"
+                    left="50%"
+                    transform="translateX(-50%)"
+                    w="100vw"
+                    h="100%"
+                    pos="absolute"
+                ></Box>
 
-                <VStack mt={"96px"} mb={"66px"} w={"full"} px={"80px"}>
-                    <ArticlesCarousel />
+                <VStack p="100px 40px" w="full" spacing="20">
+                    <Carousel
+                        title="Videos"
+                        sizes={{
+                            base: 1,
+                            md: 2,
+                            lg: 4
+                        }}
+                        type="videos"
+                    />
+
+                    <Carousel
+                        title="Articles"
+                        sizes={{
+                            base: 1,
+                            md: 2,
+                            lg: 4
+                        }}
+                        type="articles"
+                    />
                 </VStack>
             </VStack>
         </VStack>
diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
index b69bffa3f..b72d8c878 100644
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -1,8 +1,10 @@
 import { Box, Button, Card, CardBody, Heading, HStack, Link, Stack, Text, VStack } from "@chakra-ui/react"
 import { Sora } from "next/font/google"
 import Image from "next/image"
-import ProjectsCarousel from "../components/ProjectsCarousel"
+import Carousel from "../components/Carousel"
+import ProjectCard from "../components/ProjectCard"
 import events from "../data/events.json"
+import projects from "../data/projects.json"
 import IconDiscord from "../icons/IconDiscord"
 
 const sora = Sora({
@@ -49,11 +51,26 @@ export default function Home() {
             </VStack>
 
             <VStack py="32" spacing="16" w="full">
-                <Heading fontSize={{ base: "30px", md: "44px" }} textAlign="center">
-                    Explore projects built with Semaphore
-                </Heading>
+                <Carousel
+                    display={{ base: "none", md: "flex" }}
+                    title="Explore projects built with Semaphore"
+                    sizes={{ md: 2, lg: 3 }}
+                    type="projects"
+                />
 
-                <ProjectsCarousel />
+                <VStack display={{ base: "flex", md: "none" }} spacing="16">
+                    <Heading fontSize={{ base: "30px", md: "44px" }} textAlign="center">
+                        Explore projects built with Semaphore
+                    </Heading>
+
+                    <VStack spacing="3">
+                        {projects.slice(0, 3).map((project) => (
+                            <Link w="full" key={project.name} href={project.links.github} isExternal>
+                                <ProjectCard title={project.name} description={project.tagline} tags={project.tags} />
+                            </Link>
+                        ))}
+                    </VStack>
+                </VStack>
             </VStack>
 
             <Card
diff --git a/apps/website/src/components/ArticlesCarousel.tsx b/apps/website/src/components/ArticlesCarousel.tsx
deleted file mode 100644
index f364c6038..000000000
--- a/apps/website/src/components/ArticlesCarousel.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-"use client"
-
-import { Box, HStack, IconButton, VStack, useBreakpointValue, Text } from "@chakra-ui/react"
-import { useCallback, useState } from "react"
-import articles from "../data/articles.json"
-import IconArrowLeft from "../icons/IconArrowLeft"
-import IconArrowRight from "../icons/IconArrowRight"
-import ArticleCard from "./ArticleCard"
-
-export default function VideosCarousel() {
-    const [index, setIndex] = useState<number>(0)
-    const numberOfItems = useBreakpointValue({
-        base: 1,
-        md: 2,
-        lg: 4
-    })
-
-    const nextProject = useCallback(() => {
-        if (index + 1 === Math.ceil(articles.length / numberOfItems!)) {
-            setIndex(0)
-        } else {
-            setIndex((prevIndex) => prevIndex + 1)
-        }
-    }, [index, numberOfItems])
-
-    const previousProject = useCallback(() => {
-        if (index === 0) {
-            setIndex(Math.ceil(articles.length / numberOfItems!) - 1)
-        } else {
-            setIndex((prevIndex) => prevIndex - 1)
-        }
-    }, [index])
-
-    return (
-        <>
-            <HStack display={"flex"} w="full" mb={"56px"}>
-                <HStack flex="1" justify={"left"}>
-                    <Text flex="1" textAlign={"left"} fontSize="44px" fontWeight={"500"}>
-                        Articles
-                    </Text>
-                </HStack>
-
-                <HStack flex="1" justify="end">
-                    <IconButton
-                        onClick={previousProject}
-                        variant="link"
-                        aria-label="Arrow left"
-                        icon={<IconArrowLeft />}
-                    />
-                    <IconButton
-                        onClick={nextProject}
-                        variant="link"
-                        aria-label="Arrow right"
-                        icon={<IconArrowRight />}
-                    />
-                </HStack>
-            </HStack>
-            <HStack display={"flex"} w="full" overflow="hidden">
-                <HStack
-                    w="full"
-                    transition="transform 0.4s ease-in-out"
-                    transform={`translateX(-${index * 100}%)`}
-                    py="1"
-                    spacing="0"
-                >
-                    {articles.map((article, i) => (
-                        <VStack key={i} minW={{ base: `${100 / 1}%`, md: `${100 / 2}%`, lg: `${100 / 4}%` }}>
-                            <Box px="3">
-                                <ArticleCard
-                                    key={i}
-                                    title={article.title}
-                                    minRead={article.minRead}
-                                    url={article.url}
-                                />
-                            </Box>
-                        </VStack>
-                    ))}
-                </HStack>
-            </HStack>
-        </>
-    )
-}
diff --git a/apps/website/src/components/Carousel.tsx b/apps/website/src/components/Carousel.tsx
new file mode 100644
index 000000000..2353138c2
--- /dev/null
+++ b/apps/website/src/components/Carousel.tsx
@@ -0,0 +1,154 @@
+"use client"
+
+import { Box, HStack, Heading, IconButton, Link, StackProps, VStack, useBreakpointValue } from "@chakra-ui/react"
+import NextLink from "next/link"
+import { useCallback, useState } from "react"
+import articles from "../data/articles.json"
+import projects from "../data/projects.json"
+import videos from "../data/videos.json"
+import IconArrowLeft from "../icons/IconArrowLeft"
+import IconArrowRight from "../icons/IconArrowRight"
+import ArticleCard from "./ArticleCard"
+import ProjectCard from "./ProjectCard"
+import VideoCard from "./VideoCard"
+
+export type CarouselProps = {
+    title: string
+    sizes: {
+        base?: number
+        sm?: number
+        md?: number
+        lg?: number
+    }
+    type: "projects" | "videos" | "articles"
+}
+
+export default function Carousel({ title, sizes, type, ...props }: CarouselProps & StackProps) {
+    const [index, setIndex] = useState<number>(0)
+    const size = useBreakpointValue<number>(sizes)
+
+    const nextProject = useCallback(() => {
+        if (index + 1 === Math.ceil(projects.length / size!)) {
+            setIndex(0)
+        } else {
+            setIndex((prevIndex) => prevIndex + 1)
+        }
+    }, [index, size])
+
+    const previousProject = useCallback(() => {
+        if (index === 0) {
+            setIndex(Math.ceil(projects.length / size!) - 1)
+        } else {
+            setIndex((prevIndex) => prevIndex - 1)
+        }
+    }, [index])
+
+    return (
+        <VStack align="left" w="full" {...props} spacing="12">
+            <HStack justify="space-between">
+                <Heading fontSize={{ base: "30px", md: "44px" }} textAlign={type === "projects" ? "center" : "left"}>
+                    {title}
+                </Heading>
+
+                {type !== "projects" && (
+                    <HStack justify="center">
+                        <IconButton
+                            onClick={previousProject}
+                            variant="link"
+                            aria-label="Arrow left"
+                            icon={<IconArrowLeft />}
+                        />
+                        <IconButton
+                            onClick={nextProject}
+                            variant="link"
+                            aria-label="Arrow right"
+                            icon={<IconArrowRight />}
+                        />
+                    </HStack>
+                )}
+            </HStack>
+
+            <HStack w="full" overflow="hidden">
+                <HStack
+                    w="full"
+                    transition="transform 0.4s ease-in-out"
+                    transform={`translateX(-${index * 100}%)`}
+                    py="1"
+                    spacing="0"
+                >
+                    {type === "projects" &&
+                        projects.map((project, i) => (
+                            <Link
+                                minW={`${100 / size!}%`}
+                                key={project.name + i}
+                                href={project.links.github}
+                                isExternal
+                            >
+                                <Box px="3">
+                                    <ProjectCard
+                                        title={project.name}
+                                        description={project.tagline}
+                                        tags={project.tags}
+                                    />
+                                </Box>
+                            </Link>
+                        ))}
+
+                    {type === "articles" &&
+                        articles.map((article, i) => (
+                            <Box px="3" minW={`${100 / size!}%`} key={article.title + i}>
+                                <ArticleCard
+                                    key={i}
+                                    title={article.title}
+                                    minRead={article.minRead}
+                                    url={article.url}
+                                />
+                            </Box>
+                        ))}
+
+                    {type === "videos" &&
+                        videos.map((video, i) => (
+                            <Box px="3" minW={`${100 / size!}%`} key={video.title + i}>
+                                <VideoCard key={i} title={video.title} embeddedVideoUrl={video.embeddedUrl} />
+                            </Box>
+                        ))}
+                </HStack>
+            </HStack>
+
+            {type === "projects" && (
+                <HStack w="100%">
+                    <Box flex="1" />
+
+                    <HStack flex="1" justify="center">
+                        <IconButton
+                            onClick={previousProject}
+                            variant="link"
+                            aria-label="Arrow left"
+                            icon={<IconArrowLeft />}
+                        />
+                        <IconButton
+                            onClick={nextProject}
+                            variant="link"
+                            aria-label="Arrow right"
+                            icon={<IconArrowRight />}
+                        />
+                    </HStack>
+
+                    <HStack flex="1" justify="right" fontSize="12px">
+                        <Link
+                            as={NextLink}
+                            href="/projects"
+                            textTransform="uppercase"
+                            textDecoration="underline"
+                            _hover={{
+                                textDecoration: "underline"
+                            }}
+                        >
+                            View more
+                        </Link>
+                    </HStack>
+                </HStack>
+            )}
+        </VStack>
+    )
+}
diff --git a/apps/website/src/components/ProjectsCarousel.tsx b/apps/website/src/components/ProjectsCarousel.tsx
deleted file mode 100644
index 91598b455..000000000
--- a/apps/website/src/components/ProjectsCarousel.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-"use client"
-
-import { Box, HStack, IconButton, Link, VStack, useBreakpointValue } from "@chakra-ui/react"
-import NextLink from "next/link"
-import { useCallback, useState } from "react"
-import projects from "../data/projects.json"
-import IconArrowLeft from "../icons/IconArrowLeft"
-import IconArrowRight from "../icons/IconArrowRight"
-import ProjectCard from "./ProjectCard"
-
-export default function ProjectsCarousel() {
-    const [index, setIndex] = useState<number>(0)
-    const numberOfItems = useBreakpointValue({
-        md: 2,
-        lg: 3
-    })
-
-    const nextProject = useCallback(() => {
-        if (index + 1 === Math.ceil(projects.length / numberOfItems!)) {
-            setIndex(0)
-        } else {
-            setIndex((prevIndex) => prevIndex + 1)
-        }
-    }, [index, numberOfItems])
-
-    const previousProject = useCallback(() => {
-        if (index === 0) {
-            setIndex(Math.ceil(projects.length / numberOfItems!) - 1)
-        } else {
-            setIndex((prevIndex) => prevIndex - 1)
-        }
-    }, [index])
-
-    return (
-        <>
-            <HStack display={{ base: "none", md: "flex" }} w="full" overflow="hidden">
-                <HStack
-                    w="full"
-                    transition="transform 0.4s ease-in-out"
-                    transform={`translateX(-${index * 100}%)`}
-                    py="1"
-                    spacing="0"
-                >
-                    {projects.map((project) => (
-                        <Link
-                            minW={{ md: `${100 / 2}%`, lg: `${100 / 3}%` }}
-                            key={project.name}
-                            href={project.links.github}
-                            isExternal
-                        >
-                            <Box px="3">
-                                <ProjectCard title={project.name} description={project.tagline} tags={project.tags} />
-                            </Box>
-                        </Link>
-                    ))}
-                </HStack>
-            </HStack>
-
-            <VStack display={{ base: "flex", md: "none" }} spacing="3">
-                {projects.slice(0, 3).map((project) => (
-                    <Link w="full" key={project.name} href={project.links.github} isExternal>
-                        <ProjectCard title={project.name} description={project.tagline} tags={project.tags} />
-                    </Link>
-                ))}
-            </VStack>
-
-            <HStack display={{ base: "none", md: "flex" }} w="100%">
-                <Box flex="1" />
-
-                <HStack flex="1" justify="center">
-                    <IconButton
-                        onClick={previousProject}
-                        variant="link"
-                        aria-label="Arrow left"
-                        icon={<IconArrowLeft />}
-                    />
-                    <IconButton
-                        onClick={nextProject}
-                        variant="link"
-                        aria-label="Arrow right"
-                        icon={<IconArrowRight />}
-                    />
-                </HStack>
-
-                <HStack flex="1" justify="right" fontSize="12px">
-                    <Link
-                        as={NextLink}
-                        href="/projects"
-                        textTransform="uppercase"
-                        textDecoration="underline"
-                        _hover={{
-                            textDecoration: "underline"
-                        }}
-                    >
-                        View more
-                    </Link>
-                </HStack>
-            </HStack>
-        </>
-    )
-}
diff --git a/apps/website/src/components/VideosCarousel.tsx b/apps/website/src/components/VideosCarousel.tsx
deleted file mode 100644
index ac5ae7be5..000000000
--- a/apps/website/src/components/VideosCarousel.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-"use client"
-
-import { Box, HStack, IconButton, VStack, useBreakpointValue, Text } from "@chakra-ui/react"
-import { useCallback, useState } from "react"
-import videos from "../data/videos.json"
-import IconArrowLeft from "../icons/IconArrowLeft"
-import IconArrowRight from "../icons/IconArrowRight"
-import VideoCard from "./VideoCard"
-
-export default function VideosCarousel() {
-    const [index, setIndex] = useState<number>(0)
-    const numberOfItems = useBreakpointValue({
-        base: 1,
-        md: 2,
-        lg: 4
-    })
-
-    const nextProject = useCallback(() => {
-        if (index + 1 === Math.ceil(videos.length / numberOfItems!)) {
-            setIndex(0)
-        } else {
-            setIndex((prevIndex) => prevIndex + 1)
-        }
-    }, [index, numberOfItems])
-
-    const previousProject = useCallback(() => {
-        if (index === 0) {
-            setIndex(Math.ceil(videos.length / numberOfItems!) - 1)
-        } else {
-            setIndex((prevIndex) => prevIndex - 1)
-        }
-    }, [index])
-
-    return (
-        <>
-            <HStack display={"flex"} w="full" mb={"56px"}>
-                <HStack flex="1" justify={"left"}>
-                    <Text flex="1" textAlign={"left"} fontSize="44px" fontWeight={"500"}>
-                        Videos
-                    </Text>
-                </HStack>
-
-                <HStack flex="1" justify="end">
-                    <IconButton
-                        onClick={previousProject}
-                        variant="link"
-                        aria-label="Arrow left"
-                        icon={<IconArrowLeft />}
-                    />
-                    <IconButton
-                        onClick={nextProject}
-                        variant="link"
-                        aria-label="Arrow right"
-                        icon={<IconArrowRight />}
-                    />
-                </HStack>
-            </HStack>
-            <HStack display={"flex"} w="full" overflow="hidden">
-                <HStack
-                    w="full"
-                    transition="transform 0.4s ease-in-out"
-                    transform={`translateX(-${index * 100}%)`}
-                    py="1"
-                    spacing="0"
-                >
-                    {videos.map((video, i) => (
-                        <VStack key={i} minW={{ base: `${100 / 1}%`, md: `${100 / 2}%`, lg: `${100 / 4}%` }}>
-                            <Box px="3">
-                                <VideoCard key={i} title={video.title} embeddedVideoUrl={video.embeddedUrl} />
-                            </Box>
-                        </VStack>
-                    ))}
-                </HStack>
-            </HStack>
-        </>
-    )
-}

From e660f1fb7534dfb44297fd9bc48fa6a5e58a1dfb Mon Sep 17 00:00:00 2001
From: cedoor <me@cedoor.dev>
Date: Wed, 8 Nov 2023 18:04:07 +0000
Subject: [PATCH 2/2] fix(website): set correct array length

---
 apps/website/src/components/Carousel.tsx |  5 +++--
 apps/website/src/utils/getDataLength.ts  | 16 ++++++++++++++++
 2 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 apps/website/src/utils/getDataLength.ts

diff --git a/apps/website/src/components/Carousel.tsx b/apps/website/src/components/Carousel.tsx
index 2353138c2..079e9a72b 100644
--- a/apps/website/src/components/Carousel.tsx
+++ b/apps/website/src/components/Carousel.tsx
@@ -8,6 +8,7 @@ import projects from "../data/projects.json"
 import videos from "../data/videos.json"
 import IconArrowLeft from "../icons/IconArrowLeft"
 import IconArrowRight from "../icons/IconArrowRight"
+import { getDataLength } from "../utils/getDataLength"
 import ArticleCard from "./ArticleCard"
 import ProjectCard from "./ProjectCard"
 import VideoCard from "./VideoCard"
@@ -28,7 +29,7 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps
     const size = useBreakpointValue<number>(sizes)
 
     const nextProject = useCallback(() => {
-        if (index + 1 === Math.ceil(projects.length / size!)) {
+        if (index + 1 === Math.ceil(getDataLength(type) / size!)) {
             setIndex(0)
         } else {
             setIndex((prevIndex) => prevIndex + 1)
@@ -37,7 +38,7 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps
 
     const previousProject = useCallback(() => {
         if (index === 0) {
-            setIndex(Math.ceil(projects.length / size!) - 1)
+            setIndex(Math.ceil(getDataLength(type) / size!) - 1)
         } else {
             setIndex((prevIndex) => prevIndex - 1)
         }
diff --git a/apps/website/src/utils/getDataLength.ts b/apps/website/src/utils/getDataLength.ts
new file mode 100644
index 000000000..daf17cefb
--- /dev/null
+++ b/apps/website/src/utils/getDataLength.ts
@@ -0,0 +1,16 @@
+import projects from "../data/projects.json"
+import videos from "../data/videos.json"
+import articles from "../data/articles.json"
+
+export function getDataLength(type: "projects" | "videos" | "articles"): number {
+    switch (type) {
+        case "projects":
+            return projects.length
+        case "videos":
+            return videos.length
+        case "articles":
+            return articles.length
+        default:
+            return 0
+    }
+}