mirror of
https://github.com/acid-info/logos-press-engine.git
synced 2025-02-23 06:38:27 +00:00
refactor nabvar without search option
This commit is contained in:
amirhouieh
parent
fed07d5324
commit
83e14e49c4
@ -2,7 +2,12 @@ import { Searchbar } from '@/components/Searchbar'
|
||||
import { uiConfigs } from '@/configs/ui.configs'
|
||||
import { useSearchBarContext } from '@/context/searchbar.context'
|
||||
import { useScrollDirection } from '@/utils/ui.utils'
|
||||
import { IconButton, SearchIcon } from '@acid-info/lsd-react'
|
||||
import {
|
||||
IconButton,
|
||||
MenuIcon,
|
||||
SearchIcon,
|
||||
Typography,
|
||||
} from '@acid-info/lsd-react'
|
||||
import styled from '@emotion/styled'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
@ -10,199 +15,156 @@ import { useEffect, useState } from 'react'
|
||||
import { LogosIcon } from '../Icons/LogosIcon'
|
||||
import { MoonIcon } from '../Icons/MoonIcon'
|
||||
import { SunIcon } from '../Icons/SunIcon'
|
||||
import { useThemeState } from '@/states/themeState'
|
||||
import { NavbarLinks } from '@/components/AppBar/Navbar.Links'
|
||||
import { NavLinksItems } from '@/configs/data.configs'
|
||||
import { NavbarMobileMenu } from '@/components/AppBar/Navbar.MobileMenu'
|
||||
import { ThemeSwitch } from '@/components/ThemeSwitch/ThemeSwitch'
|
||||
|
||||
interface AppBarProps {
|
||||
isDark: boolean
|
||||
toggle: () => void
|
||||
onSearch?: (query: string, tags: string[]) => void
|
||||
onReset?: () => void
|
||||
}
|
||||
interface AppBarProps {}
|
||||
|
||||
export default function AppBar({
|
||||
isDark,
|
||||
toggle,
|
||||
onReset,
|
||||
onSearch,
|
||||
}: AppBarProps) {
|
||||
const { resultsNumber } = useSearchBarContext()
|
||||
export default function AppBar({}: AppBarProps) {
|
||||
const themeState = useThemeState()
|
||||
const { pathname } = useRouter()
|
||||
const isSearchPage = pathname === '/search'
|
||||
|
||||
const [hideSearch, setHideSearch] = useState(
|
||||
resultsNumber === null && !isSearchPage,
|
||||
)
|
||||
const [hide, setHide] = useState(false)
|
||||
const scrollDirection = useScrollDirection()
|
||||
const onSearchIconClick = () => {
|
||||
setHideSearch(!hideSearch)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (scrollDirection) {
|
||||
setHide(scrollDirection === 'down')
|
||||
if (!hideSearch && resultsNumber === null) {
|
||||
setHideSearch(scrollDirection === 'down')
|
||||
}
|
||||
}
|
||||
setHideSearch(resultsNumber === null)
|
||||
}, [scrollDirection, resultsNumber])
|
||||
const [showMobileMenu, setShowMobileMenu] = useState(false)
|
||||
|
||||
const className = pathname.split('/')[1] + '_page'
|
||||
|
||||
const onSearchIconClick = () => {}
|
||||
|
||||
const toggleMobileMenu = () => {
|
||||
setShowMobileMenu(!showMobileMenu)
|
||||
}
|
||||
|
||||
return (
|
||||
<Container className={`${hide ? 'hide' : ''} ${className}`}>
|
||||
<NavBar>
|
||||
<LogosIconContainer href={'/'}>
|
||||
<NavBarContainer>
|
||||
<LeftContainer href={'/'}>
|
||||
<LogosIcon color="primary" />
|
||||
</LogosIconContainer>
|
||||
<Icons>
|
||||
<IconButton size="small" onClick={() => toggle()}>
|
||||
<SunIcon color="primary" className="light-mode-hidden" />
|
||||
<MoonIcon color="primary" className="dark-mode-hidden" />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
className={'searchIcon searchIconHome'}
|
||||
size="small"
|
||||
onClick={() => onSearchIconClick()}
|
||||
>
|
||||
<SearchIcon color="primary" />
|
||||
</IconButton>
|
||||
</Icons>
|
||||
</NavBar>
|
||||
<MobileSearchContainer
|
||||
className={`searchBar ${hideSearch ? 'hide' : ''}`}
|
||||
>
|
||||
<Searchbar
|
||||
className={'mobile'}
|
||||
onSearch={onSearch}
|
||||
onReset={onReset}
|
||||
withFilterTags={isSearchPage}
|
||||
/>
|
||||
</MobileSearchContainer>
|
||||
<PressLogoType variant={'h6'} genericFontFamily={'serif'}>
|
||||
Press Engine
|
||||
</PressLogoType>
|
||||
</LeftContainer>
|
||||
<NavLinksContainer>
|
||||
<NavbarLinks links={NavLinksItems} />
|
||||
</NavLinksContainer>
|
||||
<ControlsContainer>
|
||||
<div className={'theme-switch'}>
|
||||
<ThemeSwitch
|
||||
toggle={themeState.toggleMode}
|
||||
mode={themeState.get().mode}
|
||||
/>
|
||||
</div>
|
||||
<div className={'menu-button'}>
|
||||
<IconButton size={'small'} onClick={toggleMobileMenu}>
|
||||
<MenuIcon color={'primary'} />
|
||||
</IconButton>
|
||||
</div>
|
||||
{/*<IconButton*/}
|
||||
{/* className={'searchIcon searchIconHome'}*/}
|
||||
{/* size="small"*/}
|
||||
{/* onClick={() => onSearchIconClick()}*/}
|
||||
{/*>*/}
|
||||
{/* <SearchIcon color="primary"/>*/}
|
||||
{/*</IconButton>*/}
|
||||
</ControlsContainer>
|
||||
{showMobileMenu && <NavbarMobileMenu />}
|
||||
</NavBarContainer>
|
||||
{/*<MobileSearchContainer*/}
|
||||
{/* className={`searchBar ${hideSearch ? 'hide' : ''}`}*/}
|
||||
{/*>*/}
|
||||
{/* <Searchbar*/}
|
||||
{/* className={'mobile'}*/}
|
||||
{/* onSearch={onSearch}*/}
|
||||
{/* onReset={onReset}*/}
|
||||
{/* withFilterTags={isSearchPage}*/}
|
||||
{/* />*/}
|
||||
{/*</MobileSearchContainer>*/}
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
const Container = styled.div`
|
||||
const PressLogoType = styled(Typography)``
|
||||
|
||||
const Container = styled.header`
|
||||
width: 100%;
|
||||
transition: top 0.2s;
|
||||
height: 44px;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 101;
|
||||
left: calc(calc(100% - ${uiConfigs.maxContainerWidth}px) / 2);
|
||||
|
||||
&._page {
|
||||
@media (min-width: 768px) {
|
||||
.searchBar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.searchIconHome {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
background: rgb(var(--lsd-surface-primary));
|
||||
transition: top 0.2s;
|
||||
|
||||
&.article_page,
|
||||
&.search_page {
|
||||
}
|
||||
|
||||
@media (max-width: ${uiConfigs.maxContainerWidth}px) {
|
||||
left: 16px;
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
&.hide {
|
||||
top: -44px;
|
||||
}
|
||||
}
|
||||
|
||||
> * {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
`
|
||||
|
||||
const MobileSearchContainer = styled.div`
|
||||
width: 100%;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
z-index: 98;
|
||||
transform: translateY(44px);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: block;
|
||||
&.hide {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const NavBar = styled.nav`
|
||||
const NavBarContainer = styled.nav`
|
||||
display: flex;
|
||||
padding: 8px 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
|
||||
border-bottom: 1px solid rgb(var(--lsd-theme-primary));
|
||||
//position: fixed;
|
||||
|
||||
margin: auto;
|
||||
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
width: calc(100% - 32px);
|
||||
max-width: ${uiConfigs.maxContainerWidth}px;
|
||||
background: rgb(var(--lsd-surface-primary));
|
||||
z-index: 100;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:last-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
// to center-align logo
|
||||
&:before {
|
||||
content: 'D';
|
||||
width: 54px;
|
||||
margin: 1px auto 1px 1px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* temporary breakpoint */
|
||||
@media (max-width: 768px) {
|
||||
padding: 8px;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
> * {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
`
|
||||
|
||||
const LogosIconContainer = styled(Link)`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
const NavLinksContainer = styled.div`
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-left: unset;
|
||||
@media (max-width: ${({ theme }) => theme.breakpoints.sm.width}px) {
|
||||
display: none !important;
|
||||
}
|
||||
`
|
||||
|
||||
const Icons = styled.div`
|
||||
const LeftContainer = styled(Link)`
|
||||
flex: 0 0 auto;
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
|
||||
> *:last-of-type {
|
||||
margin-left: -1px;
|
||||
@media (max-width: 768px) {
|
||||
position: relative;
|
||||
}
|
||||
`
|
||||
|
||||
const ControlsContainer = styled.div`
|
||||
.theme-switch {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.searchIcon {
|
||||
.menu-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.searchIcon {
|
||||
.theme-switch {
|
||||
// hide theme switch
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
47
src/components/AppBar/Navbar.Links.tsx
Normal file
47
src/components/AppBar/Navbar.Links.tsx
Normal file
@ -0,0 +1,47 @@
|
||||
import Link from 'next/link'
|
||||
import styled from '@emotion/styled'
|
||||
|
||||
interface Props {
|
||||
links: { href: string; label: string }[]
|
||||
}
|
||||
|
||||
export const NavbarLinks = ({ links }: Props) => {
|
||||
return (
|
||||
<Container>
|
||||
{links.map((link, idx) => (
|
||||
<>
|
||||
<Link href={link.href} key={`navbar-link-${idx}`}>
|
||||
{link.label}
|
||||
</Link>
|
||||
{idx !== links.length - 1 && <span className={'divider'} />}
|
||||
</>
|
||||
))}
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.divider {
|
||||
display: block;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background: rgb(var(--lsd-surface-secondary));
|
||||
border-radius: 50%;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
@media (max-width: ${({ theme }) => theme.breakpoints.sm.width}px) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
.divider {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`
|
||||
49
src/components/AppBar/Navbar.MobileMenu.tsx
Normal file
49
src/components/AppBar/Navbar.MobileMenu.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
import styled from '@emotion/styled'
|
||||
import { NavbarLinks } from '@/components/AppBar/Navbar.Links'
|
||||
import { NavLinksItems } from '@/configs/data.configs'
|
||||
import { uiConfigs } from '@/configs/ui.configs'
|
||||
import { FooterOrgPanel } from '@/components/Footer/Footer.OrgPanel'
|
||||
import { useThemeState } from '@/states/themeState'
|
||||
import { ThemeSwitchWithLabel } from '@/components/ThemeSwitch/ThemeSwitch'
|
||||
|
||||
interface Props {}
|
||||
|
||||
export const NavbarMobileMenu = (props: Props) => {
|
||||
const themeState = useThemeState()
|
||||
return (
|
||||
<NavbarMobileMenuContainer>
|
||||
<InnerContainer>
|
||||
<NavbarLinks links={NavLinksItems} />
|
||||
<FooterOrgPanel />
|
||||
<ThemeSwitchWithLabel
|
||||
toggle={themeState.toggleMode}
|
||||
mode={themeState.get().mode}
|
||||
/>
|
||||
</InnerContainer>
|
||||
</NavbarMobileMenuContainer>
|
||||
)
|
||||
}
|
||||
|
||||
const NavbarMobileMenuContainer = styled.div`
|
||||
position: fixed;
|
||||
top: ${uiConfigs.navbarRenderedHeight - 1}px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100vh - ${uiConfigs.navbarRenderedHeight - 2}px);
|
||||
z-index: 100;
|
||||
background: rgb(var(--lsd-surface-primary));
|
||||
`
|
||||
|
||||
const InnerContainer = styled.div`
|
||||
height: 100%;
|
||||
width: calc(100% - 32px);
|
||||
margin: auto;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> * {
|
||||
border-top: 1px solid rgb(var(--lsd-theme-primary));
|
||||
margin-top: 16px;
|
||||
}
|
||||
`
|
||||
151
src/components/Footer/Footer.BuPanel.tsx
Normal file
151
src/components/Footer/Footer.BuPanel.tsx
Normal file
@ -0,0 +1,151 @@
|
||||
import { Typography } from '@acid-info/lsd-react'
|
||||
import styled from '@emotion/styled'
|
||||
import { FooterLink } from '@/components/Footer/Footer.Link'
|
||||
import { 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>
|
||||
<Wrapper>
|
||||
<SecondLinksContainer>
|
||||
{SECOND_LINK_GROUP.map(({ title, links }, idx) => (
|
||||
<LinkGroup key={'second-group' + idx}>
|
||||
<div>
|
||||
<Typography
|
||||
component="div"
|
||||
genericFontFamily="sans-serif"
|
||||
variant="body2"
|
||||
>
|
||||
{title}:
|
||||
</Typography>
|
||||
</div>
|
||||
<Row>
|
||||
{links.map(({ label, href }, idx) => (
|
||||
<FooterLink
|
||||
key={'second-group-link' + idx}
|
||||
component="a"
|
||||
href={href}
|
||||
genericFontFamily="sans-serif"
|
||||
variant="body2"
|
||||
>
|
||||
{label}
|
||||
</FooterLink>
|
||||
))}
|
||||
</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>
|
||||
</Wrapper>
|
||||
</BusinessUnits>
|
||||
)
|
||||
}
|
||||
|
||||
const Row = styled.div`
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
`
|
||||
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
/* temporary breakpoint */
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
`
|
||||
|
||||
const SECTION_MARGIN = 50
|
||||
|
||||
const BusinessUnits = styled(FooterSectionContainer)`
|
||||
margin-top: ${SECTION_MARGIN}px;
|
||||
padding: 16px 0 0 0;
|
||||
`
|
||||
|
||||
const SecondLinksContainer = styled.div`
|
||||
flex: 2;
|
||||
`
|
||||
|
||||
const ThirdLinksContainer = styled.div`
|
||||
flex: 1;
|
||||
margin-bottom: ${SECTION_MARGIN}px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
`
|
||||
|
||||
const LinkGroup = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 34px;
|
||||
gap: 4px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
`
|
||||
14
src/components/Footer/Footer.Link.tsx
Normal file
14
src/components/Footer/Footer.Link.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import styled from '@emotion/styled'
|
||||
import { Typography } from '@acid-info/lsd-react'
|
||||
|
||||
export const FooterLink = styled(Typography)`
|
||||
width: fit-content;
|
||||
&:not(:last-child) {
|
||||
&:after {
|
||||
content: '•';
|
||||
margin-left: 8px;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
`
|
||||
68
src/components/Footer/Footer.OrgPanel.tsx
Normal file
68
src/components/Footer/Footer.OrgPanel.tsx
Normal file
@ -0,0 +1,68 @@
|
||||
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/' },
|
||||
]
|
||||
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>
|
||||
<Links>
|
||||
{FIRST_LINK_GRUOP.map(({ label, href }, idx) => (
|
||||
<FooterLink
|
||||
key={'first-grouop' + idx}
|
||||
component="a"
|
||||
href={href}
|
||||
genericFontFamily="sans-serif"
|
||||
variant="body2"
|
||||
>
|
||||
{label}
|
||||
</FooterLink>
|
||||
))}
|
||||
</Links>
|
||||
</Wrapper>
|
||||
)
|
||||
}
|
||||
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
/* temporary breakpoint */
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
`
|
||||
|
||||
const OrgInfo = styled(FooterSection)`
|
||||
@media (max-width: 768px) {
|
||||
margin-bottom: 76px;
|
||||
}
|
||||
`
|
||||
|
||||
const Links = styled(FooterSection)`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
`
|
||||
19
src/components/Footer/Footer.Section.tsx
Normal file
19
src/components/Footer/Footer.Section.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import styled from '@emotion/styled'
|
||||
export const FooterSection = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
width: 50%;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
}
|
||||
`
|
||||
export const FooterSectionContainer = styled.div`
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
margin-top: 200px;
|
||||
padding: 16px;
|
||||
border-top: 1px solid rgb(var(--lsd-border-primary));
|
||||
`
|
||||
@ -1,48 +1,8 @@
|
||||
import { Button, Typography } from '@acid-info/lsd-react'
|
||||
import styled from '@emotion/styled'
|
||||
|
||||
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/' },
|
||||
]
|
||||
|
||||
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/' },
|
||||
],
|
||||
},
|
||||
]
|
||||
import { FooterOrgPanel } from '@/components/Footer/Footer.OrgPanel'
|
||||
import { FooterSectionContainer } from '@/components/Footer/Footer.Section'
|
||||
import { FooterBuPanel } from '@/components/Footer/Footer.BuPanel'
|
||||
|
||||
export default function Footer() {
|
||||
const handleScrollToTop = () => {
|
||||
@ -53,212 +13,16 @@ export default function Footer() {
|
||||
}
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<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>
|
||||
<Links>
|
||||
{FIRST_LINK_GRUOP.map(({ label, href }, idx) => (
|
||||
<Link
|
||||
key={'first-grouop' + idx}
|
||||
component="a"
|
||||
href={href}
|
||||
genericFontFamily="sans-serif"
|
||||
variant="body2"
|
||||
>
|
||||
{label}
|
||||
</Link>
|
||||
))}
|
||||
</Links>
|
||||
</Wrapper>
|
||||
<BusinessUnits>
|
||||
<Wrapper>
|
||||
<OrgInfo>
|
||||
<Typography
|
||||
component="div"
|
||||
genericFontFamily="sans-serif"
|
||||
variant="body2"
|
||||
>
|
||||
Logos
|
||||
</Typography>
|
||||
<Typography
|
||||
component="div"
|
||||
genericFontFamily="sans-serif"
|
||||
variant="body2"
|
||||
>
|
||||
Business Units:
|
||||
</Typography>
|
||||
</OrgInfo>
|
||||
<SecondLinksContainer>
|
||||
{SECOND_LINK_GROUP.map(({ title, links }, idx) => (
|
||||
<LinkGroup key={'second-group' + idx}>
|
||||
<div>
|
||||
<Typography
|
||||
component="div"
|
||||
genericFontFamily="sans-serif"
|
||||
variant="body2"
|
||||
>
|
||||
{title}:
|
||||
</Typography>
|
||||
</div>
|
||||
<Row>
|
||||
{links.map(({ label, href }, idx) => (
|
||||
<Link
|
||||
key={'second-group-link' + idx}
|
||||
component="a"
|
||||
href={href}
|
||||
genericFontFamily="sans-serif"
|
||||
variant="body2"
|
||||
>
|
||||
{label}
|
||||
</Link>
|
||||
))}
|
||||
</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) => (
|
||||
<Link
|
||||
key={'third-group-link' + idx}
|
||||
component="a"
|
||||
href={href}
|
||||
genericFontFamily="sans-serif"
|
||||
variant="body2"
|
||||
>
|
||||
{label}
|
||||
</Link>
|
||||
))}
|
||||
</Row>
|
||||
</LinkGroup>
|
||||
))}
|
||||
</ThirdLinksContainer>
|
||||
</Wrapper>
|
||||
</BusinessUnits>
|
||||
<FooterSectionContainer>
|
||||
<FooterOrgPanel />
|
||||
<FooterBuPanel />
|
||||
<ScrollToTop size="small" onClick={handleScrollToTop}>
|
||||
Back to up ↑
|
||||
</ScrollToTop>
|
||||
</Container>
|
||||
</FooterSectionContainer>
|
||||
)
|
||||
}
|
||||
|
||||
const SECTION_MARGIN = 50
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
margin-top: 200px;
|
||||
padding: 16px;
|
||||
border-top: 1px solid rgb(var(--lsd-border-primary));
|
||||
`
|
||||
|
||||
const Section = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
width: 50%;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
}
|
||||
`
|
||||
|
||||
const OrgInfo = styled(Section)`
|
||||
@media (max-width: 768px) {
|
||||
margin-bottom: 76px;
|
||||
}
|
||||
`
|
||||
|
||||
const Links = styled(Section)`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
`
|
||||
|
||||
const Link = styled(Typography)`
|
||||
width: fit-content;
|
||||
&:not(:last-child) {
|
||||
&:after {
|
||||
content: '•';
|
||||
margin-left: 8px;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const Row = styled.div`
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
`
|
||||
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
/* temporary breakpoint */
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
`
|
||||
|
||||
const BusinessUnits = styled(Container)`
|
||||
margin-top: ${SECTION_MARGIN}px;
|
||||
padding: 16px 0 0 0;
|
||||
`
|
||||
|
||||
const SecondLinksContainer = styled.div`
|
||||
flex: 2;
|
||||
`
|
||||
|
||||
const ThirdLinksContainer = styled.div`
|
||||
flex: 1;
|
||||
margin-bottom: ${SECTION_MARGIN}px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
`
|
||||
|
||||
const LinkGroup = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 34px;
|
||||
gap: 4px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
`
|
||||
|
||||
const ScrollToTop = styled(Button)`
|
||||
width: fit-content;
|
||||
position: absolute;
|
||||
|
||||
20
src/components/Icons/CrossIcon/CrossIcon.tsx
Normal file
20
src/components/Icons/CrossIcon/CrossIcon.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import { LsdIcon } from '@acid-info/lsd-react'
|
||||
|
||||
export const CrossIcon = LsdIcon(
|
||||
(props) => (
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M5.46583 3.21417C5.36083 3.5875 5.30833 3.97833 5.30833 4.375C5.30833 6.755 7.245 8.69167 9.625 8.69167C10.0217 8.69167 10.4125 8.63917 10.7858 8.53417C10.1792 10.0275 8.70917 11.0833 7 11.0833C4.74833 11.0833 2.91667 9.25167 2.91667 7C2.91667 5.29083 3.9725 3.82083 5.46583 3.21417ZM7 1.75C4.10083 1.75 1.75 4.10083 1.75 7C1.75 9.89917 4.10083 12.25 7 12.25C9.89917 12.25 12.25 9.89917 12.25 7C12.25 6.73167 12.2267 6.46333 12.1917 6.20667C11.62 7.00583 10.6867 7.525 9.625 7.525C7.88667 7.525 6.475 6.11333 6.475 4.375C6.475 3.31917 6.99417 2.38 7.79333 1.80833C7.53667 1.77333 7.26833 1.75 7 1.75Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
{ filled: true },
|
||||
)
|
||||
1
src/components/Icons/CrossIcon/index.ts
Normal file
1
src/components/Icons/CrossIcon/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './CrossIcon'
|
||||
39
src/components/ThemeSwitch/ThemeSwitch.tsx
Normal file
39
src/components/ThemeSwitch/ThemeSwitch.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import { SunIcon } from '@/components/Icons/SunIcon'
|
||||
import { MoonIcon } from '@/components/Icons/MoonIcon'
|
||||
import { Button, IconButton } from '@acid-info/lsd-react'
|
||||
import React from 'react'
|
||||
import { ThemeState } from '@/states/themeState'
|
||||
interface Props {
|
||||
toggle: () => void
|
||||
mode?: ThemeState['mode']
|
||||
}
|
||||
|
||||
export const ThemeSwitch = ({ toggle, mode }: Props) => {
|
||||
return (
|
||||
<IconButton size="small" onClick={() => toggle()}>
|
||||
{mode === 'light' ? (
|
||||
<MoonIcon color="primary" />
|
||||
) : (
|
||||
<SunIcon color="primary" />
|
||||
)}
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
export const ThemeSwitchWithLabel = ({ toggle, mode }: Props) => {
|
||||
return (
|
||||
<Button
|
||||
icon={
|
||||
mode === 'light' ? (
|
||||
<MoonIcon color="primary" />
|
||||
) : (
|
||||
<SunIcon color="primary" />
|
||||
)
|
||||
}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
onClick={toggle}
|
||||
>
|
||||
{mode === 'light' ? 'Dark mode' : 'Light mode'}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
@ -6,3 +6,9 @@ export const ArticleBlocksOrders = {
|
||||
mentions: 4,
|
||||
cover: 5,
|
||||
}
|
||||
|
||||
export const NavLinksItems = [
|
||||
{ label: 'Articles', href: '/search?postType=article' },
|
||||
{ label: 'Podcasts', href: '/podcasts' },
|
||||
{ label: 'About', href: '/about' },
|
||||
]
|
||||
|
||||
@ -37,7 +37,17 @@ export const useLSDTheme = () => {
|
||||
|
||||
const themes = useMemo(() => {
|
||||
const options: CreateThemeProps = {
|
||||
breakpoints: {},
|
||||
breakpoints: {
|
||||
sm: {
|
||||
width: 768,
|
||||
},
|
||||
md: {
|
||||
width: 1024,
|
||||
},
|
||||
lg: {
|
||||
width: 1280,
|
||||
},
|
||||
},
|
||||
palette: {},
|
||||
typography: {},
|
||||
typographyGlobal: {
|
||||
|
||||
@ -9,33 +9,11 @@ import { AppBar } from '../../components/AppBar'
|
||||
import { useThemeState } from '../../states/themeState'
|
||||
|
||||
export default function DefaultLayout(props: PropsWithChildren<any>) {
|
||||
const themeState = useThemeState()
|
||||
|
||||
return (
|
||||
<>
|
||||
<HeaderContainer
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
marginBlock: `${uiConfigs.navbarRenderedHeight}px`,
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<AppBar
|
||||
isDark={themeState.mode.get() === 'dark'}
|
||||
toggle={themeState.toggleMode}
|
||||
/>
|
||||
<Hero />
|
||||
</div>
|
||||
<Searchbar withFilterTags={false} beSticky={true} />
|
||||
</HeaderContainer>
|
||||
<AppBar />
|
||||
<Main>{props.children}</Main>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const HeaderContainer = styled.header`
|
||||
@media (min-width: 776px) and (max-width: ${uiConfigs.maxContainerWidth}px) {
|
||||
padding: 0 16px;
|
||||
}
|
||||
`
|
||||
|
||||
@ -8,6 +8,7 @@ import SEO from '../components/SEO/SEO'
|
||||
import { api } from '../services/api.service'
|
||||
import unbodyApi from '../services/unbody/unbody.service'
|
||||
import { LPE } from '../types/lpe.types'
|
||||
import { Hero } from '@/components/Hero'
|
||||
|
||||
type Props = {
|
||||
posts: LPE.Article.Data[]
|
||||
@ -37,6 +38,7 @@ export default function Home({ posts, featured, tags }: Props) {
|
||||
}
|
||||
title={'Logos Press Engine'}
|
||||
/>
|
||||
<Hero />
|
||||
{featured && (
|
||||
<Section title={'Featured'}>
|
||||
<FeaturedPost post={featured} />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user