From 6273c01145970537c91d9874415bdfe5a0a13d3d Mon Sep 17 00:00:00 2001 From: amirhouieh Date: Mon, 28 Aug 2023 23:06:38 +0200 Subject: [PATCH] convert footer and nav items into data --- src/components/Footer/Footer.BuPanel.tsx | 97 ++++--------------- src/components/Footer/Footer.Copyright.tsx | 20 ++++ src/components/Footer/Footer.Link.tsx | 3 +- src/components/Footer/Footer.OrgPanel.tsx | 61 +++++------- .../NavBar/Navbar.SocialMediaKit.tsx | 42 ++++++-- src/configs/data.configs.ts | 74 ++++++++++++++ src/types/ui.types.ts | 27 +++--- 7 files changed, 181 insertions(+), 143 deletions(-) create mode 100644 src/components/Footer/Footer.Copyright.tsx diff --git a/src/components/Footer/Footer.BuPanel.tsx b/src/components/Footer/Footer.BuPanel.tsx index 95d66bc..7994cf3 100644 --- a/src/components/Footer/Footer.BuPanel.tsx +++ b/src/components/Footer/Footer.BuPanel.tsx @@ -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 ( @@ -62,9 +24,12 @@ export const FooterBuPanel = () => { - - {SECOND_LINK_GROUP.map(({ title, links }, idx) => ( - + + {FooterLinksItems.org.map(({ key, title, links }, idx) => ( +
{ ))} - - - {THIRD_LINKS_GROUP.map(({ title, links }, idx) => ( - -
- - {title}: - -
- - {links.map(({ label, href }, idx) => ( - - {label} - - ))} - - - ))} - + ) @@ -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; } ` diff --git a/src/components/Footer/Footer.Copyright.tsx b/src/components/Footer/Footer.Copyright.tsx new file mode 100644 index 0000000..3d62daa --- /dev/null +++ b/src/components/Footer/Footer.Copyright.tsx @@ -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 = () => ( + + + Logos Press Engine ©{new Date().getFullYear()} + + + All rights reserved. + + +) + +const OrgInfo = styled(FooterSection)` + @media (max-width: 768px) { + margin-bottom: 72px; + } +` diff --git a/src/components/Footer/Footer.Link.tsx b/src/components/Footer/Footer.Link.tsx index f39b2f3..a2852a5 100644 --- a/src/components/Footer/Footer.Link.tsx +++ b/src/components/Footer/Footer.Link.tsx @@ -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; } } ` diff --git a/src/components/Footer/Footer.OrgPanel.tsx b/src/components/Footer/Footer.OrgPanel.tsx index d5f9923..3d34211 100644 --- a/src/components/Footer/Footer.OrgPanel.tsx +++ b/src/components/Footer/Footer.OrgPanel.tsx @@ -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 ( - - - Logos Press Engine ©{new Date().getFullYear()} - - - All rights reserved. - - + - {FIRST_LINK_GRUOP.map(({ label, href }, idx) => ( - - {label} - + {FooterLinksItems.about.map(({ key, links }, idx) => ( + + {links.map(({ label, href }, idx) => ( + + {label} + + ))} + ))} @@ -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; ` diff --git a/src/components/NavBar/Navbar.SocialMediaKit.tsx b/src/components/NavBar/Navbar.SocialMediaKit.tsx index ee2e658..ef65bc5 100644 --- a/src/components/NavBar/Navbar.SocialMediaKit.tsx +++ b/src/components/NavBar/Navbar.SocialMediaKit.tsx @@ -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 ( - - - - - - - - - + {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 ( + + {Icon && } + + ) + })} ) } + const Container = styled.div` display: flex; align-items: center; diff --git a/src/configs/data.configs.ts b/src/configs/data.configs.ts index b2525d3..5109cc6 100644 --- a/src/configs/data.configs.ts +++ b/src/configs/data.configs.ts @@ -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' }, + ], + }, + ], +} diff --git a/src/types/ui.types.ts b/src/types/ui.types.ts index 60746c6..d504404 100644 --- a/src/types/ui.types.ts +++ b/src/types/ui.types.ts @@ -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[] +}