refactor(home): promotion redesign (#1047)

* refactor(PromotionList): UI redesign

* refactor(PromotionList): UX redesign

Author: mydearxym

public/icons/static/shape/about.svg

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import type { TItem } from './spec'
+import {
+  Wrapper,
+  ItemWrapper,
+  Header,
+  Logo,
+  Title,
+  Desc,
+} from './styles/spotlight'
+
+type TProps = {
+  item: TItem
+}
+
+const Spotlight: React.FC<TProps> = ({ item }) => (
+  <Wrapper>
+    <ItemWrapper>
+      <Header>
+        <Title>{item.title}</Title>
+        <Logo src={item.cover} />
+      </Header>
+      <Desc>{item.desc}</Desc>
+    </ItemWrapper>
+  </Wrapper>
+)
+
+export default React.memo(Spotlight)

public/icons/static/shape/question.svg

@@ -0,0 +1,28 @@
+import React from 'react'
+
+import type { TItem } from './spec'
+import { Wrapper, Item } from './styles/wait_list'
+
+type TProps = {
+  items: TItem[]
+  activeId: string
+  setActiveId: (id: string) => void
+}
+
+const WaitList: React.FC<TProps> = ({ items, activeId, setActiveId }) => {
+  return (
+    <Wrapper>
+      {items.map((item) => (
+        <Item
+          key={item.id}
+          active={item.id === activeId}
+          onClick={() => setActiveId(item.id)}
+        >
+          {item.title}
+        </Item>
+      ))}
+    </Wrapper>
+  )
+}
+
+export default React.memo(WaitList)

src/components/PromotionList/Holder.js

@@ -0,0 +1,34 @@
+import { ICON_CMD } from '@/config'
+
+const items = [
+  {
+    id: '1',
+    title: 'xaudiopro',
+    link: 'https://xxxx',
+    desc: '音频剪辑，格式转换, 音频剪辑，格式转换 音频剪辑',
+    cover: `${ICON_CMD}/test_ad.jpg`,
+  },
+  {
+    id: '2',
+    title: 'github',
+    link: 'https://xxxx',
+    desc: 'github 就不用多介绍了吧',
+    cover: `${ICON_CMD}/test_ad.jpg`,
+  },
+  {
+    id: '3',
+    title: 'xxoo',
+    link: 'https://xxxx',
+    desc: 'xxx 就不用多介绍了吧',
+    cover: `${ICON_CMD}/test_ad.jpg`,
+  },
+  {
+    id: '4',
+    title: 'xxoo2',
+    link: 'https://xxxx',
+    desc: 'xxx2 就不用多介绍了吧',
+    cover: `${ICON_CMD}/test_ad.jpg`,
+  },
+]
+
+export default items

src/components/PromotionList/PartnerBanner.js

@@ -0,0 +1,76 @@
+/*
+ *
+ * PromotionList
+ *
+ */
+
+import React, { useState, useRef } from 'react'
+import { findIndex } from 'ramda'
+
+import { ICON } from '@/config'
+import { buildLog } from '@/utils'
+import { useInterval } from '@/hooks'
+
+import useHoverDirty from 'react-use/lib/useHoverDirty'
+
+import type { TItem } from './spec'
+import Spotlight from './Spotlight'
+import WaitList from './WaitList'
+
+import { Wrapper, Header, Title, AboutIcon } from './styles'
+import fakeItems from './fakeItems'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:PromotionList:index')
+
+type TProps = {
+  show?: boolean
+  onAbout?: () => void
+  items: TItem[]
+  intervalSec?: number
+}
+
+const PromotionList: React.FC<TProps> = ({
+  show = true,
+  onAbout = log,
+  items = fakeItems,
+  intervalSec = 5000,
+}) => {
+  const [activeId, setActiveId] = useState<string>(items[0].id)
+  const activeItemIndex = findIndex((item) => item.id === activeId, items)
+  const activeItem = items[activeItemIndex]
+
+  const ref = useRef(null)
+
+  const isHovering = useHoverDirty(ref)
+
+  useInterval(() => {
+    if (isHovering) return
+    const nextIndex =
+      activeItemIndex < items.length - 1 ? activeItemIndex + 1 : 0
+    setActiveId(items[nextIndex].id)
+  }, intervalSec)
+
+  return (
+    <Wrapper ref={ref}>
+      {show && (
+        <>
+          <Header>
+            <Title>产品推广</Title>
+            <div onClick={onAbout}>
+              <AboutIcon src={`${ICON}/shape/question.svg`} />
+            </div>
+          </Header>
+          <Spotlight item={activeItem} />
+          <WaitList
+            items={items}
+            activeId={activeId}
+            setActiveId={setActiveId}
+          />
+        </>
+      )}
+    </Wrapper>
+  )
+}
+
+export default React.memo(PromotionList)

src/components/PromotionList/Spotlight.tsx

@@ -0,0 +1,7 @@
+export type TItem = {
+  id: string
+  title: string
+  link: string
+  desc: string
+  cover?: string
+}