refactor(drinks): re-org layout, add some terms (#1197)

* refactor(drink): add some cool-data items

* refactor(sponsor): re-org into layout

* refactor(drink): move refresh callback to children

Author: mydearxym

src/containers/content/HaveADrinkContent/Body/Content.tsx

@@ -0,0 +1,26 @@
+import { FC, memo } from 'react'
+
+import Linker from '@/widgets/Linker'
+
+import type { TDrinkItem } from '../../spec'
+import { refreshDrink } from '../../logic'
+
+import { Wrapper, Image, Desc } from '../../styles/body/content/image_layout'
+
+type TProps = {
+  item: TDrinkItem
+}
+const ImageLayout: FC<TProps> = ({ item }) => {
+  const { reference, images, imageSize, text } = item
+  const imageSrc = images[0]
+
+  return (
+    <Wrapper>
+      <Image src={imageSrc} size={imageSize} onClick={() => refreshDrink()} />
+      {reference && <Linker src={reference} hint="参考" top={8} />}
+      <Desc onClick={() => refreshDrink()}>{text}</Desc>
+    </Wrapper>
+  )
+}
+
+export default memo(ImageLayout)

src/containers/content/HaveADrinkContent/Body/Content/ImageLayout.tsx

@@ -0,0 +1,34 @@
+import { FC, memo } from 'react'
+
+import Linker from '@/widgets/Linker'
+
+import type { TDrinkItem } from '../../spec'
+import { refreshDrink } from '../../logic'
+
+import {
+  Wrapper,
+  Desc,
+  NumWrapper,
+  Num,
+  Unit,
+} from '../../styles/body/content/number_layout'
+
+type TProps = {
+  item: TDrinkItem
+}
+const NumberLayout: FC<TProps> = ({ item }) => {
+  const { num, unit, text, reference } = item
+
+  return (
+    <Wrapper>
+      <NumWrapper onClick={() => refreshDrink()}>
+        <Num>{num}</Num>
+        <Unit>{unit}</Unit>
+      </NumWrapper>
+      <Desc onClick={() => refreshDrink()}>{text}</Desc>
+      {reference && <Linker src={reference} hint="参考" top={8} />}
+    </Wrapper>
+  )
+}
+
+export default memo(NumberLayout)

src/containers/content/HaveADrinkContent/Body/Content/NumberLayout.tsx

@@ -0,0 +1,25 @@
+import { FC, memo } from 'react'
+
+import Linker from '@/widgets/Linker'
+
+import type { TDrinkItem } from '../../spec'
+import { refreshDrink } from '../../logic'
+
+import { Wrapper, Title, Desc } from '../../styles/body/content/title_layout'
+
+type TProps = {
+  item: TDrinkItem
+}
+const TitleLayout: FC<TProps> = ({ item }) => {
+  const { title, text, reference } = item
+
+  return (
+    <Wrapper>
+      <Title onClick={() => refreshDrink()}>{title}</Title>
+      <Desc onClick={() => refreshDrink()}>{text}</Desc>
+      {reference && <Linker src={reference} hint="参考" top={8} />}
+    </Wrapper>
+  )
+}
+
+export default memo(TitleLayout)

src/containers/content/HaveADrinkContent/Body/Content/TitleLayout.tsx

@@ -0,0 +1,42 @@
+import { FC, memo } from 'react'
+
+import Linker from '@/widgets/Linker'
+
+import ImageLayout from './ImageLayout'
+import NumberLayout from './NumberLayout'
+import TitleLayout from './TitleLayout'
+
+import type { TDrinkItem } from '../../spec'
+import { refreshDrink } from '../../logic'
+
+import { Wrapper, TextWrapper } from '../../styles/body/content'
+
+type TProps = {
+  item: TDrinkItem
+}
+
+const Content: FC<TProps> = ({ item }) => {
+  const { title, num, images, text, reference } = item
+
+  if (num) {
+    return <NumberLayout item={item} />
+  }
+
+  if (images && images.length === 1) {
+    return <ImageLayout item={item} />
+  }
+
+  if (title) {
+    return <TitleLayout item={item} />
+  }
+
+  // default layout
+  return (
+    <Wrapper>
+      <TextWrapper onClick={() => refreshDrink()}>{text}</TextWrapper>
+      {reference && <Linker src={reference} hint="参考" top={8} />}
+    </Wrapper>
+  )
+}
+
+export default memo(Content)

src/containers/content/HaveADrinkContent/Body/Content/index.tsx

@@ -4,7 +4,7 @@
  *
  */
 
-import { FC, memo, useCallback } from 'react'
+import { FC, memo } from 'react'
 import { AnimateOnChange } from 'react-animation'
 
 import { buildLog } from '@/utils/logger'
@@ -19,7 +19,6 @@ import Publish from './Publish'
 import Content from './Content'
 
 import { Wrapper, SentenceWrapper, Sentence, Hint } from '../styles/body'
-import { refreshDrink } from '../logic'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:HaveADrinkContent')
@@ -74,7 +73,7 @@ const View: FC<TViewProps> = ({ view, category, drink, settingOptions }) => {
 
 const Body = (props) => {
   return (
-    <Wrapper onClick={() => refreshDrink()}>
+    <Wrapper>
       <View {...props} />
     </Wrapper>
   )

src/containers/content/HaveADrinkContent/Body/index.tsx

@@ -85,7 +85,31 @@ const demo = [
     upvoteAlias: '喜欢',
     entries: [
       {
-        text: '抱歉，该条目下还没有内容，欢迎任何形式的参与',
+        num: '755',
+        unit: '万',
+        reference:
+          'https://octoverse.github.com/#lets-look-back-at-the-code-and-communities-built-on-git-hub-this-year',
+        text: '根据 2021 Github Octoverse 公布的数据，全球共有 7300 万用户，其中中国开发者 755 万， 位居全球第二，仅次于美国的 1350 万。',
+      },
+      {
+        num: '217',
+        unit: '个',
+        reference: 'https://github.com/e3b0c442/keywords',
+        text: '据统计主流语言中关键字数目最多的是 Visual Basic，其包含 217 个语言关键字, 最少的是 Elixir, 数量为 15 个。',
+      },
+      {
+        num: '3500',
+        unit: '个',
+        reference:
+          'https://www.cnbc.com/2021/10/05/tesla-shares-higher-in-past-month-oppenheimer-charts-stock-moves.html?utm_term=Autofeed&utm_medium=Social&utm_content=Main&utm_source=Twitter#Echobox=1633454183',
+        text: '据 CNBC 采访报道，每辆特斯拉有 3500 个或更多芯片，而传统引擎有 1000 个芯片。',
+      },
+      {
+        num: '64.67',
+        unit: '%',
+        reference:
+          'https://gs.statcounter.com/browser-market-share#monthly-202106-202106-bar',
+        text: '截止 2021 年底，Google 的 Chrome 浏览器已占据超 6 成全球浏览器市场份额，苹果的 Safari(18.3%) 和 微软的 Edge(3.4%) 分列 2，3 位。',
       },
     ],
   },

src/containers/content/HaveADrinkContent/demo.ts

@@ -15,6 +15,8 @@ export type TDrinkItem = {
   reference?: string
   images?: string[]
   imageSize?: string
+  num?: number
+  unit?: string
 }
 
 export type TDrinkCategory = {

src/containers/content/HaveADrinkContent/spec.ts

@@ -5,23 +5,6 @@ import Img from '@/Img'
 import css from '@/utils/css'
 
 export const Wrapper = styled.div`
-  ${css.flexColumn('align-both')};
-`
-export const Title = styled.div`
-  margin-bottom: 25px;
-  margin-top: -10px;
-  font-weight: bold;
-`
-export const Desc = styled.div`
-  font-size: 18px;
-  opacity: 0.8;
-  padding: 0 10%;
-  margin-bottom: 10px;
-`
-
-export const TextWrapper = styled.div``
-
-export const ImageContentWrapper = styled(Wrapper)`
   ${css.flexColumn('align-both')}
   margin-top: -30px;
 `
@@ -30,6 +13,6 @@ export const Image = styled(Img)<{ size: string }>`
   object-fit: cover;
   border-radius: 8px;
 `
-export const Text = styled.div`
+export const Desc = styled.div`
   margin-top: 25px;
 `

src/containers/content/HaveADrinkContent/styles/body/content.ts renamed to src/containers/content/HaveADrinkContent/styles/body/content/image_layout.ts

@@ -0,0 +1,10 @@
+import styled from 'styled-components'
+
+// import { theme } from '@/utils/themes'
+import css from '@/utils/css'
+
+export const Wrapper = styled.div`
+  ${css.flexColumn('align-both')};
+`
+
+export const TextWrapper = styled.div``