Browse Source

react-landing/src: added more types

pull/3/head
remorses 1 year ago
parent
commit
08ad7c01fb
6 changed files with 109 additions and 44 deletions
  1. +11
    -2
      react-landing/src/Banner.tsx
  2. +26
    -25
      react-landing/src/Divider.tsx
  3. +23
    -5
      react-landing/src/Faqs.tsx
  4. +11
    -3
      react-landing/src/Feature.tsx
  5. +14
    -4
      react-landing/src/FeaturesGrid.tsx
  6. +24
    -5
      react-landing/src/FeaturesList.tsx

+ 11
- 2
react-landing/src/Banner.tsx View File

@ -1,10 +1,19 @@
import { Box, Stack } from '@chakra-ui/core'
import React, { ReactNode } from 'react'
import { Heading } from './Heading'
import { Col, PageContainer } from './layout'
import { Col, PageContainer, PageContainerProps } from './layout'
import { Subheading } from './Subheading'
import { removeUndefined } from './support'
export type BannerProps = {
heading?: ReactNode
subheading?: ReactNode
image?: ReactNode
cta?: ReactNode
flip?: boolean
fingerprint?: ReactNode
animate?: any
} & PageContainerProps
export function Banner({
heading = '',
@ -15,7 +24,7 @@ export function Banner({
fingerprint = '',
animate = undefined,
...props
}) {
}: BannerProps) {
const { bg = 'gray.100', background, backgroundColor, ...rest } = props
const bgs = removeUndefined({ bg, background, backgroundColor })
const direction = flip ? 'row-reverse' : 'row'

+ 26
- 25
react-landing/src/Divider.tsx View File

@ -1,33 +1,15 @@
import { useColorMode, Box, Stack } from '@chakra-ui/core'
import React from 'react'
import React, { ReactNode } from 'react'
import Color from 'color-js'
import { Text } from '@chakra-ui/core'
import { PageContainer } from './layout'
import { PageContainer, PageContainerProps } from './layout'
function Line(porps) {
const { colorMode } = useColorMode()
return (
<Box
bg={
{
light: Color('black')
.setAlpha(0.3)
.toCSS(),
dark: Color('white')
.setAlpha(0.3)
.toCSS(),
}[colorMode]
}
w='100%'
flex='1'
minH='1px'
maxH='1px'
{...porps}
/>
)
}
export type DividerProps = {
heading?: ReactNode
animate?: any
} & PageContainerProps
export const Divider = ({ heading = '', ...rest }) => {
export const Divider = ({ heading = '', ...rest }: DividerProps) => {
return (
<PageContainer {...rest}>
{heading ? (
@ -54,3 +36,22 @@ export const Divider = ({ heading = '', ...rest }) => {
</PageContainer>
)
}
function Line(porps) {
const { colorMode } = useColorMode()
return (
<Box
bg={
{
light: Color('black').setAlpha(0.3).toCSS(),
dark: Color('white').setAlpha(0.3).toCSS(),
}[colorMode]
}
w='100%'
flex='1'
minH='1px'
maxH='1px'
{...porps}
/>
)
}

+ 23
- 5
react-landing/src/Faqs.tsx View File

@ -1,9 +1,27 @@
import { Accordion, AccordionHeader, AccordionIcon, AccordionItem, AccordionPanel, Box, Heading, Stack } from '@chakra-ui/core'
import React from 'react'
import {
Accordion,
AccordionHeader,
AccordionIcon,
AccordionItem,
AccordionPanel,
Box,
Heading,
Stack,
} from '@chakra-ui/core'
import React, { ReactNode } from 'react'
import { useFaded } from './hooks'
import { PageContainer } from './layout'
import { PageContainer, PageContainerProps } from './layout'
import { Subheading } from './Subheading'
export type FaqsProps = {
heading?: ReactNode
subheading?: ReactNode
faqs: {
question: ReactNode
answer: ReactNode
}[]
animate?: any
} & PageContainerProps
export function Faqs({
heading = '',
@ -11,7 +29,7 @@ export function Faqs({
faqs,
animate = undefined,
...rest
}) {
}: FaqsProps) {
const { Faded } = useFaded({ animate })
return (
<PageContainer {...rest}>
@ -30,7 +48,7 @@ export function Faqs({
</Subheading>
<Accordion allowToggle minWidth='100%'>
{faqs.map((x) => (
<AccordionItem key={x.question} minWidth='100%'>
<AccordionItem key={x.question.toString()} minWidth='100%'>
<AccordionHeader minH='60px'>
<Box
fontSize='24px'

+ 11
- 3
react-landing/src/Feature.tsx View File

@ -1,10 +1,18 @@
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 FeatureProps = {
heading?: ReactNode
subheading?: ReactNode
image?: ReactNode
cta?: ReactNode
flip?: boolean
animate?: any
} & PageContainerProps
export function Feature({
heading,
@ -14,7 +22,7 @@ export function Feature({
animate = undefined,
direction = 'row',
...rest
}) {
}: FeatureProps) {
const dir: any = (direction) => (flip ? `${direction}-reverse` : direction)
const { Faded } = useFaded({ animate })
return (

+ 14
- 4
react-landing/src/FeaturesGrid.tsx View File

@ -1,11 +1,21 @@
import { SimpleGrid, 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'
import { Subheading } from './Subheading'
export type FeaturesGridProps = {
heading?: ReactNode
subheading?: ReactNode
centerText?: boolean
features: {
heading?: ReactNode
subheading?: ReactNode
icon?: ReactNode
}[]
animate?: any
} & PageContainerProps
export function FeaturesGrid({
heading = '',
@ -14,7 +24,7 @@ export function FeaturesGrid({
centerText = false,
animate = undefined,
...rest
}) {
}: FeaturesGridProps) {
const { Faded } = useFaded({ animate })
return (
<PageContainer spacing='40px' py='40px' {...rest}>

+ 24
- 5
react-landing/src/FeaturesList.tsx View File

@ -1,11 +1,24 @@
import { Stack, Text } from '@chakra-ui/core'
import React from 'react'
import { Stack, Text, StackProps } from '@chakra-ui/core'
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 FeaturesListProps = {
heading?: ReactNode
subheading?: ReactNode
centerText?: boolean
features: FeatureProps[]
animate?: any
} & PageContainerProps
type FeatureProps = {
heading?: ReactNode
subheading?: ReactNode
icon?: ReactNode
centerText?: boolean
} & StackProps
export function FeaturesList({
heading = '',
@ -14,7 +27,7 @@ export function FeaturesList({
centerText = false,
animate = undefined,
...rest
}) {
}: FeaturesListProps) {
const { Faded } = useFaded({ animate })
return (
<PageContainer {...rest}>
@ -57,7 +70,13 @@ export function FeaturesList({
)
}
const Feature = ({ heading, subheading, icon, centerText, ...rest }) => {
const Feature = ({
heading = '',
subheading = '',
icon = '',
centerText,
...rest
}: FeatureProps) => {
return (
<Stack
textAlign={centerText ? 'center' : 'left'}

Loading…
Cancel
Save