@igamingcareer/igaming-components 1.0.82 → 1.0.83

package/Readme.md

@@ -69,6 +69,118 @@ export function Example() {
 }
 ```
 
+## Follow company callbacks (CompanyCard + CompanyDetail)
+
+The company list/detail components are stateless and emit follow actions so your app can handle API calls. Use the follow props to control state and provide callbacks for follow/unfollow actions.
+
+```tsx
+import { useState } from "react";
+import {
+  CompanyCard,
+  CompanyDetail,
+  type CompanyFollowActionPayload,
+} from "@igamingcareer/igaming-components";
+
+export function FollowCompaniesExample({ company }: { company: Company }) {
+  const [isFollowing, setIsFollowing] = useState(false);
+  const [followLoading, setFollowLoading] = useState(false);
+
+  const handleToggleFollow = async (companyId: string, nextIsFollowing: boolean) => {
+    setFollowLoading(true);
+    try {
+      // call your API here
+      // await api.followCompany({ companyId, follow: nextIsFollowing });
+      setIsFollowing(nextIsFollowing);
+    } finally {
+      setFollowLoading(false);
+    }
+  };
+
+  const handleFollowAction = (payload: CompanyFollowActionPayload) => {
+    // optional: analytics or logging
+    console.log("follow action", payload);
+  };
+
+  return (
+    <>
+      <CompanyCard
+        company={{ ...company, isFollowing }}
+        isFollowing={isFollowing}
+        followLoading={followLoading}
+        onToggleFollow={handleToggleFollow}
+        onFollowAction={handleFollowAction}
+      />
+
+      <CompanyDetail
+        company={{ ...company, isFollowing }}
+        isFollowing={isFollowing}
+        followLoading={followLoading}
+        onToggleFollow={handleToggleFollow}
+        onFollowAction={handleFollowAction}
+      />
+    </>
+  );
+}
+```
+
+Use `followDisabled` to block interactions for unauthenticated users, and `isFollowing` to keep the UI in sync with your data source.
+
+## Save company callbacks (CompanyCard + CompanyDetail)
+
+The company components also emit save events so host apps can manage bookmarking without API logic inside the library. Use the save props to track state and respond to user interactions.
+
+```tsx
+import { useState } from "react";
+import {
+  CompanyCard,
+  CompanyDetail,
+  type SaveCompanyPayload,
+} from "@igamingcareer/igaming-components";
+
+export function SaveCompaniesExample({ company }: { company: Company }) {
+  const [isSaved, setIsSaved] = useState(false);
+  const [saveLoading, setSaveLoading] = useState(false);
+
+  const handleToggleSave = async (companyId: string, nextIsSaved: boolean) => {
+    setSaveLoading(true);
+    try {
+      // call your API here
+      // await api.saveCompany({ companyId, save: nextIsSaved });
+      setIsSaved(nextIsSaved);
+    } finally {
+      setSaveLoading(false);
+    }
+  };
+
+  const handleSaveAction = (payload: SaveCompanyPayload) => {
+    // optional: analytics or logging
+    console.log("save action", payload);
+  };
+
+  return (
+    <>
+      <CompanyCard
+        company={{ ...company, isSaved }}
+        isSaved={isSaved}
+        saveLoading={saveLoading}
+        onToggleSave={handleToggleSave}
+        onSaveAction={handleSaveAction}
+      />
+
+      <CompanyDetail
+        company={{ ...company, isSaved }}
+        isSaved={isSaved}
+        saveLoading={saveLoading}
+        onToggleSave={handleToggleSave}
+        onSaveAction={handleSaveAction}
+      />
+    </>
+  );
+}
+```
+
+Use `saveDisabled` to disable the action for unauthenticated users, and keep `isSaved` in sync with your data source.
+
 ## CV upload from the dashboard
 
 The dashboard emits CV upload events so the host application can upload, store,