export default function Namespace()

in webui/src/app/namespaces/page.tsx [33:101]
64 lines of code
4 McCabe index (conditional complexity)

export default function Namespace() {
    const [namespaces, setNamespaces] = useState<string[]>([]);
    const [loading, setLoading] = useState<boolean>(true);
    const router = useRouter();

    useEffect(() => {
        const fetchData = async () => {
            try {
                const fetchedNamespaces = await fetchNamespaces();
                setNamespaces(fetchedNamespaces);
            } catch (error) {
                console.error("Error fetching namespaces:", error);
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, [router]);

    if (loading) {
        return <LoadingSpinner />;
    }

    return (
        <div className="flex h-full">
            <NamespaceSidebar />
            <div className="flex-1 overflow-auto">
                <Box className="container-inner">
                    <Box className="mb-6 flex items-center justify-between">
                        <Typography
                            variant="h5"
                            className="font-medium text-gray-800 dark:text-gray-100"
                        >
                            Namespaces
                        </Typography>
                    </Box>

                    {namespaces.length > 0 ? (
                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                            {namespaces.map((namespace) => (
                                <Link key={namespace} href={`/namespaces/${namespace}`} passHref>
                                    <ResourceCard
                                        title={namespace}
                                        description="Namespace"
                                        tags={[{ label: "namespace", color: "primary" }]}
                                    >
                                        <div className="mt-4 flex h-20 items-center justify-center">
                                            <FolderIcon
                                                sx={{ fontSize: 60 }}
                                                className="text-primary/20 dark:text-primary-light/30"
                                            />
                                        </div>
                                    </ResourceCard>
                                </Link>
                            ))}
                        </div>
                    ) : (
                        <EmptyState
                            title="No namespaces found"
                            description="Create a namespace to get started"
                            icon={<FolderIcon sx={{ fontSize: 60 }} />}
                        />
                    )}
                </Box>
            </div>
        </div>
    );
}