refactor(home): CommunityRecommends use text instead of logo (#1038)

Author: mydearxym

src/components/Cards/CommunityCard.tsx

@@ -4,6 +4,7 @@
 
 import React from 'react'
 
+import type { TCommunity } from '@/spec'
 import { cutRest } from '@/utils'
 
 import {
@@ -17,14 +18,7 @@ import {
 } from './styles/community_card'
 
 type TProps = {
-  item: {
-    id: string
-    logo: string
-    title: string
-    raw: string
-    desc: string
-    subscribersCount: number
-  }
+  item: TCommunity
 }
 
 const CommunityCard: React.FC<TProps> = ({

src/components/PagedContents/CommunityRecommends.js

@@ -0,0 +1,78 @@
+import React from 'react'
+
+import type { TCommunity } from '@/spec'
+
+import Tooltip from '@/components/Tooltip'
+import CommunityCard from '@/components/Cards/CommunityCard'
+
+import {
+  Wrapper,
+  Title,
+  ListWrapper,
+  Community,
+  CommunityTitle,
+} from './styles/community_recommends'
+
+const tmpItems = [
+  {
+    id: '1',
+    title: 'elixir',
+    raw: 'elixir',
+    logo: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/elixir.png',
+    desc:
+      'maybe the most popular UI framework for web, maybe the most popular UI framework for web',
+    subscribersCount: 100,
+  },
+  {
+    id: '2',
+    title: 'javascript',
+    raw: 'javascript',
+    logo:
+      'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/javascript.png',
+    desc:
+      'maybe the most popular UI framework for web, maybe the most popular UI framework for web',
+    subscribersCount: 100,
+  },
+  {
+    id: '3',
+    title: 'ruby',
+    raw: 'ruby',
+    logo: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/ruby.png',
+    desc:
+      'maybe the most popular UI framework for web, maybe the most popular UI framework for web',
+    subscribersCount: 100,
+  },
+  {
+    id: '4',
+    title: 'clojure',
+    raw: 'clojure',
+    logo: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/clojure.png',
+    desc:
+      'maybe the most popular UI framework for web, maybe the most popular UI framework for web',
+    subscribersCount: 100,
+  },
+]
+
+type TProps = {
+  items?: TCommunity[]
+}
+
+const CommunityRecommends: React.FC<TProps> = ({ items = tmpItems }) => {
+  return (
+    <Wrapper>
+      <Title>热门社区</Title>
+      <ListWrapper>
+        {items.map((item) => (
+          <Community key={item.id}>
+            {/* @ts-ignore  */}
+            <Tooltip content={<CommunityCard item={item} />} placement="top">
+              <CommunityTitle>{item.title}</CommunityTitle>
+            </Tooltip>
+          </Community>
+        ))}
+      </ListWrapper>
+    </Wrapper>
+  )
+}
+
+export default React.memo(CommunityRecommends)

src/components/PagedContents/CommunityRecommends.tsx

@@ -1,6 +1,5 @@
 import styled from 'styled-components'
 
-import Img from '@/Img'
 import { css } from '@/utils'
 
 export const Wrapper = styled.div`
@@ -13,8 +12,8 @@ export const Wrapper = styled.div`
 `
 export const Title = styled.div`
   font-size: 13px;
-  margin-bottom: 4px;
-  opacity: 0;
+  margin-bottom: 6px;
+  opacity: 0.8;
 
   &:before {
     content: '- ';
@@ -40,7 +39,7 @@ export const ListWrapper = styled.div`
 `
 export const Community = styled.div`
   margin-right: 10px;
-  opacity: 0.7;
+  opacity: 0.9;
 
   &:hover {
     cursor: pointer;
@@ -56,10 +55,6 @@ export const Community = styled.div`
     margin-right: 12px;
   `}
 `
-export const Logo = styled(Img)`
-  ${css.size(18)};
-
-  ${css.media.mobile`
-    ${css.size(16)};
-  `}
+export const CommunityTitle = styled.span`
+  font-size: 14px;
 `

src/components/PagedContents/styles/community_recommends.ts

@@ -57,8 +57,8 @@ export type TCommunity = {
   title: string
   logo?: string
   raw: string
-  color?: string
-  index?: number
+  subscribersCount?: number
+  desc?: string
 }
 
 export type TPagedCommunities = {