79 lines
2.0 KiB
TypeScript
79 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { usePathname } from "next/navigation";
|
|
import { useState, useEffect } from "react";
|
|
import { getClientBySlug, PublicClient } from "@/service/client/public-clients";
|
|
|
|
export const DynamicLogoTenant = () => {
|
|
const pathname = usePathname();
|
|
const tenant = pathname?.split("/")[3];
|
|
const [clientData, setClientData] = useState<PublicClient | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
const fetchClientData = async () => {
|
|
if (!tenant || !pathname?.includes("/tenant")) {
|
|
setClientData(null);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
const response = await getClientBySlug(tenant);
|
|
|
|
if (response?.error) {
|
|
setError("Client not found");
|
|
} else {
|
|
setClientData(response.data?.data);
|
|
}
|
|
} catch (err) {
|
|
console.error("Error fetching client data:", err);
|
|
setError("Failed to load client data");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchClientData();
|
|
}, [tenant, pathname]);
|
|
|
|
if (!pathname?.includes("/tenant") || !tenant) {
|
|
return null;
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="p-2">
|
|
<div className="h-[80px] w-[80px] ml-10 bg-gray-200 animate-pulse rounded"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error || !clientData?.logoUrl) {
|
|
return (
|
|
<div className="p-2">
|
|
<div className="h-[80px] w-[80px] ml-6 bg-gray-100 rounded flex items-center justify-center">
|
|
<span className="text-xs text-gray-500">No Logo</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="p-2">
|
|
<Image
|
|
priority={true}
|
|
src={clientData.logoUrl}
|
|
alt={`${clientData.name} Logo`}
|
|
width={60}
|
|
height={60}
|
|
className="object-contain h-[80px] w-[80px] ml-6"
|
|
onError={() => setError("Failed to load image")}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|