feat(about-thread): admin style avatar (#1292)

Author: mydearxym

src/containers/thread/AboutThread/Members/AdminMember.tsx

@@ -0,0 +1,37 @@
+import { FC, memo } from 'react'
+
+import type { TUser } from '@/spec'
+
+import {
+  Wrapper,
+  AvatarWrapper,
+  Avatar,
+  BadgeWrapper,
+  BadgeIcon,
+  Info,
+  Name,
+  Bio,
+} from '../styles/members/admin_member'
+
+type TProps = {
+  user: TUser
+}
+
+const AdminMember: FC<TProps> = ({ user }) => {
+  return (
+    <Wrapper>
+      <AvatarWrapper>
+        <Avatar src={user.avatar} />
+        <BadgeWrapper>
+          <BadgeIcon />
+        </BadgeWrapper>
+      </AvatarWrapper>
+      <Info>
+        <Name>{user.nickname}</Name>
+        <Bio>{user.bio}</Bio>
+      </Info>
+    </Wrapper>
+  )
+}
+
+export default memo(AdminMember)

src/containers/thread/AboutThread/Members.tsx renamed to src/containers/thread/AboutThread/Members/index.tsx

@@ -1,6 +1,7 @@
 import { FC, memo } from 'react'
 
 import { mockUsers } from '@/utils/mock'
+import AdminMember from './AdminMember'
 
 import {
   Wrapper,
@@ -10,12 +11,8 @@ import {
   Title,
   Row,
   Admin,
-  AdminInfo,
-  Name,
-  Bio,
-  AdminAvatar,
   NormalAvatar,
-} from './styles/members'
+} from '../styles/members'
 
 const Members: FC = () => {
   return (
@@ -24,15 +21,10 @@ const Members: FC = () => {
         <Header>
           <Title>团队成员</Title>
         </Header>
-
         <Row>
           {mockUsers(6).map((user) => (
             <Admin key={user.id}>
-              <AdminAvatar src={user.avatar} />
-              <AdminInfo>
-                <Name>{user.nickname}</Name>
-                <Bio>{user.bio}</Bio>
-              </AdminInfo>
+              <AdminMember user={user} />
             </Admin>
           ))}
         </Row>

src/containers/thread/AboutThread/styles/members/admin_member.ts

@@ -0,0 +1,45 @@
+import styled from 'styled-components'
+
+import css, { theme } from '@/utils/css'
+import Img from '@/Img'
+import AdminStarSVG from '@/icons/AdminStar'
+
+export const Wrapper = styled.div`
+  ${css.flex('align-start')};
+`
+export const AvatarWrapper = styled.div`
+  position: relative;
+`
+export const Avatar = styled(Img)`
+  ${css.circle(46)};
+  margin-right: 10px;
+  margin-bottom: 20px;
+  border: 2px solid;
+  border-color: ${theme('thread.articleTitle')};
+  padding: 2px;
+`
+export const BadgeWrapper = styled.div`
+  ${css.circle(14)};
+  ${css.flex('align-both')};
+  background: ${theme('thread.articleTitle')};
+  padding: 1px;
+  border: 2px solid white;
+  position: absolute;
+  right: 10px;
+  bottom: 18px;
+  z-index: 2;
+`
+export const Info = styled.div``
+export const Name = styled.div`
+  color: ${theme('thread.articleTitle')};
+  font-size: 14px;
+`
+export const Bio = styled.div`
+  color: ${theme('thread.articleDigest')};
+  font-size: 12px;
+  ${css.cutRest('100px')};
+`
+export const BadgeIcon = styled(AdminStarSVG)`
+  ${css.size(10)};
+  fill: white;
+`

src/containers/thread/AboutThread/styles/members.ts renamed to src/containers/thread/AboutThread/styles/members/index.ts

@@ -2,7 +2,8 @@ import styled from 'styled-components'
 
 import type { TTestable } from '@/spec'
 import css, { theme } from '@/utils/css'
-import Img from '@/Img'
+
+import { Avatar as AdminAvatar } from './admin_member'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   'data-test-id': testid,
@@ -59,22 +60,8 @@ export const Admin = styled.div`
   ${css.flex('align-start')};
   width: 33%;
 `
-export const AdminInfo = styled.div``
-export const Name = styled.div`
-  color: ${theme('thread.articleTitle')};
-  font-size: 14px;
-`
-export const Bio = styled.div`
-  color: ${theme('thread.articleDigest')};
-  font-size: 12px;
-  ${css.cutRest('100px')};
-`
-export const AdminAvatar = styled(Img)`
-  ${css.circle(46)};
-  margin-right: 10px;
-  margin-bottom: 20px;
-`
 export const NormalAvatar = styled(AdminAvatar)`
   ${css.circle(30)};
   margin-bottom: 10px;
+  border: none;
 `

src/widgets/Icons/AdminStar.tsx

@@ -0,0 +1,18 @@
+import { memo, SVGProps } from 'react'
+
+const AdminStar = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      className="icon"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width={200}
+      height={200}
+      {...props}
+    >
+      <path d="m908.1 353.1-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3-12.3 12.7-12.1 32.9.6 45.3l183.7 179.1-43.4 252.9c-1.2 6.9-.1 14.1 3.2 20.3 8.2 15.6 27.6 21.7 43.2 13.4L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z" />
+    </svg>
+  )
+}
+
+export default memo(AdminStar)