feat(campaign): show featured label

thematters · Oct 24, 2024 · b9fab6d · b9fab6d
1 parent 8d70616
commit b9fab6d
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 9 deletions.
diff --git a/public/static/icons/24px/star.svg b/public/static/icons/24px/star.svg
diff --git a/src/common/styles/variables/colors.css b/src/common/styles/variables/colors.css
@@ -41,6 +41,7 @@
   --color-free-write-green-text: #398449;
   --color-free-write-green-bg: #d9f8dd;
   --color-free-write-green-bg-hover: #bdf4c4;
+  --color-free-write-green-label: #94d09c;
 
   /* others */
   --color-noir: #000;

diff --git a/src/components/TextIcon/index.tsx b/src/components/TextIcon/index.tsx
@@ -17,6 +17,7 @@ type TextIconColor =
   | 'likecoinGreen'
   | 'yellowLighter'
   | 'freeWriteBlue'
+  | 'freeWriteGreenLabel'
 
 export interface TextIconProps {
   // icon

diff --git a/src/components/TextIcon/styles.module.css b/src/components/TextIcon/styles.module.css
@@ -113,6 +113,10 @@
   color: var(--color-free-write-blue);
 }
 
+.freeWriteGreenLabel {
+  color: var(--color-free-write-green-label);
+}
+
 .yellowLighter {
   color: var(--color-yellow-lighter);
 }

diff --git a/src/views/CampaignDetail/ArticleFeeds/MainFeed/gql.ts b/src/views/CampaignDetail/ArticleFeeds/MainFeed/gql.ts
@@ -20,6 +20,7 @@ export const CAMPAIGN_ARTICLES_PUBLIC = gql`
           }
           edges {
             cursor
+            featured
             node {
               id
               campaigns {

diff --git a/src/views/CampaignDetail/ArticleFeeds/MainFeed/index.tsx b/src/views/CampaignDetail/ArticleFeeds/MainFeed/index.tsx
@@ -3,6 +3,7 @@ import React, { useContext, useEffect, useRef } from 'react'
 import { FormattedMessage } from 'react-intl'
 
 import { ReactComponent as IconRead } from '@/public/static/icons/24px/read.svg'
+import { ReactComponent as IconStar } from '@/public/static/icons/24px/star.svg'
 import { analytics, mergeConnections } from '~/common/utils'
 import {
   ArticleDigestFeed,
@@ -13,6 +14,7 @@ import {
   List,
   QueryError,
   SpinnerBlock,
+  TextIcon,
   usePublicQuery,
   useRoute,
   ViewerContext,
@@ -205,20 +207,42 @@ const MainFeed = ({ feedType, camapign }: MainFeedProps) => {
   return (
     <InfiniteScroll hasNextPage={pageInfo.hasNextPage} loadMore={loadMore} eof>
       <List>
-        {edges.map(({ node }, i) => (
+        {edges.map(({ node, featured }, i) => (
           <List.Item key={`${feedType}:${i}`}>
             <ArticleDigestFeed
               article={node}
               label={
                 isAll && (
-                  <span
-                    className={[
-                      styles.articleLabel,
-                      getArticleStage(node)?.id ? '' : styles.announcement,
-                    ].join(' ')}
-                  >
-                    {getArticleStageName(node, lang)}
-                  </span>
+                  <>
+                    <span
+                      className={[
+                        styles.articleLabel,
+                        getArticleStage(node)?.id ? '' : styles.announcement,
+                      ].join(' ')}
+                    >
+                      {getArticleStageName(node, lang)}
+                    </span>
+
+                    {featured && (
+                      <TextIcon
+                        icon={
+                          <Icon
+                            icon={IconStar}
+                            size={12}
+                            style={{ opacity: 0.5 }}
+                          />
+                        }
+                        spacing={2}
+                        color="freeWriteGreenLabel"
+                        size={12}
+                      >
+                        <FormattedMessage
+                          defaultMessage="Featured"
+                          id="CnPG8j"
+                        />
+                      </TextIcon>
+                    )}
+                  </>
                 )
               }
               onClick={() => {
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,6 +20,7 @@ export const CAMPAIGN_ARTICLES_PUBLIC = gql` @@
               }
               edges {
                 cursor
+                featured
                 node {
                   id
                   campaigns {
@@ Expand Down @@