Browse Source

react-landing/src: completed types

pull/3/head
remorses 1 year ago
parent
commit
cd4fce97b4
13 changed files with 148 additions and 82 deletions
  1. +3
    -1
      react-landing/src/Bullet.tsx
  2. +2
    -2
      react-landing/src/Countdown.tsx
  3. +7
    -1
      react-landing/src/FeaturesGrid.tsx
  4. +18
    -18
      react-landing/src/GumroadButton.tsx
  5. +3
    -2
      react-landing/src/Heading.tsx
  6. +13
    -4
      react-landing/src/Hero.tsx
  7. +18
    -5
      react-landing/src/HowItWorks.tsx
  8. +19
    -4
      react-landing/src/NavBar.tsx
  9. +3
    -4
      react-landing/src/Pricing.tsx
  10. +10
    -4
      react-landing/src/TestimonialsLogos.tsx
  11. +21
    -15
      react-landing/src/TestimonialsTweets.tsx
  12. +9
    -3
      react-landing/src/TopBanner.tsx
  13. +22
    -19
      react-landing/src/index.tsx

+ 3
- 1
react-landing/src/Bullet.tsx View File

@ -1,8 +1,10 @@
import { useColorMode } from '@chakra-ui/core'
import { useColorMode, BoxProps } from '@chakra-ui/core'
import React, { Fragment } from 'react'
import Color from 'color-js'
import { Text } from '@chakra-ui/core'
export type BulletProps = BoxProps
export const Bullet = (props) => {
const { colorMode } = useColorMode()
if (!props.children) {

+ 2
- 2
react-landing/src/Countdown.tsx View File

@ -8,7 +8,7 @@ import { clone } from './support'
import { Bullet } from './Bullet'
export type SectionTitleProps = {
export type CountdownProps = {
heading?: ReactNode
subheading?: ReactNode
cta?: ReactNode
@ -25,7 +25,7 @@ export function Countdown({
cta = '' as ReactNode,
animate = undefined,
...rest
}: SectionTitleProps) {
}: CountdownProps) {
const [timeLeft, setTimeLeft] = useState(calculateTimeLeft({ deadline }))
useEffect(() => {
setTimeout(() => {

+ 7
- 1
react-landing/src/FeaturesGrid.tsx View File

@ -61,7 +61,13 @@ export function FeaturesGrid({
)
}
const Feature = ({ heading, subheading, icon, centerText, ...rest }) => {
const Feature = ({
heading = '',
subheading = '',
icon = '',
centerText,
...rest
}: any) => {
return (
<Stack
textAlign={centerText ? 'center' : 'left'}

+ 18
- 18
react-landing/src/GumroadButton.tsx View File

@ -7,24 +7,6 @@ export type GumroadButtonProps = {
productId: string
}
const Placeholder = (props) => {
const { colorMode } = useColorMode()
return (
<Link
display='flex'
flexDir='column'
alignItems='center'
justifyContent='center'
borderRadius='6px'
color='gray.300'
width='230px'
h='50px'
bg={{ light: 'gray.100', dark: 'rgba(255,255,255,.1)' }[colorMode]}
{...props}
/>
)
}
export const GumroadButton = forwardRef(
(
{
@ -56,3 +38,21 @@ export const GumroadButton = forwardRef(
// return <B {...props} />
},
)
const Placeholder = (props) => {
const { colorMode } = useColorMode()
return (
<Link
display='flex'
flexDir='column'
alignItems='center'
justifyContent='center'
borderRadius='6px'
color='gray.300'
width='230px'
h='50px'
bg={{ light: 'gray.100', dark: 'rgba(255,255,255,.1)' }[colorMode]}
{...props}
/>
)
}

+ 3
- 2
react-landing/src/Heading.tsx View File

@ -1,7 +1,8 @@
import { Heading as H } from '@chakra-ui/core'
import { Heading as H, HeadingProps } from '@chakra-ui/core'
import React, { Fragment } from 'react'
export function Heading(props) {
export function Heading(props: HeadingProps) {
if (!props.children) {
return <Fragment />
}

+ 13
- 4
react-landing/src/Hero.tsx View File

@ -1,12 +1,21 @@
import { Box, Stack } from '@chakra-ui/core'
import React from 'react'
import React, { ReactNode } from 'react'
import { Bullet } from './Bullet'
import { Heading } from './Heading'
import { useFaded } from './hooks'
import { Col, PageContainer, Row } from './layout'
import { Col, PageContainer, Row, PageContainerProps } from './layout'
import { Subheading } from './Subheading'
import { clone } from './support'
export type HeroProps = {
heading?: ReactNode
subheading?: ReactNode
cta?: ReactNode
image?: ReactNode
bullet?: ReactNode
fingerprint?: ReactNode
animate?: any
} & PageContainerProps
export function Hero({
heading,
@ -14,10 +23,10 @@ export function Hero({
cta,
image,
bullet = '',
animate = undefined,
fingerprint = '',
animate = undefined,
...rest
}) {
}: HeroProps) {
const { Faded } = useFaded({ animate })
return (
<PageContainer {...rest}>

+ 18
- 5
react-landing/src/HowItWorks.tsx View File

@ -1,9 +1,22 @@
import { Box, Stack, Text } from '@chakra-ui/core'
import React from 'react'
import React, { ReactNode } from 'react'
import { Heading } from './Heading'
import { useFaded } from './hooks'
import { Col, PageContainer } from './layout'
import { Col, PageContainer, PageContainerProps } from './layout'
export type HowItWorksProps = {
heading?: ReactNode
subheading?: ReactNode
steps: StepProps[]
animate?: any
} & PageContainerProps
export type StepProps = {
heading?: ReactNode
subheading?: ReactNode
image?: ReactNode
animate?: any
}
export function HowItWorks({
heading,
@ -11,7 +24,7 @@ export function HowItWorks({
steps,
animate = undefined,
...rest
}) {
}: HowItWorksProps) {
const { Faded } = useFaded({ animate })
return (
<PageContainer py='120px' {...rest}>
@ -41,10 +54,10 @@ export function HowItWorks({
{steps.map((step, i) => (
<Step
key={i}
{...step}
animate={animate}
number={i + 1}
flip={i % 2 !== 0}
{...step}
/>
))}
</Stack>
@ -60,7 +73,7 @@ const Step = ({
flip = false,
animate = undefined,
...rest
}) => {
}: any) => {
const dir = flip ? 'row-reverse' : 'row'
const { Faded } = useFaded({ animate })
return (

+ 19
- 4
react-landing/src/NavBar.tsx View File

@ -1,10 +1,25 @@
import { Box, Button, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerOverlay, Stack, useDisclosure } from '@chakra-ui/core'
import React, { cloneElement } from 'react'
import {
Box,
Button,
Drawer,
DrawerBody,
DrawerCloseButton,
DrawerContent,
DrawerOverlay,
Stack,
useDisclosure,
} from '@chakra-ui/core'
import React, { cloneElement, ReactNode } from 'react'
import { FiMenu as Menu } from 'react-icons/fi'
import { useMyColorMode } from './hooks'
import { darkStyles, PageContainer, Row } from './layout'
import { darkStyles, PageContainer, Row, PageContainerProps } from './layout'
export const NavBar = ({ logo, navs, ...rest }) => {
export type NavBarProps = {
logo: ReactNode
navs?: ReactNode[]
} & PageContainerProps
export const NavBar = ({ logo, navs = [], ...rest }) => {
const { isOpen, onOpen, onClose } = useDisclosure()
const { colorMode } = useMyColorMode(rest)
return (

+ 3
- 4
react-landing/src/Pricing.tsx View File

@ -5,19 +5,18 @@ import { useMyColorMode } from './hooks'
import { darkStyles, PageContainer, PageContainerProps } from './layout'
import { useColor } from './support'
const featureLineMinH = '36px'
const featuresWidth = '370px'
const pricingHeaderMinH = '160px'
const pricingNamesMinH = '60px'
export interface PricingProps {
export type PricingProps = {
heading?: ReactNode
subheading?: ReactNode
animate?: boolean
features: string[]
prices: PriceColumnType[]
}
} & PageContainerProps
export interface PriceColumnType {
background?: string
@ -35,7 +34,7 @@ export function Pricing({
prices = [],
animate = undefined,
...rest
}: PageContainerProps & PricingProps) {
}: PricingProps) {
const belowPrice = '/ month'
const { colorMode } = useMyColorMode(rest)

+ 10
- 4
react-landing/src/TestimonialsLogos.tsx View File

@ -1,10 +1,16 @@
import { Stack } from '@chakra-ui/core'
import React from 'react'
import React, { ReactNode } from 'react'
import { Heading } from './Heading'
import { useFaded } from './hooks'
import { Col, PageContainer } from './layout'
import { Col, PageContainer, PageContainerProps } from './layout'
import { Subheading } from './Subheading'
export type TestimonialsLogosProps = {
heading?: ReactNode
subheading?: ReactNode
testimonials: ReactNode[]
animate?: any
} & PageContainerProps
export function TestimonialsLogos({
heading = '',
@ -12,10 +18,10 @@ export function TestimonialsLogos({
testimonials,
animate = undefined,
...rest
}) {
}: TestimonialsLogosProps) {
const { Faded } = useFaded({ animate })
return (
<PageContainer spacing='20px' py='20px' {...rest}>
<PageContainer spacing='20px' py='20px' {...rest}>
{(heading || subheading) && (
<Stack align='center' spacing='20px'>
<Heading as='h2'>{heading}</Heading>

+ 21
- 15
react-landing/src/TestimonialsTweets.tsx View File

@ -1,24 +1,18 @@
import { Box, Stack } from '@chakra-ui/core'
import styled from '@emotion/styled'
import React from 'react'
import React, { ReactNode } from 'react'
import { TwitterTweetEmbed } from 'react-twitter-embed'
import { Heading } from './Heading'
import { useFaded } from './hooks'
import { Col, PageContainer } from './layout'
import { Col, PageContainer, PageContainerProps } from './layout'
import { Subheading } from './Subheading'
const Unclickable = styled.div`
pointer-events: none;
`
function convertUrlToTweetId(url: string) {
if (url.startsWith('http')) {
const path = new URL(url).pathname
return path.split('/').reverse()[0]
}
return url
}
export type TestimonialsTweetsProps = {
heading?: ReactNode
subheading?: ReactNode
tweets: string[]
animate?: any
} & PageContainerProps
export function TestimonialsTweets({
heading = '',
@ -26,7 +20,7 @@ export function TestimonialsTweets({
tweets = [],
animate = undefined,
...rest
}) {
}: TestimonialsTweetsProps) {
tweets = tweets.map(convertUrlToTweetId)
const { Faded } = useFaded({ animate })
return (
@ -71,3 +65,15 @@ export function TestimonialsTweets({
</PageContainer>
)
}
const Unclickable = styled.div`
pointer-events: none;
`
function convertUrlToTweetId(url: string) {
if (url.startsWith('http')) {
const path = new URL(url).pathname
return path.split('/').reverse()[0]
}
return url
}

+ 9
- 3
react-landing/src/TopBanner.tsx View File

@ -1,9 +1,15 @@
import { Box, Stack, Text } from '@chakra-ui/core'
import React from 'react'
import React, { ReactNode } from 'react'
import { Bullet } from './Bullet'
import { PageContainer } from './layout'
import { PageContainer, PageContainerProps } from './layout'
export function TopBanner({ heading, cta, bullet, ...rest }) {
export type TopBannerProps = {
heading?: ReactNode
cta?: ReactNode
bullet?: ReactNode
} & PageContainerProps
export function TopBanner({ heading = '', cta = '', bullet = '', ...rest }) {
return (
<PageContainer py='10px' {...rest}>
<Stack

+ 22
- 19
react-landing/src/index.tsx View File

@ -1,27 +1,30 @@
// molecules
export { Hero } from './Hero'
export { Feature } from './Feature'
export { HowItWorks } from './HowItWorks'
export { FeaturesList } from './FeaturesList'
export { FeaturesGrid } from './FeaturesGrid'
export { NavBar } from './NavBar'
export { Footer } from './Footer'
export { SectionTitle } from './SectionTitle'
export { TestimonialsLogos } from './TestimonialsLogos'
export { Hero, HeroProps } from './Hero'
export { Feature, FeatureProps } from './Feature'
export { HowItWorks, HowItWorksProps } from './HowItWorks'
export { FeaturesList, FeaturesListProps } from './FeaturesList'
export { FeaturesGrid, FeaturesGridProps } from './FeaturesGrid'
export { NavBar, NavBarProps } from './NavBar'
export { Footer, FooterProps } from './Footer'
export { SectionTitle, SectionTitleProps } from './SectionTitle'
export { TestimonialsLogos, TestimonialsLogosProps } from './TestimonialsLogos'
export { LandingProvider } from './LandingProvider'
export { TopBanner } from './TopBanner'
export { Faqs } from './Faqs'
export { Banner } from './Banner'
export { Pricing } from './Pricing'
export { Countdown } from './Countdown'
export { TestimonialsTweets } from './TestimonialsTweets'
export { TopBanner, TopBannerProps } from './TopBanner'
export { Faqs, FaqsProps } from './Faqs'
export { Banner, BannerProps } from './Banner'
export { Pricing, PricingProps } from './Pricing'
export { Countdown, CountdownProps } from './Countdown'
export {
TestimonialsTweets,
TestimonialsTweetsProps,
} from './TestimonialsTweets'
// atoms
export { Heading } from './Heading'
export { EmailForm, MailchimpForm } from './EmailForm'
export { EmailForm, MailchimpForm, EmailFormProps } from './EmailForm'
export { Subheading } from './Subheading'
export { Button } from './Button'
export { GumroadButton } from './GumroadButton'
export { Bullet } from './Bullet'
export { Divider } from './Divider'
export { GumroadButton, GumroadButtonProps } from './GumroadButton'
export { Bullet, BulletProps } from './Bullet'
export { Divider, DividerProps } from './Divider'
export * from './layout'

Loading…
Cancel
Save