Skip to content

Commit

Permalink
Merge pull request #44 from agricreation/ui
Browse files Browse the repository at this point in the history 
UI
  • Loading branch information
@moovendhan-v
moovendhan-v authored Apr 25, 2024
2 parents b0f5c54 + 46cbae9 commit f6453c3
Show file tree
Hide file tree
Showing 3 changed files with 169 additions and 41 deletions.
40 changes: 40 additions & 0 deletions ui_tailwind_shadecn/src/components/custom_ui/components/RenderComponents.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<RenderComponentsType> = ({ components, type, skeletonCount = 9 }) => {
const count = skeletonCount !== null ? skeletonCount : 9;

return (
<>
{components.length > 0 ? (
components.map((component: ComponentData, index: number) => (
<div className="transition duration-1000 ease-in-out relative" key={index}>
<Link
to={`/${component.catogries}/${component.folder_name}`}
>
<div>
<OutputsOfComponents componentsDetails={component} type={type} />
</div>
</Link>
</div>
))
) : (
<>
{Array.from({ length: count }, (_, index) => (
<CardSkeleton key={index} />
))}
</>
)}

</>
)
}
34 changes: 2 additions & 32 deletions ui_tailwind_shadecn/src/screens/Components.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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() {
Expand Down Expand Up @@ -166,37 +164,9 @@ export function Components() {
<div className="px-2"><Switch id="airplane-mode" defaultChecked/></div>
</div>


<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-4">

{components.length > 0 ? (
components.map((component: ComponentData, index: number) => (
<div className="transition duration-1000 ease-in-out relative">
<Link
to={`/${component.catogries}/${component.folder_name}`}
key={index}
>
<div ><OutputsOfComponents componentsDetails={component} type={ComponentType.COMPONENTS} />
</div>
</Link>
</div>
))
) : (
<>
<CardSkeleton />
<CardSkeleton />
<CardSkeleton />
<CardSkeleton />
<CardSkeleton />
<CardSkeleton />
<CardSkeleton />
<CardSkeleton />
</>
)}


<RenderComponents components={components} type={ComponentType.COMPONENTS}/>
</div>


</main>
</div>
Expand Down
136 changes: 127 additions & 9 deletions ui_tailwind_shadecn/src/screens/Profile/Profile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -255,16 +375,14 @@ export function Profile() {
<Button className="bg-theme hover:text-white">
In Draft
</Button>
<Button className="bg-theme hover:text-white">
Liked
</Button>
<Button className="bg-theme hover:text-white">
Saved
</Button>
</div>


<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div ><OutputsOfComponents type={ComponentType.COMPONENTS} />
</div>
<div ><OutputsOfComponents type={ComponentType.COMPONENTS} /></div>
<div ><OutputsOfComponents type={ComponentType.COMPONENTS} /></div>
<div ><OutputsOfComponents type={ComponentType.COMPONENTS} /></div>
</div>
{/* <RenderComponents components={components} type={ComponentType.COMPONENTS}/> */}
</div>
</section>

Expand Down

0 comments on commit f6453c3

Please sign in to comment.