From f767da922406189e98878c647f3adcb54abd4fed Mon Sep 17 00:00:00 2001 From: mydearxym Date: Thu, 1 Apr 2021 16:29:22 +0800 Subject: [PATCH] refactor(home): CommunityRecommends use text instead of logo --- src/components/Cards/CommunityCard.tsx | 10 +-- .../PagedContents/CommunityRecommends.js | 56 ------------- .../PagedContents/CommunityRecommends.tsx | 78 +++++++++++++++++++ .../styles/community_recommends.ts | 15 ++-- src/spec/index.ts | 4 +- 5 files changed, 87 insertions(+), 76 deletions(-) delete mode 100755 src/components/PagedContents/CommunityRecommends.js create mode 100755 src/components/PagedContents/CommunityRecommends.tsx diff --git a/src/components/Cards/CommunityCard.tsx b/src/components/Cards/CommunityCard.tsx index 44ee7bae5..1bebcf957 100644 --- a/src/components/Cards/CommunityCard.tsx +++ b/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 = ({ diff --git a/src/components/PagedContents/CommunityRecommends.js b/src/components/PagedContents/CommunityRecommends.js deleted file mode 100755 index da7ac55e2..000000000 --- a/src/components/PagedContents/CommunityRecommends.js +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react' - -import Tooltip from '@/components/Tooltip' - -import { - Wrapper, - Title, - ListWrapper, - Community, - Logo, -} from './styles/community_recommends' - -const items = [ - { - id: '0', - title: 'elixir', - icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/elixir.png', - }, - { - id: '1', - title: 'javascript', - icon: - 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/javascript.png', - }, - { - id: '2', - title: 'ruby', - icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/ruby.png', - }, - { - id: '3', - title: 'clojure', - icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/clojure.png', - }, -] - -const CommunityRecommends = () => { - return ( - - 热门社区 - - {items.map((item) => ( - - -
- -
- - - ))} - - - ) -} - -export default React.memo(CommunityRecommends) diff --git a/src/components/PagedContents/CommunityRecommends.tsx b/src/components/PagedContents/CommunityRecommends.tsx new file mode 100755 index 000000000..d560db614 --- /dev/null +++ b/src/components/PagedContents/CommunityRecommends.tsx @@ -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 = ({ items = tmpItems }) => { + return ( + + 热门社区 + + {items.map((item) => ( + + {/* @ts-ignore */} + } placement="top"> + {item.title} + + + ))} + + + ) +} + +export default React.memo(CommunityRecommends) diff --git a/src/components/PagedContents/styles/community_recommends.ts b/src/components/PagedContents/styles/community_recommends.ts index a2ac4f825..9b021c9bd 100755 --- a/src/components/PagedContents/styles/community_recommends.ts +++ b/src/components/PagedContents/styles/community_recommends.ts @@ -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; ` diff --git a/src/spec/index.ts b/src/spec/index.ts index 20cfd5da5..f1191ced9 100644 --- a/src/spec/index.ts +++ b/src/spec/index.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 = {