-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
96 additions
and
81 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,92 +1,24 @@ | ||
| "use client"; | ||
| import { gigCardsSkeleton } from "@/constants/helpers"; | ||
| import { useAppSelector } from "@/store/store"; | ||
| import Image from "next/image"; | ||
| import { hearthEmpty, etoile } from "@/public/assets"; | ||
| import GigCardSkeleton from "../skeleton/GigCardSkeleton"; | ||
|
|
||
| import GigCard from "../ui/GigCard"; | ||
| const Home = () => { | ||
| const gigs: any = useAppSelector((state) => state.gigs.data); | ||
| const statusGetAllGigs: any = useAppSelector( | ||
| (state) => state.gigs.statusGetAllGigs | ||
| ); | ||
|
|
||
| if (statusGetAllGigs === "loading") | ||
| return <div className="text-white text-5xl">loading ....</div>; | ||
| console.log(gigs.gigs); | ||
| if (statusGetAllGigs === "succeeded") | ||
| return ( | ||
| <div className="text-white text-5xl grid grid-cols-3 max-lg:grid-cols-2 max-lg:mx-16 max-sm:grid-cols-1 max-sm:mx-20 gap-16 mt-8 mx-10"> | ||
| {gigs.gigs.map((gig: any) => { | ||
| return ( | ||
| <div className="bg-blue-dark-4 rounded-[20px] border border-white pb-4"> | ||
| {/* container 1 */} | ||
| <div className="relative"> | ||
| {/* image */} | ||
| <Image | ||
| src={gig.picture.fileUrl} | ||
| alt={gig.picture.fileKey} | ||
| className="h-[20vh] w-full rounded-t-[20px] border-b border-white" | ||
| width={1000} | ||
| height={1000} | ||
| quality={100} | ||
| /> | ||
| <Image | ||
| src={hearthEmpty} | ||
| alt="hearth empty" | ||
| className="absolute cursor-pointer top-4 right-4 " | ||
| width={20} | ||
| height={20} | ||
| /> | ||
| </div> | ||
| {/* container 2 */} | ||
| <div> | ||
| <div className="flex justify-between pt-4 px-2 items-center"> | ||
| {/* gig owner icon profile */} | ||
| <div className="flex items-center space-x-2"> | ||
| <Image | ||
| className="rounded-full border border-white h-[25px] w-[25px]" | ||
| src={gig.user_id.picture.fileUrl} | ||
| alt={gig.user_id.picture.fileKey} | ||
| width={200} | ||
| height={200} | ||
| /> | ||
| <p className="font-tajwal text-[12px]"> | ||
| {gig.user_id.firstName} | ||
| </p> | ||
| </div> | ||
| {/* gig category */} | ||
| <h3 className="text-[14px] text-shadow-green"> | ||
| {gig.category} | ||
| </h3> | ||
| </div> | ||
| {/* */} | ||
| <div className="font-tajwal text-[16px] pt-4 px-2 tracking-wide leading-6"> | ||
| {gig.title} | ||
| </div> | ||
| {/* gig rating */} | ||
| <div className="flex px-2 font-tajwal pt-2 space-x-1 items-center"> | ||
| <Image | ||
| className="h-[17px] w-[18px]" | ||
| src={etoile} | ||
| alt="etoile" | ||
| width={200} | ||
| height={200} | ||
| /> | ||
| <p className="text-[16px] text-shadow-green"> | ||
| {gig.rating}.0 | ||
| </p> | ||
| <p className="text-[16px] text-darkentwo">(0)</p> | ||
| </div> | ||
|
|
||
| {/* gig price */} | ||
| <h1 className="text-[17px] text-light-green font-bold tracking-wide font-tajwal pt-4 px-2"> | ||
| <span>From </span> | ||
| {gig.user_id.country}${gig.price} | ||
| </h1> | ||
| </div> | ||
| </div> | ||
| ); | ||
| })} | ||
| </div> | ||
| ); | ||
| return ( | ||
| <div className="text-white text-5xl grid grid-cols-3 max-lg:grid-cols-2 max-lg:mx-16 max-sm:grid-cols-1 max-sm:mx-16 gap-16 mt-8 mx-10"> | ||
| {statusGetAllGigs === "loading" || statusGetAllGigs === "" | ||
| ? gigCardsSkeleton.map((_, i) => <GigCardSkeleton key={i} />) | ||
| : statusGetAllGigs === "succeeded" | ||
| ? gigs.gigs.map((gig: any) => <GigCard key={gig._id} gig={gig} />) | ||
| : null} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Home; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import React from "react"; | ||
| import { Skeleton } from "../shadcn/ui/skeleton"; | ||
| const GigCardSkeleton = () => { | ||
| return ( | ||
| <Skeleton className="rounded-[20px] h-[300px] flex flex-col"></Skeleton> | ||
| ); | ||
| }; | ||
|
|
||
| export default GigCardSkeleton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import { etoile, hearthEmpty } from "@/public/assets"; | ||
| import Image from "next/image"; | ||
| import React from "react"; | ||
|
|
||
| const GigCard = ({ gig }: { gig: any }) => { | ||
| const { title, category, rating, price, user_id, picture } = gig; | ||
|
|
||
| return ( | ||
| <div className="bg-blue-dark-4 rounded-[20px] border border-white pb-4 hover:cursor-pointer hover:opacity-80 duration-150 ease-in-out"> | ||
| {/* container 1 */} | ||
| <div className="relative"> | ||
| {/* image */} | ||
| <Image | ||
| src={picture.fileUrl} | ||
| alt={picture.fileKey} | ||
| className="h-[20vh] w-full rounded-t-[20px] border-b border-white" | ||
| width={1000} | ||
| height={1000} | ||
| quality={100} | ||
| /> | ||
| <Image | ||
| src={hearthEmpty} | ||
| alt="hearth empty" | ||
| className="absolute cursor-pointer top-4 right-4 " | ||
| width={20} | ||
| height={20} | ||
| /> | ||
| </div> | ||
| {/* container 2 */} | ||
| <div> | ||
| <div className="flex justify-between pt-4 px-3 items-center"> | ||
| {/* gig owner icon profile */} | ||
| <div className="flex items-center space-x-2"> | ||
| <Image | ||
| className="rounded-full border border-white h-[25px] w-[25px]" | ||
| src={user_id.picture.fileUrl} | ||
| alt={user_id.picture.fileKey} | ||
| width={200} | ||
| height={200} | ||
| /> | ||
| <p className="font-tajwal text-[12px]">{user_id.firstName}</p> | ||
| </div> | ||
| {/* gig category */} | ||
| <h3 className="text-[14px] text-shadow-green">{category}</h3> | ||
| </div> | ||
| {/* */} | ||
| <div className="font-tajwal text-[16px] pt-4 px-3 tracking-wide leading-6"> | ||
| {title} | ||
| </div> | ||
| {/* gig rating */} | ||
| <div className="flex px-3 font-tajwal pt-2 space-x-1 items-center"> | ||
| <Image | ||
| className="h-[17px] w-[18px]" | ||
| src={etoile} | ||
| alt="etoile" | ||
| width={200} | ||
| height={200} | ||
| /> | ||
| <p className="text-[16px] text-shadow-green">{rating}.0</p> | ||
| <p className="text-[16px] text-darkentwo">(0)</p> | ||
| </div> | ||
|
|
||
| {/* gig price */} | ||
| <h1 className="text-[17px] text-light-green font-bold tracking-wide font-tajwal pt-4 px-3"> | ||
| <span>From </span> | ||
| {user_id.country}${price} | ||
| </h1> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default GigCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export const gigCardsSkeleton = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; |