Home Page - Copy this React, Tailwind Component to your project

I provide my 2 code home and other what you do just add loading for 2 3 s when click and show circuler simple loading when click and give full code back and add some beautidul import { MenuProps, Spin } from "antd"; import React, { useEffect, useState } from "react"; import { useNavigate, useParams } from "react router dom"; import ExploreButton from "../component/Button"; import Sidebar from "../component/Sidebar"; interface ProviderData { [key: string]: [string]; } const HomePage: React.FC = () => { const [loading, setLoading] = useState<boolean>(false); const { providerName } = useParams<{ providerName: string }>(); const [apiDetails, setApiDetails] = useState<any>(null); const [error, setError] = useState<string | null>(null); const [menuItems, setMenuItems] = useState<any[]>([]); const navigate = useNavigate(); const fetchProviders = async () => { try { const response = await fetch("https://api.apis.guru/v2/providers.json"); const data: ProviderData = await response.json(); setMenuItems(data["data"].slice(0, 50)); const details = await Promise.all( data["data"].slice(0, 50).map(async (providerName: string) => { try { const res = await fetch(`https://api.apis.guru/v2/${providerName}.json`); const detail = await res.json(); return { providerName, detail }; } catch (error) { console.error(`Error fetching details for ${providerName}:`, error); return { providerName, detail: null }; } }) ); console.log(details) // Map API data to Menu items const transformedMenuItems = details.map((item) => ({ ...item, children: item.detail.apis ? Object.keys(item.detail.apis).map((apiName: string) => ({ label: ( <span onClick={() => { setTimeout(() => setLoading(false), 2000); navigate(`/api/${item.providerName}/${apiName}`); }} > {/* {item.detail.apis[apiName].info.title && ( <h2>{item.detail.apis[apiName].info.title}</h2> )} {item.detail.apis[apiName].info["x logo"]?.url && ( <img src={item.detail.apis[apiName].info["x logo"].url} alt={`${item.detail.apis[apiName].info.title} logo`} style={{ maxWidth: '100px', height: 'auto' }} /> )} */} <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}> {item.detail.apis[apiName].info["x logo"]?.url && ( <img src={item.detail.apis[apiName].info["x logo"].url} alt={`${item.detail.apis[apiName].info.title} logo`} style={{ width: '50px', height: '50px', objectFit: 'contain' }} // Adjust the size as needed /> )} <h2 style={{ margin: 0 }}>{item.detail.apis[apiName].info.title}</h2> </div> {/* {apiName} */} </span> ), key: `${item.providerName} ${apiName}`, })) : [], })); setMenuItems(transformedMenuItems); } catch (error) { console.error("Error fetching providers:", error); } }; type MenuItem = Required<MenuProps>["items"][number]; const transformedData: MenuItem[] = menuItems.map( (item: any, index: number) => ({ label: ( <span onClick={() => { console.log(`Clicked provider: ${item.providerName}`); }} > {item.providerName} </span> ), key: item.providerName, children: item.children, }) ); useEffect(() => { fetchProviders(); }, []); if (loading) { return <Spin size="small" /> } return ( <> <div className="h screen flex flex col items center justify center"> <div> <ExploreButton /> </div> <div> <Sidebar transformedata={transformedData} /> </div> </div> </> ); }; export default HomePage;