feat: colors for card tags

src/components/CardTag/CardTag.tsx

@@ -0,0 +1,30 @@
+import { CardTagSchema } from "../../client";
+import { Pill, useMantineColorScheme } from "@mantine/core";
+
+type Props = {
+    tag: Partial<CardTagSchema>;
+}
+
+const CardTag = ({ tag }: Props) => {
+    const theme = useMantineColorScheme();
+
+    let color = "lightgray";
+    if (tag?.tagColor?.backgroundColor === "inherit" && theme.colorScheme == "light") {
+        color = "gray";
+    }
+
+    return (
+        <Pill
+            key={tag.id}
+            style={{
+                color,
+                backgroundColor: tag?.tagColor?.backgroundColor,
+                border: "1px solid " + tag?.tagColor?.color,
+            }}
+        >
+            {tag.name}
+        </Pill>
+    );
+};
+
+export default CardTag;