Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Merge Carousel components #433

Merged
merged 2 commits into from
Nov 8, 2023
Merged

Merge Carousel components #433

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2935055
refactor(website): merge carousel components
cedoor Nov 8, 2023
e660f1f
fix(website): set correct array length
cedoor Nov 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 32 additions & 8 deletions apps/website/src/app/learn/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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[][] = [
Expand Down Expand Up @@ -270,6 +269,7 @@ await verifyProof(verificationKey, fullProof)`,
</TabPanels>
</Tabs>
</VStack>

<VStack p={"128px 80px"}>
{sectionBlockTexts.map((sectionBlockText, i) => (
<VStack key={i}>
Expand All @@ -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>
Expand Down
27 changes: 22 additions & 5 deletions apps/website/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
Expand Down Expand Up @@ -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
Expand Down
82 changes: 0 additions & 82 deletions apps/website/src/components/ArticlesCarousel.tsx
View file
Open in desktop

This file was deleted.

155 changes: 155 additions & 0 deletions apps/website/src/components/Carousel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
"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 { getDataLength } from "../utils/getDataLength"
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(getDataLength(type) / size!)) {
setIndex(0)
} else {
setIndex((prevIndex) => prevIndex + 1)
}
}, [index, size])

const previousProject = useCallback(() => {
if (index === 0) {
setIndex(Math.ceil(getDataLength(type) / 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>
)
}
Loading
Loading