feat: implement countdown page
This commit is contained in:
parent
228da3834b
commit
4688acb11c
Binary file not shown.
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
After Width: | Height: | Size: 318 KiB |
Binary file not shown.
|
@ -6,14 +6,19 @@ import React from 'react'
|
||||||
interface NavbarProps {}
|
interface NavbarProps {}
|
||||||
|
|
||||||
const items = [
|
const items = [
|
||||||
|
{
|
||||||
|
label: 'Countdown',
|
||||||
|
href: '/countdown',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: 'Explore',
|
label: 'Explore',
|
||||||
href: '/',
|
href: '/',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Dashboard [soon]',
|
label: 'Dashboard',
|
||||||
href: '/dashboard',
|
href: '/dashboard',
|
||||||
isDisabled: true,
|
isDisabled: true,
|
||||||
|
isSoon: true,
|
||||||
},
|
},
|
||||||
// {
|
// {
|
||||||
// label: 'Leaderboard',
|
// label: 'Leaderboard',
|
||||||
|
@ -38,7 +43,7 @@ const Navbar: React.FC<NavbarProps> = () => {
|
||||||
const currentPath = router.pathname
|
const currentPath = router.pathname
|
||||||
|
|
||||||
const isActivePath = (path: string) => {
|
const isActivePath = (path: string) => {
|
||||||
return path !== '/dashboard'
|
return currentPath === path
|
||||||
// return currentPath.includes(path)
|
// return currentPath.includes(path)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -46,9 +51,12 @@ const Navbar: React.FC<NavbarProps> = () => {
|
||||||
<Navigation>
|
<Navigation>
|
||||||
{items.map((item, index) =>
|
{items.map((item, index) =>
|
||||||
item?.isDisabled === true ? (
|
item?.isDisabled === true ? (
|
||||||
<NavItem isDisabled key={index} active={isActivePath(item.href)}>
|
<NavItemContainer key={index}>
|
||||||
{item.label}
|
<NavItem isDisabled active={isActivePath(item.href)}>
|
||||||
</NavItem>
|
{item.label}
|
||||||
|
</NavItem>
|
||||||
|
{item?.isSoon && <SoonText>Soon</SoonText>}
|
||||||
|
</NavItemContainer>
|
||||||
) : (
|
) : (
|
||||||
<Link href={item.href} key={'navbar-item-' + index}>
|
<Link href={item.href} key={'navbar-item-' + index}>
|
||||||
{isActivePath(item.href) && (
|
{isActivePath(item.href) && (
|
||||||
|
@ -90,7 +98,6 @@ const Navigation = styled.ul`
|
||||||
`
|
`
|
||||||
|
|
||||||
const NavItem = styled.li<{ active?: boolean; isDisabled?: boolean }>`
|
const NavItem = styled.li<{ active?: boolean; isDisabled?: boolean }>`
|
||||||
font-weight: 400;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
color: rgb(var(--lsd-text-primary));
|
color: rgb(var(--lsd-text-primary));
|
||||||
|
@ -110,4 +117,24 @@ const NavItem = styled.li<{ active?: boolean; isDisabled?: boolean }>`
|
||||||
`}
|
`}
|
||||||
`
|
`
|
||||||
|
|
||||||
|
const NavItemContainer = styled.div`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const SoonText = styled.span`
|
||||||
|
display: flex;
|
||||||
|
padding: 3px 6px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
color: #f29ae9;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 16px;
|
||||||
|
letter-spacing: 0.12px;
|
||||||
|
`
|
||||||
|
|
||||||
export default Navbar
|
export default Navbar
|
||||||
|
|
|
@ -0,0 +1,31 @@
|
||||||
|
import { breakpoints } from '@/configs/ui.configs'
|
||||||
|
import styled from '@emotion/styled'
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
const CountdownContainer: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<Container>
|
||||||
|
<Video autoPlay loop muted playsInline>
|
||||||
|
<source src="/videos/countdown.mp4" type="video/mp4" />
|
||||||
|
</Video>
|
||||||
|
</Container>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const Container = styled.section`
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
@media (max-width: ${breakpoints.sm}px) {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const Video = styled.video`
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 32px;
|
||||||
|
`
|
||||||
|
|
||||||
|
export default CountdownContainer
|
|
@ -0,0 +1 @@
|
||||||
|
export { default as CountdownContainer } from './CountdownContainer'
|
|
@ -0,0 +1,58 @@
|
||||||
|
import { Header } from '@/components/Header/Header'
|
||||||
|
import { Container, Layout } from '@/components/StyledComponents'
|
||||||
|
import { breakpoints } from '@/configs/ui.configs'
|
||||||
|
import styled from '@emotion/styled'
|
||||||
|
import React, { PropsWithChildren } from 'react'
|
||||||
|
|
||||||
|
interface CountdownLayoutProps {}
|
||||||
|
|
||||||
|
const BackgroundImage = styled.div`
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 0;
|
||||||
|
background-image: url('/countdown/countdown-desktop-bg.png');
|
||||||
|
filter: blur(150px);
|
||||||
|
|
||||||
|
@media (max-width: ${breakpoints.sm}px) {
|
||||||
|
background-image: url('/countdown/countdown-mobile-bg.png');
|
||||||
|
filter: blur(53px);
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const CountdownContainer = styled(Container)`
|
||||||
|
@media (max-width: ${breakpoints.sm}px) {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const Main = styled.main`
|
||||||
|
@media (max-width: ${breakpoints.sm}px) {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const CountdownLayout: React.FC<CountdownLayoutProps> = (
|
||||||
|
props: PropsWithChildren,
|
||||||
|
) => {
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<CountdownContainer>
|
||||||
|
<Header />
|
||||||
|
<Main>{props.children}</Main>
|
||||||
|
</CountdownContainer>
|
||||||
|
<BackgroundImage />
|
||||||
|
</Layout>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CountdownLayout
|
|
@ -0,0 +1 @@
|
||||||
|
export { default as CountdownLayout } from './CountdownLayout'
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { SEO } from '@/components/SEO'
|
||||||
|
import { CountdownContainer } from '@/containers/Countdown'
|
||||||
|
import { CountdownLayout } from '@/layouts/CountdownLayout'
|
||||||
|
|
||||||
|
type PageProps = {}
|
||||||
|
|
||||||
|
export default function CountdownPage(props: PageProps) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<SEO pagePath="/docs" />
|
||||||
|
<CountdownContainer />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
CountdownPage.getLayout = function getLayout(page: React.ReactNode) {
|
||||||
|
return <CountdownLayout>{page}</CountdownLayout>
|
||||||
|
}
|
|
@ -6,7 +6,7 @@ type PageProps = {}
|
||||||
export default function DocsPage(props: PageProps) {
|
export default function DocsPage(props: PageProps) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SEO />
|
<SEO pagePath="/docs" />
|
||||||
<DocsContainer />
|
<DocsContainer />
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in New Issue