adding skeleton loadin for cards and navbar

ui_tailwind_shadecn/src/App.tsx

@@ -17,13 +17,11 @@ function App() {
         <Routes>
           <Route path="/" element={<Dashboard />} />
           <Route path="/testing" element={<Testing />} />
-          <Route path="/components" element={<Components />} />
+          <Route path="/components" element={<Components componentCatogries='buttons' />} />
           <Route path="/view" element={<View />} />
 
-          {/* <Route path="/contributenew" element={<ContributeNewComp />} /> */}
-          {/* components  */}
-          {/* <Route path="/search" element={<Componenets catogreise={"search"} />} />
-          <Route path="/all" element={<Componenets catogreise={"all"} />} />
+          {/* <Route path="/search" element={<Componenets catogreise={"search"} />} /> */}
+          {/* <Route path="/all" element={<Componenets catogreise={"all"} />} />
           <Route path="/buttons" element={<Componenets catogreise={"buttons"} />} />
           <Route path="/cards" element={<Componenets catogreise={"cards"} />} />
           <Route path="/forms" element={<Componenets catogreise={"forms"} />} />
@@ -35,8 +33,8 @@ function App() {
           <Route path="/tabs" element={<Componenets catogreise={"tabs"} />} />
           <Route path="/toast" element={<Componenets catogreise={"toast"} />} /> */}
           {/* component routeing end  */}
-          {/* <Route path="/edit" element={<Editor />} />
-          <Route path="/profile" element={<Profile />} /> */}
+          {/* <Route path="/edit" element={<Editor />} /> */}
+          {/* <Route path="/profile" element={<Profile />} /> */}
           {/* Dynamic routing for viewing a ciomponent details  */}
           {/* <Route path="/:catogries/:title" element={<ViewComponent />} /> */}
 

ui_tailwind_shadecn/src/api/components/categories.tsx

@@ -0,0 +1,18 @@
+import {useCategoriesStore} from '@/store/store';
+
+
+export const fetchCategories = async () => {
+    try {
+        const response = await fetch('http://localhost:4000/components/get-cateogries');
+        if (!response.ok) {
+            throw new Error('Failed to fetch categories');
+        }
+        const data = await response.json();
+        const { directories } = data;
+        useCategoriesStore.setState({ categories: directories }); // Use setState to update store
+        return directories;
+    } catch (error) {
+        console.error('Error fetching categories:', error);
+    }
+};
+

ui_tailwind_shadecn/src/api/components/components.tsx

@@ -0,0 +1,54 @@
+import { useComponentsStore } from '@/store/store';
+
+type PostDetails = {
+    html: string;
+    css: string;
+    js: string;
+    folder_path: string;
+    folder_name: string;
+    catogries: string;
+    isActive: boolean;
+    title: string;
+    description: string;
+    admin: {
+        _id: string;
+        id: number;
+        login: string;
+        avatar_url: string;
+        url: string;
+        html_url: string;
+        company: string;
+        location: string;
+        email: string | null;
+        name: string;
+        blog: string;
+        bio: string;
+        twitter_username: string | null;
+        __v: number;
+    };
+};
+
+type ResponseItem = {
+    post_details: PostDetails;
+};
+
+export const fetchComponentsStore = async (categories: string) => {
+    try {
+        const response = await fetch(`http://localhost:4000/components/searchcomponents?search=${categories}`);
+        if (!response.ok) {
+            throw new Error('Failed to fetch categories');
+        }
+        const data = await response.json();
+        const { response: responseData } = data;
+
+        // Extract post_details from response
+        const details: PostDetails[] = responseData.map((item: ResponseItem) => item.post_details);
+
+        // Update the store
+        useComponentsStore.setState({ buttons: details });
+
+        return details;
+    } catch (error) {
+        console.error('Error fetching categories:', error);``
+    }
+};

ui_tailwind_shadecn/src/components/custom_ui/skeleton/CardSkeleton.tsx

@@ -0,0 +1,25 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+
+const CardSkeleton = () => {
+  return (
+    <>
+
+      <div className="relative">
+        <div className="flex flex-col space-y-3">
+          <Skeleton className="h-[250px] w-[100%] rounded-xl" />
+          <div className="space-y-2">
+            <div className="flex justify-between">
+              <Skeleton className="h-4 w-[100%]" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+    </>
+  )
+}
+
+
+export { CardSkeleton }

ui_tailwind_shadecn/src/components/custom_ui/skeleton/NavSkeleton.tsx

@@ -0,0 +1,23 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+
+const NavSkeleton = () => {
+    return(
+        <>
+        <Skeleton className="w-[100%] h-[40px] rounded transition duration-900 px-3 py-3 ease-in-out my-1" />
+        <Skeleton className="w-[100%] h-[40px] rounded transition duration-900 px-3 py-3 ease-in-out my-1" />
+        <Skeleton className="w-[100%] h-[40px] rounded transition duration-900 px-3 py-3 ease-in-out my-1" />
+        <Skeleton className="w-[100%] h-[40px] rounded transition duration-900 px-3 py-3 ease-in-out my-1" />
+        <Skeleton className="w-[100%] h-[40px] rounded transition duration-900 px-3 py-3 ease-in-out my-1" />
+        <Skeleton className="w-[100%] h-[40px] rounded transition duration-900 px-3 py-3 ease-in-out my-1" />
+        <Skeleton className="w-[100%] h-[40px] rounded transition duration-900 px-3 py-3 ease-in-out my-1" />
+        <Skeleton className="w-[100%] h-[40px] rounded transition duration-900 px-3 py-3 ease-in-out my-1" />
+        <Skeleton className="w-[100%] h-[40px] rounded transition duration-900 px-3 py-3 ease-in-out my-1" />
+        <Skeleton className="w-[100%] h-[40px] rounded transition duration-900 px-3 py-3 ease-in-out my-1" />
+        <Skeleton className="w-[100%] h-[40px] rounded transition duration-900 px-3 py-3 ease-in-out my-1" />
+        <Skeleton className="w-[100%] h-[40px] rounded transition duration-900 px-3 py-3 ease-in-out my-1" />
+      </>
+    )
+}
+
+export {NavSkeleton}