🚧 add tag selection

website/src/components/Card/index.tsx

@@ -1,9 +1,10 @@
+import clsx from "clsx";
 import React from "react";
 
 import Link from "@docusaurus/Link";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import type { Obj } from "../../libs/store";
+import type { Obj, Tag as TagType } from "../../libs/store";
 
 function pickTextColor(bgColor, lightColor, darkColor) {
   var color = bgColor.charAt(0) === "#" ? bgColor.substring(1, 7) : bgColor;
@@ -13,6 +14,32 @@ function pickTextColor(bgColor, lightColor, darkColor) {
   return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? darkColor : lightColor;
 }
 
+export function Tag({
+  label,
+  color,
+  className,
+  onClick,
+}: TagType & {
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLSpanElement>;
+}): JSX.Element {
+  return (
+    <span
+      className={clsx(
+        "inline-flex px-3 rounded-full items-center align-middle mr-2",
+        className
+      )}
+      style={{
+        backgroundColor: color,
+        color: pickTextColor(color, "#fff", "#000"),
+      }}
+      onClick={onClick}
+    >
+      {label}
+    </span>
+  );
+}
+
 export default function Card({
   module_name,
   name,