fix: personal page empty state

apache · Oct 18, 2024 · a3a7a36 · a3a7a36
1 parent e0ffb96
commit a3a7a36
Showing 1 changed file with 30 additions and 29 deletions.
diff --git a/ui/src/pages/Users/Personal/components/Overview/index.tsx b/ui/src/pages/Users/Personal/components/Overview/index.tsx
@@ -49,46 +49,47 @@ const Index: FC<Props> = ({ visible, introduction, data, username }) => {
           dangerouslySetInnerHTML={{ __html: introduction }}
         />
       ) : (
-        <div className="text-center py-5 mb-5">{t('about_me_empty')}</div>
+        <div className="mb-5">{t('about_me_empty')}</div>
       )}
 
       <Row className="mb-4">
         <Col sm={12} md={6} className="mb-4">
-          {data?.answer?.length > 0 && (
-            <>
-              <h5 className="mb-3">{t('top_answers')}</h5>
-              <TopList data={data?.answer} type="answer" />
-            </>
+          <h5 className="mb-3">{t('top_answers')}</h5>
+          {data?.answer?.length > 0 ? (
+            <TopList data={data?.answer} type="answer" />
+          ) : (
+            <div className="mb-5">{t('content_empty')}</div>
           )}
         </Col>
         <Col sm={12} md={6}>
-          {data?.question?.length > 0 && (
-            <>
-              <h5 className="mb-3">{t('top_questions')}</h5>
-              <TopList data={data?.question} type="question" />
-            </>
+          <h5 className="mb-3">{t('top_questions')}</h5>
+          {data?.question?.length > 0 ? (
+            <TopList data={data?.question} type="question" />
+          ) : (
+            <div className="mb-5">{t('content_empty')}</div>
           )}
         </Col>
       </Row>
 
-      {Number(recentBadges?.count) > 0 && (
-        <div className="mb-4">
-          <h5 className="mb-3">{t('recent_badges')}</h5>
-          <Row>
-            {recentBadges?.list?.map((item) => {
-              return (
-                <Col sm={6} md={4} lg={3} key={item.id} className="mb-4">
-                  <CardBadge
-                    data={item}
-                    urlSearchParams={`username=${username}`}
-                    badgePillType="count"
-                  />
-                </Col>
-              );
-            })}
-          </Row>
-        </div>
-      )}
+      <div className="mb-4">
+        <h5 className="mb-3">{t('recent_badges')}</h5>
+        {Number(recentBadges?.count) > 0 ? (
+        <Row>
+          {recentBadges?.list?.map((item) => {
+            return (
+              <Col sm={6} md={4} lg={3} key={item.id} className="mb-4">
+                <CardBadge
+                  data={item}
+                  urlSearchParams={`username=${username}`}
+                  badgePillType="count"
+                />
+              </Col>
+            );
+          })}
+        </Row>) : (
+          <div className="mb-5">{t('content_empty')}</div>
+        )}
+      </div>
     </div>
   );
 };