From b5aa7102155b3b53bb28adbcf469426bd84f978f Mon Sep 17 00:00:00 2001
From: 399617 <149047721+399617@users.noreply.github.com>
Date: Fri, 26 Jul 2024 21:46:53 +0800
Subject: [PATCH] [OSS101] Task 3: Display OpenDigger labels in the right of
 the repository header #807

---
 .../features/repo-header-labels/view.tsx      | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/pages/ContentScripts/features/repo-header-labels/view.tsx b/src/pages/ContentScripts/features/repo-header-labels/view.tsx
index 7020a32a..2656d3c0 100644
--- a/src/pages/ContentScripts/features/repo-header-labels/view.tsx
+++ b/src/pages/ContentScripts/features/repo-header-labels/view.tsx
@@ -37,6 +37,27 @@ const View = ({ activity, openrank, participant, contributor, meta }: Props): JS
   const participantData = generateDataByMonth(participant, meta.updatedAt);
   const contributorData = generateDataByMonth(contributor, meta.updatedAt);
 
+  type Label = {
+    id: string;
+    name: string;
+    type: string;
+  };
+
+  const labels: Label[] = meta.labels as Label[];
+
+  const spans = labels.map((label, index) => (
+    <span
+      key={label.id} // 使用label的id作为key
+      id={label.id}
+      className="Label Label--secondary v-align-middle mr-1 unselectable"
+      style={{
+        color: githubTheme === 'light' ? '#24292f' : '#c9d1d9'
+      }}
+    >
+      {label.name}
+    </span>
+  ));
+
   return (
     <div className="d-flex">
       <span
@@ -125,6 +146,9 @@ const View = ({ activity, openrank, participant, contributor, meta }: Props): JS
         {numberWithCommas(contributorData[contributorData.length - 1][1])}/
         {numberWithCommas(participantData[participantData.length - 1][1])}
       </span>
+
+      {spans}
+
     </div>
   );
 };