Browse Source

making it

pull/1/head
remorses 1 year ago
parent
commit
1d82997974
13 changed files with 156 additions and 20 deletions
  1. +5
    -1
      core/package.json
  2. +17
    -0
      core/src/Button.tsx
  3. +7
    -0
      core/src/Heading.tsx
  4. +22
    -11
      core/src/Hero/index.tsx
  5. +9
    -0
      core/src/SubHeading.tsx
  6. +0
    -1
      core/src/index.ts
  7. +36
    -0
      core/src/index.tsx
  8. +17
    -0
      core/src/layout.tsx
  9. +1
    -1
      demos/next.config.js
  10. +18
    -5
      demos/pages/index.tsx
  11. BIN
      demos/public/code.png
  12. +4
    -1
      package.json
  13. +20
    -0
      yarn.lock

+ 5
- 1
core/package.json View File

@ -39,6 +39,10 @@
"@chakra-ui/core": "^0.6.1",
"@emotion/core": "^10.0.28",
"@emotion/styled": "^10.0.27",
"emotion-theming": "^10.0.27"
"@types/tinycolor2": "^1.4.2",
"color-js": "^1.0.5",
"emotion-theming": "^10.0.27",
"lodash.get": "^4.4.2",
"tinycolor2": "^1.4.1"
}
}

+ 17
- 0
core/src/Button.tsx View File

@ -0,0 +1,17 @@
import React, { FC } from 'react'
import { Button as B, HeadingProps, ButtonProps } from '@chakra-ui/core'
import { Children } from 'react'
import get from 'lodash.get'
import Color from 'color-js'
import { useTheme } from 'emotion-theming'
export const Button: FC<ButtonProps> = (props) => {
let { bg = 'gray' } = props
const theme = useTheme() as any
console.log(theme)
bg = get(theme.colors, bg)
const isDark = Color(bg as any).getLightness() < 0.5
const color = isDark ? 'white' : 'black'
console.log('bg', bg)
return <B color={color} _hover={{ bg: color, color: bg as string }} {...props} />
}

+ 7
- 0
core/src/Heading.tsx View File

@ -0,0 +1,7 @@
import React, { FC } from 'react'
import { Heading as H, HeadingProps } from '@chakra-ui/core'
import { Children } from 'react'
export const Heading: FC<HeadingProps> = (props) => {
return <H m={0} fontWeight='medium' {...props} />
}

+ 22
- 11
core/src/Hero/index.tsx View File

@ -1,12 +1,19 @@
import React from 'react'
import { Image, Flex, Box } from '@chakra-ui/core'
import { Image, Flex, Box, Stack } from '@chakra-ui/core'
import { SubHeading } from '../SubHeading'
import { Heading } from '../Heading'
import { Button } from '../Button'
import { Col, Row, Spacer } from '../layout'
export const Hero = ({
bg = 'white',
heading,
subhead,
cta,
image,
backgroundImage = null,
bgOpacity = 1,
style = {},
children = [],
...props
}) => (
<Box display='relative'>
@ -37,14 +44,18 @@ export const Hero = ({
bg={bg}
style={{ opacity: backgroundImage ? bgOpacity : 1, height: '100%' }}
/>
<Flex
style={{
minHeight: '100vh',
...style,
}}
{...props}
>
{children}
</Flex>
<Row {...props}>
<Stack spacing={4} flex='1'>
<Heading fontSize='46px'>{heading}</Heading>
<SubHeading fontSize='22px'>{subhead}</SubHeading>
<Col align={['center', 'center', 'flex-start']}>
<Button bg='primary' d='block' width='auto'>
{cta}
</Button>
</Col>
</Stack>
<Spacer y={40} />
<Col flex='1'>{image}</Col>
</Row>
</Box>
)

+ 9
- 0
core/src/SubHeading.tsx View File

@ -0,0 +1,9 @@
import React, { FC } from 'react'
import { Heading as H, HeadingProps } from '@chakra-ui/core'
import { Children } from 'react'
export const SubHeading: FC<HeadingProps> = (props) => {
return (
<H m={0} opacity={0.6} fontWeight='normal' fontSize='24px' {...props} />
)
}

+ 0
- 1
core/src/index.ts View File

@ -1 +0,0 @@
export { Hero } from './Hero'

+ 36
- 0
core/src/index.tsx View File

@ -0,0 +1,36 @@
import React from 'react'
export { Hero } from './Hero'
export { Heading } from './Heading'
export { SubHeading } from './SubHeading'
export * from './layout'
import {
ThemeProvider,
theme as defaultTheme,
DefaultTheme,
Stack,
} from '@chakra-ui/core'
import { useTheme } from 'emotion-theming'
export const LandingProvider = ({ children }) => {
const existingTheme = useTheme()
if (existingTheme && Object.keys(existingTheme).length) {
console.log(existingTheme)
return children
}
const theme: DefaultTheme = {
...defaultTheme,
colors: {
...defaultTheme.colors,
primary: 'purple',
} as any,
fonts: {
...defaultTheme.fonts,
body: 'Roboto',
},
}
return (
<ThemeProvider theme={theme}>
<Stack spacing={8}>{children}</Stack>
</ThemeProvider>
)
}

+ 17
- 0
core/src/layout.tsx View File

@ -0,0 +1,17 @@
import { Flex, FlexProps, Box } from '@chakra-ui/core'
import React, { FC } from 'react'
export const Col: FC<FlexProps> = (props) => {
return <Flex flexDir='column' {...props} />
}
export const Row: FC<FlexProps> = (props) => {
return <Flex flexDir='row' {...props} />
}
export const Spacer = ({ x = 0, y = 0 }) => {
return <Box mt={y + 'px'} ml={y + 'px'} />
}
export {Divider} from '@chakra-ui/core'

+ 1
- 1
demos/next.config.js View File

@ -1,5 +1,5 @@
const path = require('path')
const withTM = require('next-transpile-modules')(['src']) // pass the modules you would like to see transpiled
const withTM = require('next-transpile-modules')(['react-landing']) // pass the modules you would like to see transpiled
module.exports = withTM({
webpack: (config) => {

+ 18
- 5
demos/pages/index.tsx View File

@ -1,12 +1,25 @@
import React from 'react'
import Head from 'next/head'
import { Hero } from 'react-landing/src'
import {
Hero,
Heading,
LandingProvider,
SubHeading,
Divider,
Col,
} from 'react-landing/src'
const Page = () => (
<div>
<Hero />
</div>
<LandingProvider>
<Hero
heading='Make your website editable for the whole team'
subhead='Choose your technology. Use the API to fetch content. Empower
your content team.'
image={<img src='/code.png' />}
cta='Test it out'
/>
<Divider w='100%' />
</LandingProvider>
)
export default Page

BIN
demos/public/code.png View File

Before After
Width: 596  |  Height: 556  |  Size: 54 KiB

+ 4
- 1
package.json View File

@ -3,5 +3,8 @@
"workspaces": [
"core",
"demos"
]
],
"scripts": {
"example": "cd demos && yarn dev"
}
}

+ 20
- 0
yarn.lock View File

@ -1225,6 +1225,11 @@
dependencies:
csstype "^2.6.4"
"@types/tinycolor2@^1.4.2":
version "1.4.2"
resolved "https://registry.yarnpkg.com/@types/tinycolor2/-/tinycolor2-1.4.2.tgz#721ca5c5d1a2988b4a886e35c2ffc5735b6afbdf"
integrity sha512-PeHg/AtdW6aaIO2a+98Xj7rWY4KC1E6yOy7AFknJQ7VXUGNrMlyxDFxJo7HqLtjQms/ZhhQX52mLVW/EX3JGOw==
"@use-it/event-listener@^0.1.2":
version "0.1.3"
resolved "https://registry.yarnpkg.com/@use-it/event-listener/-/event-listener-0.1.3.tgz#a9920b2819d211cf55e68e830997546eec6886d3"
@ -2176,6 +2181,11 @@ color-convert@^1.9.0, color-convert@^1.9.1:
dependencies:
color-name "1.1.3"
color-js@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/color-js/-/color-js-1.0.5.tgz#698cb41fb51d7fd745b16f9e0c939933a8c7abea"
integrity sha512-KgOTVz7fupb3lOXu4lixP6BR2CdMaTtCnGmLfHZWhq8NU3MABd6U9KjWtJVuYChGS/gIaoA8LakKKQfWhQgwYQ==
color-name@1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
@ -3994,6 +4004,11 @@ lodash.curry@4.1.1:
resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170"
integrity sha1-JI42By7ekGUB11lmIAqG2riyMXA=
lodash.get@^4.4.2:
version "4.4.2"
resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
lodash.includes@^4.3.0:
version "4.3.0"
resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f"
@ -6409,6 +6424,11 @@ timers-browserify@^2.0.4:
dependencies:
setimmediate "^1.0.4"
tinycolor2@^1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
to-arraybuffer@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"

Loading…
Cancel
Save