client: add BadgeItem.tsx

0l1v3rr · 0l1v3rr · commit f16cf9986720 · 2023-04-29T10:45:16.000+02:00
diff --git a/client/src/components/lines/BadgeItem.tsx b/client/src/components/lines/BadgeItem.tsx
@@ -0,0 +1,28 @@
+import { Badge } from "../../types";
+
+type Props = {
+  badge: Badge;
+};
+
+const BadgeItem = ({ badge }: Props) => {
+  return (
+    <div className="flex cursor-pointer items-center gap-3 border border-solid border-gh-bg-secondary bg-gh-bg-secondary px-3 py-[.45rem] transition-all duration-150">
+      <img
+        onError={(e) => {
+          e.currentTarget.style.display = "none";
+        }}
+        className="h-4 w-4"
+        src={`https://cdn.simpleicons.org/${encodeURI(badge.icon)}/${
+          badge.color === "auto" ? "" : badge.color.replace("#", "")
+        }`}
+        alt={`${badge.icon}`}
+      />
+
+      <span className="py-[.145rem] font-dejavu text-[.70rem] font-bold uppercase leading-none tracking-wider text-white">
+        {badge.label}
+      </span>
+    </div>
+  );
+};
+
+export default BadgeItem;
diff --git a/client/src/components/lines/LineItem.tsx b/client/src/components/lines/LineItem.tsx
@@ -2,6 +2,7 @@ import { useMultistepContext } from "../../hooks/useMultistepContext";
 import { Line } from "../../types";
 import Hr from "../ui/Hr";
 import { formatNumberWord } from "../ui/utils";
+import BadgeItem from "./BadgeItem";
 import NewBadge from "./NewBadge";
 
 type Props = {
@@ -18,10 +19,16 @@ const LineItem = ({ line }: Props) => {
       </div>
 
       <div className="flex flex-col gap-2 px-3 py-2">
-        {line.badges.length < 1 && (
+        {line.badges.length < 1 ? (
           <div className="text-center text-sm text-gh-text-secondary">
             🥱 No badges selected.
           </div>
+        ) : (
+          <div className="flex flex-wrap gap-2">
+            {line.badges.map((badge, i) => (
+              <BadgeItem key={i} badge={badge} />
+            ))}
+          </div>
         )}
 
         <Hr />
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
@@ -32,6 +32,7 @@ export default {
       },
       fontFamily: {
         segoe: ["Segoe UI", "Tahoma", "Geneva", "Verdana", "sans-serif"],
+        dejavu: ["DejaVu Sans", "sans-serif"],
       },
     },
   },
