From c2f9255714c34ac24d57aeb0de8835510537f6a9 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Fri, 17 Nov 2023 00:46:46 +0900 Subject: [PATCH] feat: add BU milestones --- src/components/BU/BUMenuFilter.tsx | 13 +- src/components/BU/BUSection.tsx | 4 +- src/components/BU/Milestones/BUMilestones.tsx | 137 ++++++++++++++++++ src/components/BU/index.ts | 2 + src/data/bu-data.ts | 18 +++ src/pages/[bu].tsx | 16 +- 6 files changed, 176 insertions(+), 14 deletions(-) create mode 100644 src/components/BU/Milestones/BUMilestones.tsx diff --git a/src/components/BU/BUMenuFilter.tsx b/src/components/BU/BUMenuFilter.tsx index b566d89..5249bdc 100644 --- a/src/components/BU/BUMenuFilter.tsx +++ b/src/components/BU/BUMenuFilter.tsx @@ -1,4 +1,5 @@ import { breakpoints, uiConfigs } from '@/configs/ui.configs' +import { BUMenuBar } from '@/pages/[bu]' import styled from '@emotion/styled' import { Tag } from '../Tag' @@ -8,16 +9,6 @@ type Props = { } const BUMenuFilter = ({ activeMenus, setActiveMenus }: Props) => { - const menus = [ - 'Testimonials', - 'About', - 'Milestones', - 'Team', - 'Jobs', - 'Challenges', - 'Media', - ] - const toggleMenu = (menu: string) => { if (activeMenus.includes(menu)) { setActiveMenus((preveMenus) => preveMenus.filter((item) => item !== menu)) @@ -36,7 +27,7 @@ const BUMenuFilter = ({ activeMenus, setActiveMenus }: Props) => { > All - {menus.map((menu: string) => ( + {BUMenuBar.map((menu: string) => ( { @@ -12,7 +12,7 @@ const BUSection = ({ title, description }: Props) => { {title} - {description} + {description && {description}} ) } diff --git a/src/components/BU/Milestones/BUMilestones.tsx b/src/components/BU/Milestones/BUMilestones.tsx new file mode 100644 index 0000000..80a7c0e --- /dev/null +++ b/src/components/BU/Milestones/BUMilestones.tsx @@ -0,0 +1,137 @@ +import styled from '@emotion/styled' +import BUSection from '../BUSection' + +type Props = { + data: any +} + +const BUMilestones = ({ data }: Props) => { + return ( + + + {data.map((item: any, index: number) => ( + + + {item.year} +

{item.title}

+ + + + {index + 1} + + + + + ))} + + } + /> + + ) +} + +const Container = styled.div` + display: flex; + flex-direction: column; + padding: 0 16px; +` + +const ScrollableContainer = styled.div` + display: flex; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + gap: 16px; + margin-bottom: 24px; + margin-left: auto; + width: 50vw; + + &::-webkit-scrollbar { + display: none; + } +` + +const Item = styled.div` + display: flex; + flex-direction: column; + gap: 24px; + + &:first-of-type { + span { + border-radius: 50%; + } + } + + &:last-of-type { + hr { + display: none; + } + } +` + +const GreyBox = styled.div` + display: flex; + width: 268px; + height: 356px; + padding: 16px; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + border-radius: 2px; + background: rgba(0, 0, 0, 0.03); + flex-shrink: 0; + + h3 { + font-size: 22px; + font-weight: 400; + line-height: 26px; + text-transform: capitalize; + margin-bottom: 0; + } +` + +const Year = styled.div` + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 22px; +` + +const TimelineContainer = styled.div` + display: flex; + align-items: center; + align-self: stretch; + position: relative; +` + +const Bar = styled.hr` + background-color: #000; + opacity: 0.2; + width: 284px; + position: absolute; + height: 1px; + z-index: 0; + left: 30px; +` + +const Step = styled.span` + width: 30px; + height: 30px; + border-radius: 2px; + border: 1px solid rgba(0, 0, 0, 0.18); + display: flex; + background-color: #fff; + z-index: 1; + justify-content: center; + align-items: center; + box-sizing: border-box; +` + +const StepNumber = styled.p` + font-size: 14px; + line-height: 24px; +` + +export default BUMilestones diff --git a/src/components/BU/index.ts b/src/components/BU/index.ts index 5004ca2..a7bec57 100644 --- a/src/components/BU/index.ts +++ b/src/components/BU/index.ts @@ -5,4 +5,6 @@ export { default as BUMenus } from './BUMenus' export { default as BUSection } from './BUSection' export { default as BUVideo } from './BUVideo' export { default as BUMedia } from './Media/BUMedia' +export { default as BUMilestones } from './Milestones/BUMilestones' export { default as BUTeam } from './Team/BUTeam' +export { default as BUTestimonials } from './Testimonials/BUTestimonials' diff --git a/src/data/bu-data.ts b/src/data/bu-data.ts index ee85741..9772271 100644 --- a/src/data/bu-data.ts +++ b/src/data/bu-data.ts @@ -64,6 +64,24 @@ const BU_DATA: any = { about: { description: `The network facilitates human-to-human, machine-to-human, and machine-to-machine communication in both directions, giving it an enormous scope of potential applications — from internode communications to in-game messaging and everything in between. Currently, there are three Waku client implementations: nwaku (reference implementation in Nim), Go-Waku (for Go applications), and JS-Waku (for browsers).\n\nWaku v1 was a fork of the Whisper protocol, but persistent scalability issues forced an entire protocol rewrite, birthing Waku v2 in 2021. At a high level, Waku v2 implements Pub/Sub over libp2p, extending the networking framework’s capabilities to include retrieving historical messages for mostly offline devices, adaptive nodes, and bandwidth preservation for resource-restricted devices.\n\nKey to Waku’s design is its modularity. When integrating Waku with an app, developers can select which protocols to implement according to their use case and users’ hardware availability, enabling devices with limited resources to contribute as peers in the network. The Relay protocol is the foundation of Waku and handles Pub/Sub messaging. Among the other protocols complementing Relay are Store, which enables historic message retrieval; Filter, which preserves bandwidth for nodes with limited resources; and Light Push, which allows nodes with short connections and limited bandwidth to publish messages to the Waku network.`, }, + milestones: [ + { + year: '2023', + title: 'Scaling to support 10,000 and 1 million nodes', + }, + { + year: '2023', + title: 'Autosharding, DoS protection, bandwidth capping', + }, + { + year: '2024', + title: 'Node operator incentivisation', + }, + { + year: '2024+', + title: 'Use case-specific SDKs', + }, + ], }, codex: { hero: { diff --git a/src/pages/[bu].tsx b/src/pages/[bu].tsx index 6919496..f444589 100644 --- a/src/pages/[bu].tsx +++ b/src/pages/[bu].tsx @@ -4,10 +4,11 @@ import { BUMedia, BUMenuFilter, BUMenus, + BUMilestones, BUTeam, + BUTestimonials, BUVideo, } from '@/components/BU' -import BUTestimonials from '@/components/BU/Testimonials/BUTestimonials' import { ChallengeList } from '@/components/Challenges' import { JobList } from '@/components/Jobs' import { SEO } from '@/components/SEO' @@ -16,6 +17,16 @@ import { SubPageLayout } from '@/layouts/SubPageLayout' import { useState } from 'react' import { JOB_BOARD_MAPPING, getJobs } from '../../utils/getJobs' +export const BUMenuBar = [ + 'Testimonials', + 'About', + 'Milestones', + 'Team', + 'Jobs', + 'Challenges', + 'Media', +] + const Page = ({ bu, jobs, issues }: any) => { const [activeMenus, setActiveMenus] = useState([]) @@ -36,6 +47,9 @@ const Page = ({ bu, jobs, issues }: any) => { {activeMenus.length === 0 || activeMenus.includes('About') ? ( ) : null} + {activeMenus.length === 0 || activeMenus.includes('Milestones') ? ( + + ) : null} {activeMenus.length === 0 || activeMenus.includes('Team') ? ( ) : null}