From 91c3b108eeae56b1c5f368c5802607c5bb8a1627 Mon Sep 17 00:00:00 2001 From: agricreations Date: Wed, 24 Apr 2024 22:22:54 +0530 Subject: [PATCH] Creating a RenderComponents for component render --- .../custom_ui/components/RenderComponents.tsx | 40 ++++++ .../src/screens/Components.tsx | 34 +---- .../src/screens/Profile/Profile.tsx | 136 ++++++++++++++++-- 3 files changed, 169 insertions(+), 41 deletions(-) create mode 100644 ui_tailwind_shadecn/src/components/custom_ui/components/RenderComponents.tsx diff --git a/ui_tailwind_shadecn/src/components/custom_ui/components/RenderComponents.tsx b/ui_tailwind_shadecn/src/components/custom_ui/components/RenderComponents.tsx new file mode 100644 index 0000000..d101c24 --- /dev/null +++ b/ui_tailwind_shadecn/src/components/custom_ui/components/RenderComponents.tsx @@ -0,0 +1,40 @@ +import { ComponentType } from "@/enums/iframEnums" +import { ComponentData } from "@/types/ComponentData.type" +import { Link } from "react-router-dom" +import OutputsOfComponents from "../OutputComponents" +import { CardSkeleton } from "../skeleton/CardSkeleton" + +interface RenderComponentsType { + components: ComponentData[]; + type? : ComponentType; + skeletonCount? : number; +} + +export const RenderComponents: React.FC = ({ components, type, skeletonCount = 9 }) => { + const count = skeletonCount !== null ? skeletonCount : 9; + + return ( + <> + {components.length > 0 ? ( + components.map((component: ComponentData, index: number) => ( +
+ +
+ +
+ +
+ )) + ) : ( + <> + {Array.from({ length: count }, (_, index) => ( + + ))} + + )} + + + ) +} diff --git a/ui_tailwind_shadecn/src/screens/Components.tsx b/ui_tailwind_shadecn/src/screens/Components.tsx index ef35efd..3f902fa 100644 --- a/ui_tailwind_shadecn/src/screens/Components.tsx +++ b/ui_tailwind_shadecn/src/screens/Components.tsx @@ -18,7 +18,6 @@ import { Input } from "@/components/ui/input" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" 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 {useLoginStore , useLoginUserInfo} from "@/store/Auth" @@ -27,11 +26,10 @@ 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" import { useParams } from 'react-router-dom'; -import {ComponentData} from '@/types/ComponentData.type'; import { Switch } from "@/components/ui/switch" import { NavProfile } from "@/components/custom_ui/NavBar/NavProfile" +import { RenderComponents } from "@/components/custom_ui/components/RenderComponents" // import { json } from "stream/consumers" export function Components() { @@ -166,37 +164,9 @@ export function Components() {
-
- - {components.length > 0 ? ( - components.map((component: ComponentData, index: number) => ( -
- -
-
- -
- )) - ) : ( - <> - - - - - - - - - - )} - - +
- diff --git a/ui_tailwind_shadecn/src/screens/Profile/Profile.tsx b/ui_tailwind_shadecn/src/screens/Profile/Profile.tsx index e578d30..606b736 100644 --- a/ui_tailwind_shadecn/src/screens/Profile/Profile.tsx +++ b/ui_tailwind_shadecn/src/screens/Profile/Profile.tsx @@ -35,10 +35,130 @@ import { useLoginStore, useLoginUserInfo } from "@/store/Auth" import { MainAuth } from "@/screens/Auth/MainAuth"; import OutputsOfComponents from "@/components/custom_ui/OutputComponents" import { ComponentType } from "@/enums/iframEnums" +import { RenderComponents } from "@/components/custom_ui/components/RenderComponents" export function Profile() { + const userData = { + "error": false, + "statusCode": 200, + "message": "User data received successfully", + "response": { + "user": { + "_id": "6622a2bdd71dc2bc780a3bab", + "id": 96030910, + "login": "agricreation", + "avatar_url": "https://avatars.githubusercontent.com/u/96030910?v=4", + "url": "https://api.github.com/users/agricreation", + "html_url": "https://github.com/agricreation", + "company": "@agricreations", + "location": "Puducherry", + "email": null, + "name": "Moovendhan", + "blog": "https://agricreations.com", + "bio": "Exploring different technologies (Love to automate everything)", + "twitter_username": null, + "__v": 0 + }, + "components": [ + { + "_id": "66292cd519b7bc0954254891", + "user_id": "6622a2bdd71dc2bc780a3bab", + "title": "Sample Component", + "description": "sample descriptions", + "tags": [ + "['testing', 'tags,]" + ], + "upload_time": "2023-12-31T23:59:59.999Z", + "updated_time": "2024-01-30T12:00:00.000Z", + "folder_path": "/path/to/component", + "folder_name": "moovendhan_amazing_tooedfd", + "categories": "tabs", + "isActive": false, + "__v": 0, + "component_details": { + "post_details": { + "html": "testing", + "css": "testing css", + "js": "testing js", + "folder_path": "/path/to/component", + "folder_name": "moovendhan_amazing_tooedfd", + "catogries": "tabs", + "isActive": false, + "title": "Sample Component", + "description": "sample descriptions", + "compId": "66292cd519b7bc0954254891", + "admin": { + "_id": "6622a2bdd71dc2bc780a3bab", + "id": 96030910, + "login": "agricreation", + "avatar_url": "https://avatars.githubusercontent.com/u/96030910?v=4", + "url": "https://api.github.com/users/agricreation", + "html_url": "https://github.com/agricreation", + "company": "@agricreations", + "location": "Puducherry", + "email": null, + "name": "Moovendhan", + "blog": "https://agricreations.com", + "bio": "Exploring different technologies (Love to automate everything)", + "twitter_username": null, + "__v": 0 + } + } + } + }, + { + "_id": "6629327819b7bc09542549c0", + "user_id": "6622a2bdd71dc2bc780a3bab", + "title": "Sample Component", + "description": "sample descriptions", + "tags": [ + "['testing', 'tags,]" + ], + "upload_time": "2023-12-31T23:59:59.999Z", + "updated_time": "2024-01-30T12:00:00.000Z", + "folder_path": "/path/to/component", + "folder_name": "moovendhan_amazing_tooedfffd", + "categories": "tabs", + "isActive": false, + "__v": 0, + "component_details": { + "post_details": { + "html": "testing", + "css": "testing css", + "js": "testing js", + "folder_path": "/path/to/component", + "folder_name": "moovendhan_amazing_tooedfffd", + "catogries": "tabs", + "isActive": false, + "title": "Sample Component", + "description": "sample descriptions", + "compId": "6629327819b7bc09542549c0", + "admin": { + "_id": "6622a2bdd71dc2bc780a3bab", + "id": 96030910, + "login": "agricreation", + "avatar_url": "https://avatars.githubusercontent.com/u/96030910?v=4", + "url": "https://api.github.com/users/agricreation", + "html_url": "https://github.com/agricreation", + "company": "@agricreations", + "location": "Puducherry", + "email": null, + "name": "Moovendhan", + "blog": "https://agricreations.com", + "bio": "Exploring different technologies (Love to automate everything)", + "twitter_username": null, + "__v": 0 + } + } + } + } + ] + }, + "count": 2 + } + // const user = useLoginStore((state) => state.isLogin); const user = true; const userInfo = useLoginUserInfo((state) => state); @@ -255,16 +375,14 @@ export function Profile() { + + - - -
-
-
-
-
-
-
+ {/* */}