72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { getPublicClients, PublicClient } from "@/service/client/public-clients";
|
|
|
|
type CategoryTabsProps = {
|
|
selectedCategory: string;
|
|
onCategoryChange: (category: string) => void;
|
|
};
|
|
|
|
export default function CategoryTabs({
|
|
selectedCategory,
|
|
onCategoryChange,
|
|
}: CategoryTabsProps) {
|
|
const [clients, setClients] = useState<PublicClient[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
// Fetch public clients
|
|
useEffect(() => {
|
|
async function fetchClients() {
|
|
try {
|
|
const response = await getPublicClients();
|
|
if (response?.data?.success && response.data.data) {
|
|
setClients(response.data.data);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching public clients:", error);
|
|
// Fallback to empty array if API fails
|
|
setClients([]);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
fetchClients();
|
|
}, []);
|
|
|
|
// Create categories array with "SEMUA" first, then client names
|
|
const categories = ["SEMUA", ...clients.map(client => client.name)];
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex flex-wrap gap-2 overflow-x-auto">
|
|
{Array.from({ length: 6 }).map((_, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="px-4 py-1 text-sm rounded font-medium border bg-gray-200 animate-pulse h-8 w-20"
|
|
></div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-wrap gap-2 overflow-x-auto">
|
|
{categories.map((cat, idx) => (
|
|
<button
|
|
key={idx}
|
|
onClick={() => onCategoryChange(cat)}
|
|
className={`px-4 py-1 text-sm rounded font-medium border transition-colors ${
|
|
selectedCategory === cat
|
|
? "bg-[#C6A455] text-white"
|
|
: "bg-white text-gray-800 hover:bg-gray-50"
|
|
}`}
|
|
>
|
|
{cat.toUpperCase()}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|