refactor(home): promotion redesign

src/components/PromotionList/Spotlight.tsx

@@ -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)

src/components/PromotionList/WaitList.tsx

@@ -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/fakeItems.ts

@@ -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/index.tsx

@@ -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/spec.ts

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

src/components/PromotionList/styles/index.ts

@@ -5,30 +5,25 @@ import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div`
   margin-left: 20px;
-  margin-top: 40px;
+  margin-top: 30px;
   min-height: 150px;
   max-width: 180px;
 `
 export const Header = styled.div`
   ${css.flex('justify-between', 'align-center')};
+  padding-top: 20px;
   margin-bottom: 12px;
+  border-top: 1px solid;
+  border-top-color: ${theme('thread.articleSpliter')};
+  width: 80%;
 `
 export const Title = styled.div`
+  font-size: 12px;
   color: ${theme('thread.articleDigest')};
-  border-top: 1px solid;
-  border-top-color: ${theme('thread.articleSpliter')};
   padding-top: 15px;
-  width: 80px;
-
-  ${Wrapper}:hover & {
-    width: 100%;
-  }
-
-  transition: width 0.3s;
-  transition-delay: 0.2s;
 `
 export const AboutIcon = styled(Img)`
-  ${css.size(14)};
+  ${css.size(15)};
   fill: ${theme('thread.articleDigest')};
   opacity: 0;
   margin-top: 16px;
@@ -41,6 +36,5 @@ export const AboutIcon = styled(Img)`
   ${Wrapper}:hover & {
     opacity: 1;
   }
-  transition: all 0.2s;
-  transition-delay: 0.2s;
+  transition: all 0.25s;
 `