Browse Source

made countdown

pull/3/head
remorses 1 year ago
parent
commit
800e454853
5 changed files with 142 additions and 22 deletions
  1. +10
    -12
      react-landing/src/Bullet.tsx
  2. +111
    -0
      react-landing/src/Countdown.tsx
  3. +19
    -10
      react-landing/src/SectionTitle.tsx
  4. +1
    -0
      react-landing/src/hooks.tsx
  5. +1
    -0
      react-landing/src/index.tsx

+ 10
- 12
react-landing/src/Bullet.tsx View File

@ -1,11 +1,13 @@
import { useColorMode } from "@chakra-ui/core"
import React from "react"
import Color from "color-js"
import {Text} from '@chakra-ui/core'
import { useColorMode } from '@chakra-ui/core'
import React, { Fragment } from 'react'
import Color from 'color-js'
import { Text } from '@chakra-ui/core'
export const Bullet = (props) => {
const { colorMode } = useColorMode()
if (!props.children) {
return <Fragment />
}
return (
<Text
w='fit-content'
@ -13,12 +15,8 @@ export const Bullet = (props) => {
px='6px'
bg={
{
light: Color('black')
.setAlpha(0.2)
.toCSS(),
dark: Color('white')
.setAlpha(0.2)
.toCSS(),
light: Color('black').setAlpha(0.2).toCSS(),
dark: Color('white').setAlpha(0.2).toCSS(),
}[colorMode]
}
fontWeight='medium'
@ -27,4 +25,4 @@ export const Bullet = (props) => {
{...props}
/>
)
}
}

+ 111
- 0
react-landing/src/Countdown.tsx View File

@ -0,0 +1,111 @@
import { Box, Stack, StackProps } from '@chakra-ui/core'
import React, { ReactNode, cloneElement, useState, useEffect } from 'react'
import { Row, SubHeading, Heading, Button, Bullet } from '.'
import {
PageContainer,
Col,
FloatingElement,
PageContainerProps,
} from './layout'
import { useFaded } from './hooks'
import { GradientRect } from './decorations'
import { clone } from './support'
export type SectionTitleProps = {
heading?: ReactNode
subheading?: ReactNode
cta?: ReactNode
bullet?: ReactNode
deadline: Date
animate?: any
} & PageContainerProps
export function Countdown({
heading = '',
subheading = '',
deadline,
bullet = '',
cta = '' as ReactNode,
animate = true,
...rest
}: SectionTitleProps) {
const [timeLeft, setTimeLeft] = useState(calculateTimeLeft({ deadline }))
useEffect(() => {
setTimeout(() => {
setTimeLeft(calculateTimeLeft({ deadline }))
}, 1000)
})
const { Faded } = useFaded({ animate })
return (
<PageContainer {...rest}>
<Stack
as={Faded}
alignSelf='center'
maxW='700px'
spacing='30px'
align='center'
textAlign='center'
>
<Bullet>{bullet}</Bullet>
<Heading fontSize='32px'>{heading}</Heading>
<SubHeading fontSize='18px'>{subheading}</SubHeading>
<Stack spacing='20px' direction='row'>
{Object.keys(timeLeft).map((timeName, index) => {
const remaining: string = timeLeft[timeName]
const isLast =
index === Object.keys(timeLeft).length - 1
return (
<Stack
direction='row'
spacing='20px'
// fontSize='18px'
>
<Stack spacing='10px' align='center'>
<Box fontSize='62px'>{remaining}</Box>
<Box letterSpacing='2px' opacity={0.6}>
{timeName.toUpperCase()}
</Box>
</Stack>
{!isLast && <Box opacity={.8} fontSize='52px'>:</Box>}
</Stack>
)
})}
</Stack>
{cta && (
<Col justify='center' align='center'>
{clone(cta)}
</Col>
)}
</Stack>
</PageContainer>
)
}
const calculateTimeLeft = ({ deadline }: { deadline: Date }) => {
const difference = +new Date(deadline) - +new Date()
let timeLeft = {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
minutes: Math.floor((difference / 1000 / 60) % 60),
seconds: Math.floor((difference / 1000) % 60),
}
timeLeft = Object.assign(
{},
...Object.keys(timeLeft).map((k) => ({
[k]: padZeros(timeLeft[k], 2),
})),
)
return timeLeft
}
function padZeros(number, length) {
var my_string = '' + number
while (my_string.length < length) {
my_string = '0' + my_string
}
return my_string
}

+ 19
- 10
react-landing/src/SectionTitle.tsx View File

@ -1,19 +1,28 @@
import { Box, Stack } from '@chakra-ui/core'
import { Box, Stack, StackProps } from '@chakra-ui/core'
import React, { ReactNode, cloneElement } from 'react'
import { Row, SubHeading, Heading, Button } from '.'
import { PageContainer, Col, FloatingElement } from './layout'
import { useFaded } from './hooks'
import { Row, SubHeading, Heading, Button, Bullet } from '.'
import { PageContainer, Col, FloatingElement, PageContainerProps } from './layout'
import { useFaded } from './hooks'
import { GradientRect } from './decorations'
import { clone } from './support'
export type SectionTitleProps = {
heading?: ReactNode
subheading?: ReactNode
cta?: ReactNode
bullet?: ReactNode
animate?: any
} & PageContainerProps
export function SectionTitle({
heading,
subheading,
heading = '',
subheading = '',
bullet = '',
cta = '' as ReactNode,
animate = true,
...rest
}) {
}: SectionTitleProps) {
const { Faded } = useFaded({ animate })
return (
<PageContainer {...rest}>
@ -25,12 +34,12 @@ export function SectionTitle({
align='center'
textAlign='center'
>
{/* <Bullett>{bullett}</Bullett> */}
<Bullet>{bullet}</Bullet>
<Heading fontSize='32px'>{heading}</Heading>
<SubHeading fontSize='18px' maxW='700px'>
<SubHeading fontSize='18px'>
{subheading}
</SubHeading>
{cta && <Col align='center'>{clone(cta)}</Col>}
{cta && <Col justify='center' align='center'>{clone(cta)}</Col>}
</Stack>
</PageContainer>
)

+ 1
- 0
react-landing/src/hooks.tsx View File

@ -19,6 +19,7 @@ export function useFaded({
threshold: 0.1,
duration: 400,
triggerOnce,
children: []
}
return (props) => {
return <Faded {...defaultProps} {...props} />

+ 1
- 0
react-landing/src/index.tsx View File

@ -13,6 +13,7 @@ export { TopBanner } from './TopBanner'
export { Faqs } from './Faqs'
export { Banner } from './Banner'
export { Pricing } from './Pricing'
export { Countdown } from './Countdown'
export { TestimonialsTweets } from './TestimonialsTweets'
// atoms

Loading…
Cancel
Save