UI

ui_tailwind_shadecn/src/api/components/component.tsx

@@ -1,7 +1,7 @@
 // http://localhost:4000/componentsbuttons/moovendhan_amazing_tooltip4
 
 
-// import { useComponentsStore } from '@/store/store';
+import { useViewComponentStore } from '@/store/store';
 // import {ComponentData} from '@/types/ComponentData.type'
 import {getEnvVariable} from '@/utils/load.utils';
 
@@ -18,13 +18,9 @@ export const fetchComponentStore = async (categorie: string , title: string) =>
             throw new Error('Failed to fetch categorie');
         }
         const responseData = await response.json();
-        const postDetails = responseData.post_details; 
+        const postDetails = responseData.response.post_details; 
 
-        // Extract post_details from response
-        // const details: ComponentData[] = responseData.map((item: ResponseItem) => item.post_details);
-
-        // Update the store
-        // useComponentsStore.setState({ [categorie]: details });
+        useViewComponentStore.setState({viewComponents: postDetails});
 
         return postDetails;
     } catch (error) {

ui_tailwind_shadecn/src/screens/View.tsx

@@ -25,11 +25,16 @@ import { ViewSkeleton } from "@/components/custom_ui/skeleton/ViewSkeleton";
 import { MovingButton } from "@/components/ui/moving-border";
 import { HoverBorderGradient } from "@/components/ui/hover-border-gradient";
 import { CommandDialogDemo } from "@/components/ui/commandMenu";
+import { useViewComponentStore }from "@/store/store";
+// import { SelectValue } from "@/components/ui/select"
 
 export function View() {
 
   const [isSticky, setIsSticky] = useState(false);
   const [componentDetails, setComponentDetails] = useState<ComponentStore | null>(null);
+  // #TODO do a api call and stoe in a zustand store 
+  const viewCompoentsStore = useViewComponentStore((state) => state.viewComponents);
+
   type componentParamType = {
     categorie: string;
     title: string;
@@ -182,7 +187,7 @@ export function View() {
                       <div className="flex items-center">
                         <span className="inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0"><LeftArrow />  Go Back</span>
                         <h1 className="px-3 md:text-2xl text-1xl font-medium">
-                          Awesome Buttons
+                          {viewCompoentsStore.title}
                         </h1>
                       </div>
 
@@ -267,7 +272,7 @@ export function View() {
                         <div className="relative">
                           <div className="absolute p-4 right-0 top-0">
                           </div>
-                          <OutputViewComponents html={componentDetails.html} css={componentDetails.css} js={componentDetails.js}/>
+                          <OutputViewComponents html={viewCompoentsStore.html} css={viewCompoentsStore.css} js={viewCompoentsStore.js}/>
                         </div>
                       </ResizablePanel>
                       <ResizableHandle className="px-1" withHandle />
@@ -301,30 +306,30 @@ export function View() {
                                 language="html"
                                 value={componentDetails?.html || ''}
                                 onChange={(value) => {
-                                  setComponentDetails((prevDetails) => ({
-                                    ...prevDetails,
-                                    html: value,
-                                    css: prevDetails?.css || '',
-                                    js: prevDetails?.js || ""
-                                  }));
+                                  useViewComponentStore.setState((state) => ({
+                                    viewComponents: {
+                                        ...state.viewComponents, 
+                                        html: value, 
+                                    },
+                                }));
                                 }}
                               />
                             )}
                             {activeTab === 'css' && <MonacoEditorComponent language="css" value={componentDetails?.css || ''} onChange={(value) => {
-                              setComponentDetails((prevDetails) => ({
-                                ...prevDetails,
-                                html: prevDetails?.html || "",
-                                css: value,
-                                js: prevDetails?.js || ""
-                              }));
+                             useViewComponentStore.setState((state) => ({
+                              viewComponents: {
+                                  ...state.viewComponents, 
+                                  html: value, 
+                              },
+                          }));
                             }} />}
                             {activeTab === 'javascript' && <MonacoEditorComponent language="javascript" value={componentDetails?.js || ''} onChange={(value) => {
-                              setComponentDetails((prevDetails) => ({
-                                ...prevDetails,
-                                html: prevDetails?.html || "",
-                                css: prevDetails?.css || '',
-                                js: value
-                              }));
+                              useViewComponentStore.setState((state) => ({
+                                viewComponents: {
+                                    ...state.viewComponents, 
+                                    html: value, 
+                                },
+                            }));
                             }} />}
                           </div>
                         </div>

ui_tailwind_shadecn/src/store/store.tsx

@@ -1,5 +1,5 @@
 import { create } from 'zustand';
-import {ComponentsStore, } from '@/types/ComponentStore.type'
+import {ComponentsStore, ViewComponentStore, } from '@/types/ComponentStore.type'
 import {CategoriesStore} from '@/types/CategoriesStore.type'
 
 
@@ -39,7 +39,32 @@ export const useComponentsStore = create<ComponentsStore>(() => ({
     toast : [],
 }));
 
-
-// export const useComponentStore = create<ComponentStore>(()=>{
-//     currentComponentStore : ComponentStore;
-// })
+export const useViewComponentStore = create<ViewComponentStore>(() => ({
+    viewComponents: {
+        html: "",
+        css: "",
+        js: "",
+        catogries: "",
+        folder_path: "",
+        folder_name: "",
+        isActive: false,
+        title: "",
+        description: "",
+        admin: {
+            _id: "",
+            id: 0,
+            login: "",
+            avatar_url: "",
+            url: "",
+            html_url: "",
+            company: "",
+            location: "",
+            email: null,
+            name: "",
+            blog: "",
+            bio: "",
+            twitter_username: null,
+            __v: 0,
+        },
+    },
+}));

ui_tailwind_shadecn/src/types/ComponentStore.type.tsx

@@ -37,4 +37,7 @@ export type ComponentStore ={
     html: string;
     css : string;
     js : string;
-}
+}
+ export type ViewComponentStore = {
+    viewComponents : ComponentData;
+ }