convert footer and nav items into data

2023-08-28 23:06:38 +02:00 · 2023-08-28 23:06:38 +02:00 · 6273c01145
parent c3045a3ceb
commit 6273c01145
7 changed files with 181 additions and 143 deletions
--- 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 (
    <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;
  }
 `

--- a/src/components/Footer/Footer.Copyright.tsx
+++ 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 = () => (
+  <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;
+  }
+`
--- 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;
    }
  }
 `
--- a/src/components/Footer/Footer.OrgPanel.tsx
+++ b/src/components/Footer/Footer.OrgPanel.tsx
@ -1,37 +1,19 @@
-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) => (
+        {FooterLinksItems.about.map(({ key, links }, idx) => (
+          <Group key={key}>
+            {links.map(({ label, href }, idx) => (
              <FooterLink
-            key={'first-grouop' + idx}
+                key={'first-group' + idx}
                component="a"
                href={href}
                genericFontFamily="sans-serif"
@ -40,6 +22,8 @@ export const FooterOrgPanel = () => {
                {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;
 `
--- 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 (
    <Container>
-      <Link href={'https://discord.cc'}>
-        <DiscordIcon />
-      </Link>
-      <Link href={'https://youtube.com'}>
-        <YoutubeIcon />
-      </Link>
-      <Link href={'https://x.com'}>
-        <XIcon />
+      {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;
--- 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' },
+      ],
+    },
+  ],
+}
--- 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[]
+}