From 8a4b1e07e00aa463150b120a49779f795c28a192 Mon Sep 17 00:00:00 2001 From: agricreations Date: Mon, 8 Apr 2024 07:01:29 +0530 Subject: [PATCH] adding skeleton loadin for cards and navbar --- ui_tailwind_shadecn/src/App.tsx | 12 +- .../src/api/components/categories.tsx | 18 ++ .../src/api/components/components.tsx | 54 +++++ .../custom_ui/skeleton/CardSkeleton.tsx | 25 ++ .../custom_ui/skeleton/NavSkeleton.tsx | 23 ++ .../src/screens/Components.tsx | 214 ++++++++---------- ui_tailwind_shadecn/src/screens/Home.tsx | 7 +- ui_tailwind_shadecn/src/screens/View.tsx | 148 ++++++------ ui_tailwind_shadecn/src/store/store.tsx | 75 ++++-- 9 files changed, 355 insertions(+), 221 deletions(-) create mode 100644 ui_tailwind_shadecn/src/api/components/categories.tsx create mode 100644 ui_tailwind_shadecn/src/api/components/components.tsx create mode 100644 ui_tailwind_shadecn/src/components/custom_ui/skeleton/CardSkeleton.tsx create mode 100644 ui_tailwind_shadecn/src/components/custom_ui/skeleton/NavSkeleton.tsx diff --git a/ui_tailwind_shadecn/src/App.tsx b/ui_tailwind_shadecn/src/App.tsx index 8f82a4f..893b496 100644 --- a/ui_tailwind_shadecn/src/App.tsx +++ b/ui_tailwind_shadecn/src/App.tsx @@ -17,13 +17,11 @@ function App() { } /> } /> - } /> + } /> } /> - {/* } /> */} - {/* components */} - {/* } /> - } /> + {/* } /> */} + {/* } /> } /> } /> } /> @@ -35,8 +33,8 @@ function App() { } /> } /> */} {/* component routeing end */} - {/* } /> - } /> */} + {/* } /> */} + {/* } /> */} {/* Dynamic routing for viewing a ciomponent details */} {/* } /> */} diff --git a/ui_tailwind_shadecn/src/api/components/categories.tsx b/ui_tailwind_shadecn/src/api/components/categories.tsx new file mode 100644 index 0000000..b7ccf53 --- /dev/null +++ b/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); + } +}; + diff --git a/ui_tailwind_shadecn/src/api/components/components.tsx b/ui_tailwind_shadecn/src/api/components/components.tsx new file mode 100644 index 0000000..28091f8 --- /dev/null +++ b/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);`` + } +}; diff --git a/ui_tailwind_shadecn/src/components/custom_ui/skeleton/CardSkeleton.tsx b/ui_tailwind_shadecn/src/components/custom_ui/skeleton/CardSkeleton.tsx new file mode 100644 index 0000000..adfde09 --- /dev/null +++ b/ui_tailwind_shadecn/src/components/custom_ui/skeleton/CardSkeleton.tsx @@ -0,0 +1,25 @@ +import { Skeleton } from "@/components/ui/skeleton" + + +const CardSkeleton = () => { + return ( + <> + +
+
+ +
+
+ +
+
+
+
+ + + + ) +} + + +export { CardSkeleton } \ No newline at end of file diff --git a/ui_tailwind_shadecn/src/components/custom_ui/skeleton/NavSkeleton.tsx b/ui_tailwind_shadecn/src/components/custom_ui/skeleton/NavSkeleton.tsx new file mode 100644 index 0000000..e57b79d --- /dev/null +++ b/ui_tailwind_shadecn/src/components/custom_ui/skeleton/NavSkeleton.tsx @@ -0,0 +1,23 @@ +import { Skeleton } from "@/components/ui/skeleton" + + +const NavSkeleton = () => { + return( + <> + + + + + + + + + + + + + + ) +} + +export {NavSkeleton} \ No newline at end of file diff --git a/ui_tailwind_shadecn/src/screens/Components.tsx b/ui_tailwind_shadecn/src/screens/Components.tsx index 96a4b3b..57582e3 100644 --- a/ui_tailwind_shadecn/src/screens/Components.tsx +++ b/ui_tailwind_shadecn/src/screens/Components.tsx @@ -1,16 +1,10 @@ import { Bell, CircleUser, - Home, - LineChart, Menu, - Package, Search, - ShoppingCart, - Users, } from "lucide-react" -import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card, @@ -33,12 +27,34 @@ import { Link } from "react-router-dom" import { Logo } from "@/components/custom_ui/Svg" import OutputsOfComponents from "@/components/custom_ui/OutputComponents" import { ComponentType } from "@/enums/iframEnums" +import { useCategoriesStore, useComponentsStore } from "@/store/store" +import { useEffect } from "react" +import { fetchCategories } from "@/api/components/categories" +import { fetchComponentsStore } from "@/api/components/components" +import { NavSkeleton } from "@/components/custom_ui/skeleton/NavSkeleton" +import { CardSkeleton } from "@/components/custom_ui/skeleton/CardSkeleton" + + +type Props = { + componentCatogries: string; +}; + +export function Components({ componentCatogries }: Props) { + const categries = useCategoriesStore((state) => state.categories); + const components = useComponentsStore((state) => state.buttons); + console.log(components); + console.log(componentCatogries); + + useEffect(() => { + fetchCategories(); + fetchComponentsStore(componentCatogries); + + }, [componentCatogries]) -export function Components() { return (
-
+

Ui Components

-
+
- -
+ + {/*
Join With Us - Join the Revolution of Open Source UI + Join the Revolution of Open Source UI @@ -104,8 +99,7 @@ export function Components() { -
- +
*/}
@@ -125,58 +119,30 @@ export function Components() {
Join With Us - Join the Revolution of Open Source UI + Join the Revolution of Open Source UI @@ -220,30 +186,40 @@ export function Components() {
-

{} - Components

+

{ } - Components

-
-
+
+ + + + + + + + + + + + {/*
+
+
+
+
+
+
+
+
*/} +
- - - Holden Caulfield - Holden Caulfield - - -
-
-
-
-
-
-
-
-
-
-
- {/*

diff --git a/ui_tailwind_shadecn/src/screens/Home.tsx b/ui_tailwind_shadecn/src/screens/Home.tsx index 37f02cb..72bc479 100644 --- a/ui_tailwind_shadecn/src/screens/Home.tsx +++ b/ui_tailwind_shadecn/src/screens/Home.tsx @@ -53,11 +53,14 @@ import YoutubeContent from '../components/custom_ui/YoutubeContent'; import Community from '../components/custom_ui/Community'; import OutputsOfComponents from "@/components/custom_ui/OutputComponents" import { ComponentType } from "@/enums/iframEnums" +// import {fetchCategories} from '@/api/components/categories'; -// import useFetchData from '@/hooks/use_fetch_data.hooks'; +// // import useFetchData from '@/hooks/use_fetch_data.hooks'; +// import {useCategoriesStore} from '@/store/store'; export function Dashboard() { + const { setTheme } = useTheme() // const apiUrl = process.env.BASE_URI; @@ -70,9 +73,7 @@ export function Dashboard() { // if (error) { // return
Error: {error.message}
; // } - return ( -

- -
-

Components

-
-
- + {/* //position fixed */} +
+
+

Components

+
+
+ + +
+
@@ -135,44 +145,24 @@ export function View() { diff --git a/ui_tailwind_shadecn/src/store/store.tsx b/ui_tailwind_shadecn/src/store/store.tsx index f12869c..89acf8c 100644 --- a/ui_tailwind_shadecn/src/store/store.tsx +++ b/ui_tailwind_shadecn/src/store/store.tsx @@ -1,17 +1,66 @@ -import {create} from 'zustand'; +import { create } from 'zustand'; -type CounterStore = { - count : number; - incremnt: () => void; - decrement: () => void; +type CategoriesStore = { + categories: string[]; +}; +type ComponentsStore = { + all: object[]; + nav: object[]; + buttons: object[]; + carosel: object[]; + hero_section: object[]; + dropdown: object[]; + testimonial: object[]; + features: object[]; + toggles: object[]; + faq: object[]; + form: object[]; + pricing: object[]; + login_signup: object[]; + accordian: object[]; + card: object[]; + toggle: object[]; + tabs: object[]; + input: object[]; + modals: object[]; + notification: object[]; + loader: object[]; + countdown: object[]; + contactus: object[]; + footer: object[]; + tooltips: object[]; + others: object[]; } -export const useCounterStore = create((set) => ({ - count: 0, - incremnt: () => { - set((state) => ({ count: state.count + 1 })); - }, - decrement: () => { - set((state) => ({ count: state.count - 1 })); - }, +export const useCategoriesStore = create(() => ({ + categories: [], })); + +export const useComponentsStore = create(() => ({ + all : [], + nav : [], + buttons : [], + carosel : [], + hero_section : [], + dropdown : [], + testimonial : [], + features : [], + toggles : [], + faq : [], + form : [], + pricing : [], + login_signup : [], + accordian : [], + card : [], + toggle : [], + tabs : [], + input : [], + modals : [], + notification : [], + loader : [], + countdown : [], + contactus : [], + footer : [], + tooltips : [], + others : [], +})); \ No newline at end of file