@igamingcareer/igaming-components 1.0.89 → 1.0.91

package/Readme.md

@@ -292,6 +292,183 @@ export function DashboardWithRouter({ data }: { data: DashboardData }) {
 }
 ```
 
+## Company detail tab routing events
+
+The CompanyDetail component can emit a routing-friendly event whenever a tab is selected, so your Next.js app remains the source of truth for URLs. Provide `activeTab`, `tabPaths`, and `onTabChange` to keep routing and UI in sync.
+
+```tsx
+import { useState } from "react";
+import {
+  CompanyDetail,
+  type CompanyDetailTab,
+  type CompanyDetailTabChangeEvent,
+} from "@igamingcareer/igaming-components";
+
+export function CompanyDetailWithRouter({ data }: { data: CompanyDetailData }) {
+  const [activeTab, setActiveTab] = useState<CompanyDetailTab>("overview");
+
+  const handleTabChange = (event: CompanyDetailTabChangeEvent) => {
+    setActiveTab(event.tab);
+    // Example: Next.js router
+    // router.push(event.path ?? `/companies/${data.company.slug}`);
+  };
+
+  return (
+    <CompanyDetail
+      company={data.company}
+      jobs={data.jobs}
+      news={data.news}
+      events={data.events}
+      activeTab={activeTab}
+      tabPaths={{
+        overview: `/companies/${data.company.slug}`,
+        products: `/companies/${data.company.slug}/products`,
+        trust: `/companies/${data.company.slug}/trust`,
+        people: `/companies/${data.company.slug}/people`,
+        jobs: `/companies/${data.company.slug}/jobs`,
+        news: `/companies/${data.company.slug}/news`,
+        events: `/companies/${data.company.slug}/events`,
+        insights: `/companies/${data.company.slug}/insights`,
+      }}
+      onTabChange={handleTabChange}
+    />
+  );
+}
+```
+
+
+## Dashboard tab routing events
+
+The Dashboard component can emit a routing-friendly event whenever a tab is selected. Use it to keep your app router in sync (for example, pushing routes in Next.js). You can also pass an `activeTab` prop to control the active tab from outside, along with a `tabPaths` map so your app remains the source of truth for URL formats.
+
+```tsx
+import { useState } from "react";
+import {
+  Dashboard,
+  type DashboardTab,
+  type DashboardTabChangeEvent,
+} from "@igamingcareer/igaming-components";
+
+export function DashboardWithRouter({ data }: { data: DashboardData }) {
+  const [activeTab, setActiveTab] = useState<DashboardTab>("overview");
+
+  const handleTabChange = (event: DashboardTabChangeEvent) => {
+    setActiveTab(event.tab);
+    // Example: Next.js router
+    // router.push(event.path ?? "/dashboard");
+  };
+
+  return (
+    <Dashboard
+      user={data.user}
+      profileData={data.profile}
+      alerts={data.alerts}
+      snapshot={data.snapshot}
+      feedItems={data.feedItems}
+      onUpdateProfile={data.onUpdateProfile}
+      activeTab={activeTab}
+      tabPaths={{
+        overview: "/dashboard",
+        profile: "/dashboard/profile",
+        jobs: "/dashboard/jobs",
+        courses: "/dashboard/courses",
+        news: "/dashboard/news",
+        settings: "/dashboard/settings",
+      }}
+      onTabChange={handleTabChange}
+    />
+  );
+}
+```
+
+## Company detail tab routing events
+
+The CompanyDetail component can emit a routing-friendly event whenever a tab is selected, so your Next.js app remains the source of truth for URLs. Provide `activeTab`, `tabPaths`, and `onTabChange` to keep routing and UI in sync.
+
+```tsx
+import { useState } from "react";
+import {
+  CompanyDetail,
+  type CompanyDetailTab,
+  type CompanyDetailTabChangeEvent,
+} from "@igamingcareer/igaming-components";
+
+export function CompanyDetailWithRouter({ data }: { data: CompanyDetailData }) {
+  const [activeTab, setActiveTab] = useState<CompanyDetailTab>("overview");
+
+  const handleTabChange = (event: CompanyDetailTabChangeEvent) => {
+    setActiveTab(event.tab);
+    // Example: Next.js router
+    // router.push(event.path ?? `/companies/${data.company.slug}`);
+  };
+
+  return (
+    <CompanyDetail
+      company={data.company}
+      jobs={data.jobs}
+      news={data.news}
+      events={data.events}
+      activeTab={activeTab}
+      tabPaths={{
+        overview: `/companies/${data.company.slug}`,
+        products: `/companies/${data.company.slug}/products`,
+        trust: `/companies/${data.company.slug}/trust`,
+        people: `/companies/${data.company.slug}/people`,
+        jobs: `/companies/${data.company.slug}/jobs`,
+        news: `/companies/${data.company.slug}/news`,
+        events: `/companies/${data.company.slug}/events`,
+        insights: `/companies/${data.company.slug}/insights`,
+      }}
+      onTabChange={handleTabChange}
+    />
+  );
+}
+```
+
+## Dashboard tab routing events
+
+The Dashboard component can emit a routing-friendly event whenever a tab is selected. Use it to keep your app router in sync (for example, pushing routes in Next.js). You can also pass an `activeTab` prop to control the active tab from outside, along with a `tabPaths` map so your app remains the source of truth for URL formats.
+
+```tsx
+import { useState } from "react";
+import {
+  Dashboard,
+  type DashboardTab,
+  type DashboardTabChangeEvent,
+} from "@igamingcareer/igaming-components";
+
+export function DashboardWithRouter({ data }: { data: DashboardData }) {
+  const [activeTab, setActiveTab] = useState<DashboardTab>("overview");
+
+  const handleTabChange = (event: DashboardTabChangeEvent) => {
+    setActiveTab(event.tab);
+    // Example: Next.js router
+    // router.push(event.path ?? "/dashboard");
+  };
+
+  return (
+    <Dashboard
+      user={data.user}
+      profileData={data.profile}
+      alerts={data.alerts}
+      snapshot={data.snapshot}
+      feedItems={data.feedItems}
+      onUpdateProfile={data.onUpdateProfile}
+      activeTab={activeTab}
+      tabPaths={{
+        overview: "/dashboard",
+        profile: "/dashboard/profile",
+        jobs: "/dashboard/jobs",
+        courses: "/dashboard/courses",
+        news: "/dashboard/news",
+        settings: "/dashboard/settings",
+      }}
+      onTabChange={handleTabChange}
+    />
+  );
+}
+```
+
 ## 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.