convert footer and nav items into data

This commit is contained in:
amirhouieh 2023-08-28 23:06:38 +02:00
parent c3045a3ceb
commit 6273c01145
7 changed files with 181 additions and 143 deletions

View File

@ -1,47 +1,9 @@
import { Typography } from '@acid-info/lsd-react'
import styled from '@emotion/styled'
import { FooterLink } from '@/components/Footer/Footer.Link'
import {
FooterSection,
FooterSectionContainer,
} from '@/components/Footer/Footer.Section'
import { FooterSection } from '@/components/Footer/Footer.Section'
import { FooterLinksItems } from '@/configs/data.configs'
const SECOND_LINK_GROUP = [
{
title: 'Research',
links: [
{ label: 'VacP2P', href: 'https://vac.dev/' },
{ label: 'AFAIK', href: 'https://afaik.institute/' },
],
},
{
title: 'Infrastructure',
links: [
{ label: 'Waku', href: 'https://waku.org/' },
{ label: 'Nimbus', href: 'https://nimbus.team/' },
{ label: 'Codex', href: 'https://codex.storage/' },
{ label: 'Nomos', href: 'https://nomos.tech/' },
],
},
{
title: 'Creative Studio',
links: [{ label: 'Acid.info', href: 'https://acid.info/' }],
},
]
const THIRD_LINKS_GROUP = [
{
title: 'Movement',
links: [{ label: 'Logos', href: 'https://logos.co/' }],
},
{
title: 'User-facing Products',
links: [
{ label: 'Status', href: 'https://status.im/' },
{ label: 'Keycard', href: 'https://keycard.tech/' },
],
},
]
export const FooterBuPanel = () => {
return (
<BusinessUnits>
@ -62,9 +24,12 @@ export const FooterBuPanel = () => {
</Typography>
</BUInfo>
<BUs>
<SecondLinksContainer>
{SECOND_LINK_GROUP.map(({ title, links }, idx) => (
<LinkGroup key={'second-group' + idx}>
<BusinessUnitItemGroup>
{FooterLinksItems.org.map(({ key, title, links }, idx) => (
<LinkGroup
key={`${key || title}-${idx}`}
className={`footer-link-group-${idx}`}
>
<div>
<Typography
component="div"
@ -89,35 +54,7 @@ export const FooterBuPanel = () => {
</Row>
</LinkGroup>
))}
</SecondLinksContainer>
<ThirdLinksContainer>
{THIRD_LINKS_GROUP.map(({ title, links }, idx) => (
<LinkGroup key={'third-group' + idx}>
<div>
<Typography
component="div"
genericFontFamily="sans-serif"
variant="body2"
>
{title}:
</Typography>
</div>
<Row>
{links.map(({ label, href }, idx) => (
<FooterLink
key={'third-group-link' + idx}
component="a"
href={href}
genericFontFamily="sans-serif"
variant="body2"
>
{label}
</FooterLink>
))}
</Row>
</LinkGroup>
))}
</ThirdLinksContainer>
</BusinessUnitItemGroup>
</BUs>
</BusinessUnits>
)
@ -158,15 +95,17 @@ const Row = styled.div`
gap: 8px;
`
const SecondLinksContainer = styled.div`
flex: 2;
`
const BusinessUnitItemGroup = styled.div`
display: grid;
grid-template-columns: repeat(2, 1fr);
const ThirdLinksContainer = styled.div`
flex: 1;
.footer-link-group-0 {
grid-area: 1 / 1 / 2 / 2;
}
@media (max-width: 768px) {
margin-bottom: 80px;
@media (max-width: ${({ theme }) => theme.breakpoints.sm.width}px) {
grid-template-columns: repeat(1, 1fr);
padding-bottom: 24px;
}
`

View File

@ -0,0 +1,20 @@
import { Typography } from '@acid-info/lsd-react'
import { FooterSection } from '@/components/Footer/Footer.Section'
import styled from '@emotion/styled'
export const FooterCopyright = () => (
<OrgInfo>
<Typography component="div" genericFontFamily="sans-serif" variant="body2">
Logos Press Engine ©{new Date().getFullYear()}
</Typography>
<Typography component="div" genericFontFamily="sans-serif" variant="body2">
All rights reserved.
</Typography>
</OrgInfo>
)
const OrgInfo = styled(FooterSection)`
@media (max-width: 768px) {
margin-bottom: 72px;
}
`

View File

@ -3,6 +3,7 @@ import { Typography } from '@acid-info/lsd-react'
export const FooterLink = styled(Typography)`
width: fit-content;
text-transform: capitalize;
&:not(:last-child) {
&:after {
width: 2px;
@ -13,8 +14,6 @@ export const FooterLink = styled(Typography)`
margin-left: 8px;
border-radius: 50%;
transform: translateY(-2px);
//text-decoration: none;
//display: inline-block;
}
}
`

View File

@ -1,44 +1,28 @@
import { Typography } from '@acid-info/lsd-react'
import styled from '@emotion/styled'
import { FooterSection } from '@/components/Footer/Footer.Section'
import { FooterLink } from '@/components/Footer/Footer.Link'
const FIRST_LINK_GRUOP = [
{ label: 'Twitter', href: 'https://twitter.com/Logos_State' },
{ label: 'Terms & Conditions', href: 'https://logos.co/terms/' },
{ label: 'Work with us', href: 'https://jobs.status.im/' },
]
import { FooterCopyright } from '@/components/Footer/Footer.Copyright'
import { FooterLinksItems } from '@/configs/data.configs'
export const FooterOrgPanel = () => {
return (
<Wrapper>
<OrgInfo>
<Typography
component="div"
genericFontFamily="sans-serif"
variant="body2"
>
Logos Press Engine ©{new Date().getFullYear()}
</Typography>
<Typography
component="div"
genericFontFamily="sans-serif"
variant="body2"
>
All rights reserved.
</Typography>
</OrgInfo>
<FooterCopyright />
<Links>
{FIRST_LINK_GRUOP.map(({ label, href }, idx) => (
<FooterLink
key={'first-grouop' + idx}
component="a"
href={href}
genericFontFamily="sans-serif"
variant="body2"
>
{label}
</FooterLink>
{FooterLinksItems.about.map(({ key, links }, idx) => (
<Group key={key}>
{links.map(({ label, href }, idx) => (
<FooterLink
key={'first-group' + idx}
component="a"
href={href}
genericFontFamily="sans-serif"
variant="body2"
>
{label}
</FooterLink>
))}
</Group>
))}
</Links>
</Wrapper>
@ -56,16 +40,15 @@ const Wrapper = styled.div`
}
`
const OrgInfo = styled(FooterSection)`
@media (max-width: 768px) {
margin-bottom: 72px;
}
const Group = styled.div`
display: flex;
flex-direction: row;
gap: 8px;
`
const Links = styled(FooterSection)`
display: flex;
flex-direction: row;
align-items: center;
flex-direction: column;
gap: 8px;
margin-bottom: 72px;
`

View File

@ -3,22 +3,46 @@ import Link from 'next/link'
import { DiscordIcon } from '@/components/Icons/DiscordIcon'
import { XIcon } from '@/components/Icons/XIcon'
import { YoutubeIcon } from '@/components/Icons/YTIcon'
import { FooterLinksItems } from '@/configs/data.configs'
import { LPEFooterGroup } from '@/types/ui.types'
const socialLinks = FooterLinksItems.about.find(
(item) => item.key === 'social',
) as LPEFooterGroup
export const SocialMediaKit = () => {
return (
<Container>
<Link href={'https://discord.cc'}>
<DiscordIcon />
</Link>
<Link href={'https://youtube.com'}>
<YoutubeIcon />
</Link>
<Link href={'https://x.com'}>
<XIcon />
</Link>
{socialLinks &&
socialLinks.links.map((link, index) => {
let Icon = null
switch (link.key) {
case 'discord':
Icon = DiscordIcon
break
case 'youtube':
Icon = YoutubeIcon
break
case 'x':
Icon = XIcon
break
default:
Icon = null
}
return (
<Link
href={link.href}
key={`sm-link-${index}`}
title={`Join us on ${link.label}`}
target={'_blank'}
>
{Icon && <Icon />}
</Link>
)
})}
</Container>
)
}
const Container = styled.div`
display: flex;
align-items: center;

View File

@ -1,3 +1,8 @@
import { LPEFooterGroup } from '@/types/ui.types'
import { DiscordIcon } from '@/components/Icons/DiscordIcon'
import { YoutubeIcon } from '@/components/Icons/YTIcon'
import { XIcon } from '@/components/Icons/XIcon'
export const ArticleBlocksOrders = {
title: 0,
subtitle: 1,
@ -12,3 +17,72 @@ export const NavLinksItems = [
{ label: 'Podcasts', href: '/podcasts' },
{ label: 'About', href: '/about' },
]
export const FooterLinksItems: {
org: LPEFooterGroup[]
about: LPEFooterGroup[]
} = {
org: [
{
title: 'Research',
links: [
{ label: 'VacP2P', href: 'https://vac.dev/' },
{ label: 'AFAIK', href: 'https://afaik.institute/' },
],
},
{
title: 'Infrastructure',
links: [
{ label: 'Waku', href: 'https://waku.org/' },
{ label: 'Nimbus', href: 'https://nimbus.team/' },
{ label: 'Codex', href: 'https://codex.storage/' },
{ label: 'Nomos', href: 'https://nomos.tech/' },
],
},
{
title: 'Creative Studio',
links: [{ label: 'Acid.info', href: 'https://acid.info/' }],
},
{
title: 'Movement',
links: [{ label: 'Logos', href: 'https://logos.co/' }],
},
{
title: 'User-facing Products',
links: [
{ label: 'Status', href: 'https://status.im/' },
{ label: 'Keycard', href: 'https://keycard.tech/' },
],
},
],
about: [
{
title: null,
key: 'social',
links: [
{ label: 'X', href: 'https://twitter.com/Logos_state', key: 'x' },
{
label: 'Discord',
href: 'https://discord.gg/logos-state',
key: 'discord',
},
{
label: 'Github',
href: 'https://github.com/acid-info',
key: 'github',
},
{ label: 'Youtube', href: 'https://www.youtube.com', key: 'youtube' },
],
},
{
title: null,
key: 'info',
links: [
{ label: 'Terms of Service', href: '/terms' },
{ label: 'Privacy Policy', href: '/privacy' },
{ label: 'about', href: '/about' },
],
},
],
}

View File

@ -1,18 +1,17 @@
import { SearchResultItem } from './data.types'
export enum ESearchScope {
GLOBAL = 'global',
ARTICLE = 'article',
}
export enum ESearchStatus {
SEARCHING = 'searching',
IDLE = 'idle',
ERROR = 'error',
NOT_ACTIVE = 'not_active',
}
import React, { ReactNode } from 'react'
export const enum PostListLayout {
XXXX = 'xxxx',
XXXX_XX = 'xxxx_xx',
}
export type LPEFooterItem = {
label: string | null
href: string
icon?: ReactNode
key?: string
}
export type LPEFooterGroup = {
title: string | null
key?: string
links: LPEFooterItem[]
}