@igamingcareer/igaming-components 1.0.65 → 1.0.67

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
@@ -177,30 +247,3 @@ Key events include:
 - News Listing: search submissions/removals, filter select/clear/all-clear, date changes, category selection, pagination, view mode, items per page, article open/bookmark/share.
 
 When embedding via `renderMultiple` (see `src/main.tsx`), a global `window.IGC_EMIT_EVENT` handler will be passed automatically if present, along with a default context using the current route and optional `data-source` attribute.
-
-## Job Listing pagination-friendly API responses
-
-The `<Listing />` component now understands paginated API payloads. Set `apiProvidesPagination` (or the `data-api-pagination="true"` attribute when embedding) to tell the component your endpoint returns a `{ jobs: [], pagination: { page, limit, total, total_pages } }` envelope.
-
-- The component requests page `1` with `limit` set to the initial `itemsPerPage` value, reads the `pagination.total`/`total_pages` metadata, and then sequentially loads every remaining page to build the full `jobs[]` in memory.
-- While those pages are fetched, the UI stays in the loading state (using the first batch size for the skeleton), and once all pages are collected it serves the same client-side pagination experience as array-based responses.
-- If the flag is omitted, the component assumes a plain array response and paginates client-side as before.
-
-Example response shape:
-
-```json
-{
-  "jobs": [/* job objects for the current page */],
-  "pagination": {
-    "page": 1,
-    "limit": 5,
-    "total": 2284,
-    "total_pages": 457
-  },
-  "metadata": {
-    "cache_hit": false
-  }
-}
-```
-
-If your API still returns a plain array, leave `apiProvidesPagination` unset and the component will paginate client-side as before.