From 0cdc499d146d7bdead7991dacc73051284066501 Mon Sep 17 00:00:00 2001 From: FT Date: Thu, 17 Jun 2021 18:08:28 +0800 Subject: [PATCH] [FEATURE] import component from lodestar-app-element --- config-overrides.js | 5 +- package.json | 3 +- src/components/page/AccordionSection.tsx | 25 +++++ src/components/page/CTASection.tsx | 74 +++++++++++++++ src/components/page/DescriptionSection.tsx | 52 ++++++++++ src/components/page/FAQSection.tsx | 53 +++++++++++ .../page/FeatureDescriptionSection.tsx | 46 +++++++++ src/components/page/FeatureSection.tsx | 94 ++++--------------- src/components/page/StatisticsSection.tsx | 53 +++-------- src/hooks/page.ts | 3 + src/pages/AppPage.tsx | 15 ++- 11 files changed, 306 insertions(+), 117 deletions(-) create mode 100644 src/components/page/AccordionSection.tsx create mode 100644 src/components/page/CTASection.tsx create mode 100644 src/components/page/DescriptionSection.tsx create mode 100644 src/components/page/FAQSection.tsx create mode 100644 src/components/page/FeatureDescriptionSection.tsx diff --git a/config-overrides.js b/config-overrides.js index fc359d330..5ca04b182 100644 --- a/config-overrides.js +++ b/config-overrides.js @@ -1,8 +1,11 @@ -const { override, fixBabelImports, addLessLoader } = require('customize-cra') +const { override, fixBabelImports, addLessLoader, removeModuleScopePlugin, babelInclude } = require('customize-cra') +const path = require('path') const rewireReactHotLoader = require('react-app-rewire-hot-loader') const defaultThemeVars = require('./src/theme.json') module.exports = override( + removeModuleScopePlugin(), + babelInclude([path.resolve('src'), path.resolve('node_modules/lodestar-app-element/src')]), fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', diff --git a/package.json b/package.json index 4b316bcf5..7edefb172 100644 --- a/package.json +++ b/package.json @@ -92,6 +92,7 @@ "libphonenumber-js": "^1.9.7", "lint-staged": "^10.2.11", "lodash": "^4.17.15", + "lodestar-app-element": "urfit-tech/lodestar-app-element.git#master", "moment-timezone": "^0.5.31", "mustache": "^4.0.1", "node-sass": "^4.14.1", @@ -145,4 +146,4 @@ "prettier --write" ] } -} +} \ No newline at end of file diff --git a/src/components/page/AccordionSection.tsx b/src/components/page/AccordionSection.tsx new file mode 100644 index 000000000..c8f8ba9c7 --- /dev/null +++ b/src/components/page/AccordionSection.tsx @@ -0,0 +1,25 @@ +import Accordion from 'lodestar-app-element/src/components/Accordion' +import React from 'react' +import { SectionTitle, StyledSection } from '../../pages/AppPage' + +const AccordionSection: React.FC<{ + options: { + title?: string + infos?: { + title: string + description: string + }[] + } +}> = ({ options: { title, infos = [] } }) => { + return ( + +
+ {title} + + +
+ + ) +} + +export default AccordionSection diff --git a/src/components/page/CTASection.tsx b/src/components/page/CTASection.tsx new file mode 100644 index 000000000..be9b04994 --- /dev/null +++ b/src/components/page/CTASection.tsx @@ -0,0 +1,74 @@ +import BackgroundSection from 'lodestar-app-element/src/components/BackgroundSection' +import Button from 'lodestar-app-element/src/components/Button' +import HeadingSnippet from 'lodestar-app-element/src/components/HeadingSnippet' +import React from 'react' +import { Link } from 'react-router-dom' +import styled, { css } from 'styled-components' + +const StyledContainer = styled.div<{ row: boolean }>` + display: flex; + flex-direction: column; + align-items: center; + + ${props => + props.row && + css` + @media (min-width: 768px) { + flex-direction: row; + justify-content: space-between; + } + `} +` + +const StyledDescription = styled.p<{ row: boolean }>` + font-family: NotoSansCJKtc; + font-size: 16px; + font-weight: 500; + line-height: 1.38; + color: #ffffff; + margin-top: 24px; + text-align: center; + + ${props => + props.row && + css` + @media (min-width: 768px) { + text-align: left; + } + `} +` + +const CTASection: React.FC<{ + options: { + mode?: 'light' | 'dark' + direction?: 'row' | 'column' + title?: string + description?: string + link?: { + text: string + path: string + } + backgroundUrl?: string + } +}> = ({ options: { mode, direction, title, description, link, backgroundUrl = null } }) => { + return ( + + + + {title && {title}} + {description && {description}} + + +
+ {link && ( + + + + )} +
+ + + ) +} + +export default CTASection diff --git a/src/components/page/DescriptionSection.tsx b/src/components/page/DescriptionSection.tsx new file mode 100644 index 000000000..fcbdcf368 --- /dev/null +++ b/src/components/page/DescriptionSection.tsx @@ -0,0 +1,52 @@ +import Article from 'lodestar-app-element/src/components/Article' +import React from 'react' +import styled from 'styled-components' +import { StyledSection } from '../../pages/AppPage' + +const StyledTitle = styled(Article.Title)` + font-family: NotoSansCJKtc; + font-size: 24px; + font-weight: bold; + letter-spacing: 0.2px; + color: var(--gray-darker); +` + +const StyledContent = styled(Article.Content)` + font-family: NotoSansCJKtc; + font-size: 16px; + font-weight: 500; + line-height: 1.69; + letter-spacing: 0.2px; + text-align: justify; + color: var(--gray-darker); +` + +const DescriptionSection: React.FC<{ + options: { + infos?: { + title: string + description: string + }[] + imgSrc: string + } +}> = ({ options: { infos, imgSrc } }) => { + return ( + +
+
+
+ {infos?.map(v => ( +
+ {v.title} + {v.description} +
+ ))} +
+ feature +
+
+ + ) +} + +export default DescriptionSection diff --git a/src/components/page/FAQSection.tsx b/src/components/page/FAQSection.tsx new file mode 100644 index 000000000..7d08e4cb0 --- /dev/null +++ b/src/components/page/FAQSection.tsx @@ -0,0 +1,53 @@ +import Article from 'lodestar-app-element/src/components/Article' +import React from 'react' +import styled from 'styled-components' +import { SectionTitle, StyledSection } from '../../pages/AppPage' + +const StyledContainer = styled.div` + margin: 0 auto; + padding: 0 20px; + + @media (min-width: 768px) { + max-width: 768px; + } +` + +const StyledBlock = styled.div` + column-count: 1; + + @media (min-width: 768px) { + column-count: 2; + column-gap: 2rem; + } +` + +const FAQSection: React.FC<{ + options: { + title?: string + infos?: { + title: string + description: string + }[] + } +}> = ({ options: { title, infos = [] } }) => { + return ( + + + {title} + + + {infos?.map(v => ( +
+ + {v.title} + + {v.description} +
+ ))} + + + + ) +} + +export default FAQSection diff --git a/src/components/page/FeatureDescriptionSection.tsx b/src/components/page/FeatureDescriptionSection.tsx new file mode 100644 index 000000000..68149375b --- /dev/null +++ b/src/components/page/FeatureDescriptionSection.tsx @@ -0,0 +1,46 @@ +import BackgroundSection from 'lodestar-app-element/src/components/BackgroundSection' +import Card from 'lodestar-app-element/src/components/Card' +import React from 'react' +import styled from 'styled-components' +import { SectionTitle } from '../../pages/AppPage' + +const StyledImage = styled.img` + width: 40px; + height: auto; +` + +const FeatureDescriptionSection: React.FC<{ + options: { + backgroundUrl?: string + title?: string + infos?: { + iconSrc: string + title: string + description: string + }[] + } +}> = ({ options: { backgroundUrl, title, infos = [] } }) => { + return ( + +
+ {title} + +
+ {infos.map(v => ( +
+ + + + {v.title} + + {v.description} + +
+ ))} +
+
+ + ) +} + +export default FeatureDescriptionSection diff --git a/src/components/page/FeatureSection.tsx b/src/components/page/FeatureSection.tsx index ece4bf174..8cbf2c23e 100644 --- a/src/components/page/FeatureSection.tsx +++ b/src/components/page/FeatureSection.tsx @@ -1,58 +1,12 @@ +import BackgroundSection from 'lodestar-app-element/src/components/BackgroundSection' +import Card from 'lodestar-app-element/src/components/Card' import React from 'react' -import styled, { css } from 'styled-components' -import { SectionTitle, StyledSection } from '../../pages/AppPage' +import styled from 'styled-components' +import { SectionTitle } from '../../pages/AppPage' -const StyleCardTitle = styled.h3<{ isDark: boolean }>` - font-family: NotoSansCJKtc; - font-size: 16px; - font-weight: bold; - letter-spacing: 0.2px; - color: ${props => (props.isDark ? 'white' : 'var(--gray-darker)')}; -` - -const StyledCard = styled.div<{ isDark: boolean }>` - padding: 32px; - border-radius: 4px; - box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); - width: 100%; - ${props => - props.isDark - ? css` - background-color: rgba(0, 0, 0, 0); - border: 1px solid white; - ` - : css` - background-color: #ffffff; - `} - transition: 0.3s; - &:hover { - transform: scale(1.1); - } - - @media (min-width: 768px) { - width: 48%; - } - - @media (min-width: 1080px) { - width: 30%; - } -` - -const StyledBriefCard = styled.div<{ isDark: boolean }>` - padding: 32px; - width: 100%; - transition: 0.3s; - &:hover { - transform: scale(1.1); - } - - @media (min-width: 768px) { - width: 22%; - } -` - -const StyledParagraph = styled.p` - font-weight: 500; +const StyledImage = styled.img` + width: 40px; + height: auto; ` const FeatureSection: React.FC<{ @@ -62,34 +16,26 @@ const FeatureSection: React.FC<{ infos?: { iconSrc: string title: string - description?: string }[] } -}> = ({ options: { backgroundUrl, title, infos = [] } }) => { +}> = ({ options: { backgroundUrl = null, title, infos = [] } }) => { return ( - +
{title} -
- {infos.map(v => - v.description ? ( - - - - {v.title} - - {v.description} - - ) : ( - - - {v.title} - - ), - )} + +
+ {infos.map(v => ( + + + + {v.title} + + + ))}
- + ) } diff --git a/src/components/page/StatisticsSection.tsx b/src/components/page/StatisticsSection.tsx index 5a95f8dd7..44188226a 100644 --- a/src/components/page/StatisticsSection.tsx +++ b/src/components/page/StatisticsSection.tsx @@ -1,22 +1,13 @@ +import BackgroundSection from 'lodestar-app-element/src/components/BackgroundSection' +import Stat from 'lodestar-app-element/src/components/Stat' import React from 'react' import styled from 'styled-components' -import { SectionTitle, StyledSection } from '../../pages/AppPage' +import { SectionTitle } from '../../pages/AppPage' const StyledImage = styled.img` width: 40px; ` -const StyledDigit = styled.div<{ isDark: boolean }>` - color: ${props => (props.isDark ? 'white' : props.theme['@primary-color'])}; - font-size: 40px; - line-height: 0.75; - letter-spacing: 1px; - - &::after { - content: '+'; - } -` - const StyledGrid = styled.div<{ colCount: number }>` display: grid; gap: 2.25rem; @@ -29,7 +20,7 @@ const StyledGrid = styled.div<{ colCount: number }>` const StatisticsSection: React.FC<{ options: { - backgroundUrl?: string + background?: string title?: string imgUrl?: string infos?: { @@ -38,14 +29,14 @@ const StatisticsSection: React.FC<{ description: string }[] } -}> = ({ options: { backgroundUrl, title, imgUrl, infos = [] } }) => { +}> = ({ options: { background = null, title, imgUrl, infos = [] } }) => { return ( - +
{imgUrl && (
- + feature
)} @@ -54,34 +45,20 @@ const StatisticsSection: React.FC<{ {infos.map(v => ( - + + + + {v.digit} + +

{v.description}

+ ))}
- + ) } -const StatisticsDigitBlock: React.FC<{ - isDark: boolean - iconSrc: string - digit: number - description: string -}> = ({ isDark, iconSrc, digit, description }) => ( -
- - - {digit} - -

{description}

-
-) - export default StatisticsSection diff --git a/src/hooks/page.ts b/src/hooks/page.ts index 20e01fd9e..058fa5a45 100644 --- a/src/hooks/page.ts +++ b/src/hooks/page.ts @@ -4,12 +4,15 @@ import { useApp } from '../containers/common/AppContext' import hasura from '../hasura' type SectionType = + | 'homeAccordion' | 'homeActivity' | 'homeCover' | 'homeCTA' | 'homeCreator' | 'homeDescription' + | 'homeFAQ' | 'homeFeature' + | 'homeFeatureDescription' | 'homeStatistics' | 'homePost' | 'homeProgram' diff --git a/src/pages/AppPage.tsx b/src/pages/AppPage.tsx index 1a339daa4..edea254b3 100644 --- a/src/pages/AppPage.tsx +++ b/src/pages/AppPage.tsx @@ -3,9 +3,14 @@ import { Link } from 'react-router-dom' import styled from 'styled-components' import MessengerChat from '../components/common/MessengerChat' import DefaultLayout from '../components/layout/DefaultLayout' +import AccordionSection from '../components/page/AccordionSection' import ActivitySection from '../components/page/ActivitySection' import CoverSection from '../components/page/CoverSection' import CreatorSection from '../components/page/CreatorSection' +import CTASection from '../components/page/CTASection' +import DescriptionSection from '../components/page/DescriptionSection' +import FAQSection from '../components/page/FAQSection' +import FeatureDescriptionSection from '../components/page/FeatureDescriptionSection' import FeatureSection from '../components/page/FeatureSection' import PostSection from '../components/page/PostSection' import ProgramSection from '../components/page/ProgramSection' @@ -28,17 +33,21 @@ export const StyledLink = styled(Link)<{ $backgroundActive?: string }>` } margin-top: 40px; ` -export const StyledSection = styled.section<{ isDark?: boolean; backgroundUrl?: string }>` - color: ${props => props.isDark && 'white'}; - background: ${props => (props.backgroundUrl ? `url(${props.backgroundUrl})` : 'white')}; +export const StyledSection = styled.section` padding: 64px 0; + background: white; ` const AppPage: React.VFC<{ page: AppPageProps }> = ({ page }) => { const sectionConverter = { + homeAccordion: AccordionSection, homeActivity: ActivitySection, homeCover: CoverSection, homeCreator: CreatorSection, + homeCTA: CTASection, + homeDescription: DescriptionSection, + homeFeatureDescription: FeatureDescriptionSection, + homeFAQ: FAQSection, homeFeature: FeatureSection, homePost: PostSection, homeProgram: ProgramSection,