feat: add BU milestones

This commit is contained in:
jinhojang6 2023-11-17 00:46:46 +09:00
parent 07cb631c19
commit c2f9255714
6 changed files with 176 additions and 14 deletions

View File

@ -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
</Tag>
{menus.map((menu: string) => (
{BUMenuBar.map((menu: string) => (
<Tag
active={activeMenus.includes(menu)}
key={menu + '-tag'}

View File

@ -3,7 +3,7 @@ import styled from '@emotion/styled'
type Props = {
title: string
description: React.ReactNode
description?: React.ReactNode
}
const BUSection = ({ title, description }: Props) => {
@ -12,7 +12,7 @@ const BUSection = ({ title, description }: Props) => {
<TitleContainer>
<Title>{title}</Title>
</TitleContainer>
<Content>{description}</Content>
{description && <Content>{description}</Content>}
</Container>
)
}

View File

@ -0,0 +1,137 @@
import styled from '@emotion/styled'
import BUSection from '../BUSection'
type Props = {
data: any
}
const BUMilestones = ({ data }: Props) => {
return (
<Container>
<BUSection
title={'Milestones'}
description={
<ScrollableContainer>
{data.map((item: any, index: number) => (
<Item key={'milestone-' + index}>
<GreyBox key={item.milestone}>
<Year>{item.year}</Year>
<h3>{item.title}</h3>
</GreyBox>
<TimelineContainer>
<Step>
<StepNumber>{index + 1}</StepNumber>
</Step>
<Bar />
</TimelineContainer>
</Item>
))}
</ScrollableContainer>
}
/>
</Container>
)
}
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

View File

@ -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'

View File

@ -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 frameworks capabilities to include retrieving historical messages for mostly offline devices, adaptive nodes, and bandwidth preservation for resource-restricted devices.\n\nKey to Wakus 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: {

View File

@ -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<string[]>([])
@ -36,6 +47,9 @@ const Page = ({ bu, jobs, issues }: any) => {
{activeMenus.length === 0 || activeMenus.includes('About') ? (
<BUAbout data={BU_DATA[bu]?.about} />
) : null}
{activeMenus.length === 0 || activeMenus.includes('Milestones') ? (
<BUMilestones data={BU_DATA[bu]?.milestones} />
) : null}
{activeMenus.length === 0 || activeMenus.includes('Team') ? (
<BUTeam />
) : null}