nodataheader and loderspnner component

Author: rezwanhossen

package-lock.json

@@ -20,6 +20,7 @@
     "react-hook-form": "^7.51.5",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",
+    "react-tabs": "^6.0.2",
     "sort-by": "^1.2.0",
     "swiper": "^11.1.4"
   },

package.json

@@ -1,11 +1,18 @@
-import { useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
+import useAxiosSecqur from "../../Hooks/useAxiosSecqur";
+import LogingSpiner from "../../Sheare/LogingSpiner";
 
 const MaleinCatagory = () => {
-  useEffect(() => {
-    fetch("http://localhost:5000/meals")
-      .then((res) => res.json())
-      .then((data) => console.log(data));
-  }, []);
+  const axiosSeequr = useAxiosSecqur();
+  const { data: meals = [], isLoading } = useQuery({
+    queryKey: ["meals"],
+    queryFn: async () => {
+      const { data } = await axiosSeequr.get("/meals");
+      return data;
+    },
+  });
+  if (isLoading) return <LogingSpiner></LogingSpiner>;
+
   return <div></div>;
 };
 

src/Hooks/useMeals.jsx

@@ -0,0 +1,9 @@
+const LogingSpiner = () => {
+  return (
+    <div className=" flex justify-center h-32 items-center">
+      <p className="loading loading-bars loading-lg"></p>
+    </div>
+  );
+};
+
+export default LogingSpiner;

src/Pages/Home/MaleinCatagory.jsx

@@ -0,0 +1,12 @@
+const NoDataHeader = ({ head, subhead }) => {
+  return (
+    <div className=" flex justify-center  items-center">
+      <div className=" space-y-3">
+        <h1 className="text-2xl md:text-5xl font-bold">{head} </h1>
+        <p>{subhead} </p>
+      </div>
+    </div>
+  );
+};
+
+export default NoDataHeader;

src/Sheare/LogingSpiner.jsx

@@ -4,13 +4,17 @@ import "./index.css";
 import { RouterProvider } from "react-router-dom";
 import router from "./Route/Route.jsx";
 import AuthProvider from "./Componente/Firbase/AuthProvider";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
+const queryClient = new QueryClient();
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <AuthProvider>
-      <div className=" w-full md:max-w-[90%] mx-auto">
-        <RouterProvider router={router} />
-      </div>
-    </AuthProvider>
+    <QueryClientProvider client={queryClient}>
+      <AuthProvider>
+        <div className=" w-full md:max-w-[90%] mx-auto">
+          <RouterProvider router={router} />
+        </div>
+      </AuthProvider>
+    </QueryClientProvider>
   </React.StrictMode>
 );