(incubator-answer) branch feat/1.4.0/personal updated: fix: personal add recent bages ui

[sh...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

shuai pushed a commit to branch feat/1.4.0/personal
in repository https://gitbox.apache.org/repos/asf/incubator-answer.git


The following commit(s) were added to refs/heads/feat/1.4.0/personal by this push:
     new cd079cf5 fix: personal add recent bages ui
cd079cf5 is described below

commit cd079cf52eee75274995092e640d7eb20cb33c83
Author: shuai <li...@sifou.com>
AuthorDate: Tue Aug 6 10:50:58 2024 +0800

    fix: personal add recent bages ui
---
 i18n/en_US.yaml                                           |  1 +
 ui/src/components/CardBadge/index.tsx                     | 11 +++++++----
 ui/src/pages/Users/Personal/components/Overview/index.tsx | 12 +++++++++++-
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/i18n/en_US.yaml b/i18n/en_US.yaml
index 53b47fce..f71ac337 100644
--- a/i18n/en_US.yaml
+++ b/i18n/en_US.yaml
@@ -1334,6 +1334,7 @@ ui:
     x_votes: votes received
     x_answers: answers
     x_questions: questions
+    recent_badges: Recent Badges
   install:
     title: Installation
     next: Next
diff --git a/ui/src/components/CardBadge/index.tsx b/ui/src/components/CardBadge/index.tsx
index b8dde502..9251b38c 100644
--- a/ui/src/components/CardBadge/index.tsx
+++ b/ui/src/components/CardBadge/index.tsx
@@ -27,9 +27,10 @@ import './index.scss';
 interface IProps {
   data: any;
   badgePill: boolean;
+  showAwardedCount?: boolean;
 }
 
-const Index: FC<IProps> = ({ data, badgePill }) => {
+const Index: FC<IProps> = ({ data, badgePill, showAwardedCount = false }) => {
   const { t } = useTranslation('translation', { keyPrefix: 'badges' });
   console.log(data);
   return (
@@ -40,9 +41,11 @@ const Index: FC<IProps> = ({ data, badgePill }) => {
         </Badge>
         <img src="" width={96} height={96} alt="" />
         <h6 className="mb-0 mt-3 text-center">Nice Question</h6>
-        <div className="small text-secondary">
-          {t('x_awarded', { number: formatCount(16) })}
-        </div>
+        {showAwardedCount && (
+          <div className="small text-secondary">
+            {t('x_awarded', { number: formatCount(16) })}
+          </div>
+        )}
       </Card.Body>
     </Card>
   );
diff --git a/ui/src/pages/Users/Personal/components/Overview/index.tsx b/ui/src/pages/Users/Personal/components/Overview/index.tsx
index 4f228061..384689dc 100644
--- a/ui/src/pages/Users/Personal/components/Overview/index.tsx
+++ b/ui/src/pages/Users/Personal/components/Overview/index.tsx
@@ -21,6 +21,7 @@ import { FC, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Row, Col } from 'react-bootstrap';
 
+import { CardBadge } from '@/components';
 import TopList from '../TopList';
 
 interface Props {
@@ -54,7 +55,7 @@ const Index: FC<Props> = ({ visible, introduction, data }) => {
             </>
           )}
         </Col>
-        <Col sm={12} md={6} className="mb-4">
+        <Col sm={12} md={6}>
           {data?.question?.length > 0 && (
             <>
               <h5 className="mb-3">{t('top_questions')}</h5>
@@ -63,6 +64,15 @@ const Index: FC<Props> = ({ visible, introduction, data }) => {
           )}
         </Col>
       </Row>
+
+      <div className="mb-5">
+        <h5 className="mb-3">{t('recent_badges')}</h5>
+        <div className="d-flex flex-wrap" style={{ margin: '-12px' }}>
+          {[0, 1, 2, 3, 4, 5, 6].map((item) => {
+            return <CardBadge data={item} badgePill />;
+          })}
+        </div>
+      </div>
     </div>
   );
 };