convert footer and nav items into data

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 {
+import { FooterSection } from '@/components/Footer/Footer.Section'
-  FooterSection,
+import { FooterLinksItems } from '@/configs/data.configs'
-  FooterSectionContainer,
-} from '@/components/Footer/Footer.Section'
 
-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>
+        <BusinessUnitItemGroup>
-          {SECOND_LINK_GROUP.map(({ title, links }, idx) => (
+          {FooterLinksItems.org.map(({ key, title, links }, idx) => (
-            <LinkGroup key={'second-group' + 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>
+        </BusinessUnitItemGroup>
-        <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>
       </BUs>
     </BusinessUnits>
   )
@@ -158,15 +95,17 @@ const Row = styled.div`
   gap: 8px;
 `
 
-const SecondLinksContainer = styled.div`
+const BusinessUnitItemGroup = styled.div`
-  flex: 2;
+  display: grid;
-`
+  grid-template-columns: repeat(2, 1fr);
 
-const ThirdLinksContainer = styled.div`
+  .footer-link-group-0 {
-  flex: 1;
+    grid-area: 1 / 1 / 2 / 2;
+  }
 
-  @media (max-width: 768px) {
+  @media (max-width: ${({ theme }) => theme.breakpoints.sm.width}px) {
-    margin-bottom: 80px;
+    grid-template-columns: repeat(1, 1fr);
+    padding-bottom: 24px;
   }
 `
 

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;
+  }
+`

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;
     }
   }
 `

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'
-
+import { FooterCopyright } from '@/components/Footer/Footer.Copyright'
-const FIRST_LINK_GRUOP = [
+import { FooterLinksItems } from '@/configs/data.configs'
-  { 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/' },
-]
 
 export const FooterOrgPanel = () => {
   return (
     <Wrapper>
-      <OrgInfo>
+      <FooterCopyright />
-        <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>
       <Links>
-        {FIRST_LINK_GRUOP.map(({ label, href }, idx) => (
+        {FooterLinksItems.about.map(({ key, links }, idx) => (
-          <FooterLink
+          <Group key={key}>
-            key={'first-grouop' + idx}
+            {links.map(({ label, href }, idx) => (
-            component="a"
+              <FooterLink
-            href={href}
+                key={'first-group' + idx}
-            genericFontFamily="sans-serif"
+                component="a"
-            variant="body2"
+                href={href}
-          >
+                genericFontFamily="sans-serif"
-            {label}
+                variant="body2"
-          </FooterLink>
+              >
+                {label}
+              </FooterLink>
+            ))}
+          </Group>
         ))}
       </Links>
     </Wrapper>
@@ -56,16 +40,15 @@ const Wrapper = styled.div`
   }
 `
 
-const OrgInfo = styled(FooterSection)`
+const Group = styled.div`
-  @media (max-width: 768px) {
+  display: flex;
-    margin-bottom: 72px;
+  flex-direction: row;
-  }
+  gap: 8px;
 `
 
 const Links = styled(FooterSection)`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
-  align-items: center;
   gap: 8px;
   margin-bottom: 72px;
 `

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'}>
+      {socialLinks &&
-        <DiscordIcon />
+        socialLinks.links.map((link, index) => {
-      </Link>
+          let Icon = null
-      <Link href={'https://youtube.com'}>
+          switch (link.key) {
-        <YoutubeIcon />
+            case 'discord':
-      </Link>
+              Icon = DiscordIcon
-      <Link href={'https://x.com'}>
+              break
-        <XIcon />
+            case 'youtube':
-      </Link>
+              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;

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' },
+      ],
+    },
+  ],
+}

src/types/ui.types.ts

@@ -1,18 +1,17 @@
-import { SearchResultItem } from './data.types'
+import React, { ReactNode } from 'react'
-
-export enum ESearchScope {
-  GLOBAL = 'global',
-  ARTICLE = 'article',
-}
-
-export enum ESearchStatus {
-  SEARCHING = 'searching',
-  IDLE = 'idle',
-  ERROR = 'error',
-  NOT_ACTIVE = 'not_active',
-}
-
 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[]
+}