feat: add category tag for article list

Author: fecommunity

client/pages/article/index.module.scss

@@ -11,6 +11,7 @@
       display: inline-block;
       width: 100%;
       height: auto;
+      max-height: 480px;
       border-radius: var(--border-radius);
     }
   }

client/src/components/ArticleCarousel/index.module.scss

@@ -11,7 +11,7 @@
     position: relative;
     display: flex;
     width: 100%;
-    height: 380px;
+    height: 460px;
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
@@ -54,7 +54,7 @@
 
   @media (max-width: 768px) {
     .articleItem {
-      height: 170px;
+      height: 180px;
     }
   }
 }

client/src/components/ArticleList/index.module.scss

@@ -22,6 +22,14 @@
   &:hover {
     img {
       transform: scale(1.1);
+      transition: all .2s ease-in;
+    }
+  }
+
+  .antBadge {
+    margin-left: 4px;
+    > * {
+      margin-left: 4px;
     }
   }
 
@@ -106,7 +114,7 @@
 
     .time,
     .category {
-      color: #8590a6;
+      color: #fff;
     }
   }
 

client/src/components/ArticleList/index.tsx

@@ -1,13 +1,15 @@
-import { EyeOutlined, HeartOutlined, HistoryOutlined } from '@ant-design/icons';
-import { Divider } from 'antd';
+import { EyeOutlined, FolderOutlined, HeartOutlined, HistoryOutlined } from '@ant-design/icons';
+import { Spin, Tag } from 'antd';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
-import React from 'react';
+import React, { useContext } from 'react';
 import LazyLoad from 'react-lazyload';
 import LogoSvg from '../../assets/LogoSvg';
 
 import { LocaleTime } from '@/components/LocaleTime';
 
+import { GlobalContext } from '@/context/global';
+import { getColorFromNumber } from '@/utils';
 import style from './index.module.scss';
 
 interface IProps {
@@ -18,16 +20,18 @@ interface IProps {
 
 export const ArticleList: React.FC<IProps> = ({ articles = [] }) => {
   const t = useTranslations();
+  const { categories } = useContext(GlobalContext);
 
   return (
     <div className={style.wrapper}>
       {articles && articles.length ? (
-        articles.map((article) => {
+        articles.map((article: IArticle) => {
+          const categoryIndex = categories?.findIndex((category) => category?.value === article?.category?.value);
           return (
             <div key={article.id} className={style.articleItem}>
               <div className={style.coverWrapper}>
                 {article.cover ? (
-                  <LazyLoad height={120}>
+                  <LazyLoad height={120} placeholder={<Spin />}>
                     <div className={style.coverWrapper}>
                       <Link href={`/article/[id]`} as={`/article/${article.id}`} scroll={false}>
                         <img src={article.cover} alt="cover" />
@@ -44,11 +48,11 @@ export const ArticleList: React.FC<IProps> = ({ articles = [] }) => {
                     <header>
                       <div className={style.title}>{article.title}</div>
                       <div className={style.info}>
-                        {article.category && (
-                          <>
-                            <Divider type="vertical" />
+                        {article.category && categoryIndex >= 0 && (
+                          <Tag className={style.antBadge} color={getColorFromNumber(categoryIndex)}>
+                            <FolderOutlined />
                             <span className={style.category}>{article.category?.label}</span>
-                          </>
+                          </Tag>
                         )}
                       </div>
                     </header>

client/src/components/Header/index.module.scss

@@ -138,6 +138,7 @@ $height: 64px;
     background: transparent;
     border: none;
     width: fit-content;
+    display: flex;
   }
 
   nav {

client/src/components/KnowledgeList/index.tsx

@@ -1,8 +1,8 @@
-import { EyeOutlined, ShareAltOutlined } from '@ant-design/icons';
-import { Divider } from 'antd';
+import { EyeOutlined } from '@ant-design/icons';
+import { Divider, Spin } from 'antd';
 import cls from 'classnames';
-import Link from 'next/link';
 import { useTranslations } from 'next-intl';
+import Link from 'next/link';
 import React from 'react';
 import LazyLoad from 'react-lazyload';
 
@@ -46,7 +46,7 @@ export const KnowledgeList: React.FC<IProps> = ({ knowledges = [], small = false
                     </div>
 
                     {knowledge.cover && (
-                      <LazyLoad height={120}>
+                      <LazyLoad height={120} placeholder={<Spin />}>
                         <div className={style.coverWrapper}>
                           <img src={knowledge.cover} alt="cover" />
                         </div>

client/src/components/Tags/index.tsx

@@ -1,22 +1,12 @@
 import { Tag } from 'antd';
-import cls from 'classnames';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
 import { useTranslations } from 'next-intl';
-import React from 'react';
+import Link from 'next/link';
 
+import { getColorFromNumber } from '@/utils';
 import style from './index.module.scss';
 
 export const Tags = ({ tags = [], needTitle = true, style: cssStyle = {} }) => {
-  const router = useRouter();
   const t = useTranslations();
-  const { tag: routerTag } = router.query;
-
-  function getColorFromNumber(num) {
-    const colors = ['#dc3545', '#17a2b8', '#00b74a', '#fc651f', '#6c757d', '#f5c800', '#808695'];
-    const index = num % colors.length;
-    return colors[index];
-  }
 
   return (
     <div className={style.wrapper} style={cssStyle}>

client/src/utils/index.tsx

@@ -146,3 +146,11 @@ export const scrollToBottom = (el: HTMLElement) => {
 
   el.scrollTo(0, currentScrollTop + (scrollHeight - currentScrollTop - clientHeight));
 };
+
+
+
+export function getColorFromNumber(num) {
+  const colors = ['#dc3545', '#17a2b8', '#00b74a', '#fc651f', '#6c757d', '#f5c800', '#808695'];
+  const index = num % colors.length;
+  return colors[index];
+}