@igamingcareer/igaming-components 1.0.64 → 1.0.66

package/Readme.md

@@ -69,6 +69,76 @@ export function Example() {
 }
 ```
 
+## Tag badge and tag picker
+
+Use the `TagBadge` component to display tags (for job cards, filters, etc.) and the `TagPicker` component to select or create tags.
+
+### Example 1: Basic tag badge
+
+```tsx
+import { TagBadge } from "@igamingcareer/igaming-components";
+
+export function TagBadgeExample() {
+  return <TagBadge name="Remote" color="#10B981" size="sm" />;
+}
+```
+
+### Example 2: Removable and clickable tag badge
+
+```tsx
+import { TagBadge } from "@igamingcareer/igaming-components";
+
+export function InteractiveTagBadge() {
+  return (
+    <TagBadge
+      name="Interview"
+      color="#F59E0B"
+      size="md"
+      removable
+      onRemove={() => console.log("remove tag")}
+      onClick={() => console.log("badge clicked")}
+    />
+  );
+}
+```
+
+### Example 3: Tag picker with inline creation
+
+```tsx
+import { useState } from "react";
+import { TagPicker } from "@igamingcareer/igaming-components";
+
+const initialTags = [
+  { id: "1", name: "Remote", color: "#10B981" },
+  { id: "2", name: "Urgent", color: "#EF4444" },
+  { id: "3", name: "Interview", color: "#F59E0B", category: "Stage" },
+];
+
+export function TagPickerExample() {
+  const [tags, setTags] = useState(initialTags);
+  const [selectedTagIds, setSelectedTagIds] = useState<string[]>(["1"]);
+
+  const handleCreateTag = async ({ name, color }: { name: string; color: string }) => {
+    const nextTag = { id: String(Date.now()), name, color };
+    setTags((prev) => [...prev, nextTag]);
+  };
+
+  return (
+    <TagPicker
+      availableTags={tags}
+      selectedTagIds={selectedTagIds}
+      onTagSelect={(tagId) => setSelectedTagIds((prev) => [...prev, tagId])}
+      onTagDeselect={(tagId) =>
+        setSelectedTagIds((prev) => prev.filter((id) => id !== tagId))
+      }
+      onCreateTag={handleCreateTag}
+      maxTags={8}
+      placeholder="Add tags to this job..."
+    />
+  );
+}
+```
+
 ### Sign-in prompt modal for gated actions
 
 Use the `SignInPromptModal` to nudge unauthenticated users to log in or create an account before performing actions such as