[OSS101] Task 3: Display OpenDigger labels in the right of the reposi…

…tory header hypertrons#807

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>
   );
 };