-
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.
feat: #28 more splitting + react multi carousel
- Loading branch information
Showing
8 changed files
with
185 additions
and
115 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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
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
41 changes: 41 additions & 0 deletions
41
src/components/myconferenceId/Carousel/AllImagesCarousel.tsx
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,41 @@ | ||
| import Carousel from "react-multi-carousel"; | ||
| import SingleImageCarousel from "./SingleImageCarousel"; | ||
| import { Image } from "@/hooks/conference"; | ||
|
|
||
| export default function AllImagesCarousel({ photos }: { photos: Image[] }) { | ||
| const responsive = { | ||
| desktop: { | ||
| breakpoint: { max: 3000, min: 1024 }, | ||
| items: 4, | ||
| }, | ||
| tablet: { | ||
| breakpoint: { max: 1424, min: 464 }, | ||
| items: 2, | ||
| }, | ||
| mobile: { | ||
| breakpoint: { max: 664, min: 0 }, | ||
| items: 1, | ||
| }, | ||
| }; | ||
| console.log("photos1", photos); | ||
| return ( | ||
| <Carousel | ||
| responsive={responsive} | ||
| ssr | ||
| showDots={true} | ||
| slidesToSlide={1} | ||
| containerClass={`w-full flex justify-start items-center lg:w-[70vw] mt-2 pb-10 hidden`} | ||
| itemClass={"px-3 flex justify-start items-center"} | ||
| deviceType={""} | ||
| centerMode={false} | ||
| className={`mb-4 flex items-center ${ | ||
| photos && photos.length > 3 ? "justify-start" : "justify-center" | ||
| }`} | ||
| > | ||
| {photos && | ||
| photos.map((photos, index) => ( | ||
| <SingleImageCarousel key={index} photos={photos} /> | ||
| ))} | ||
| </Carousel> | ||
| ); | ||
| } |
12 changes: 12 additions & 0 deletions
12
src/components/myconferenceId/Carousel/SingleImageCarousel.tsx
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,12 @@ | ||
| "use client"; | ||
| import { Image } from "@/hooks/conference"; | ||
| import APIImageComponent from "@/hooks/imageAPI"; | ||
|
|
||
| export default function SingleImageCarousel({ photos }: { photos: Image }) { | ||
| console.log("photos2", photos); | ||
| return ( | ||
| <div className="w-full flex justify-center items-center"> | ||
| <APIImageComponent imageId={0} type={""} /> | ||
| </div> | ||
| ); | ||
| } |
56 changes: 56 additions & 0 deletions
56
src/components/myconferenceId/MyConferencePageImageBox.tsx
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,56 @@ | ||
| import { GetConferenceDetailsWithRoleFilteringData } from "@/hooks/conference"; | ||
| import Link from "next/link"; | ||
| import { | ||
| FaChevronRight, | ||
| FaRegCalendarCheck, | ||
| FaRegCalendarXmark, | ||
| } from "react-icons/fa6"; | ||
| import { IoMdPin } from "react-icons/io"; | ||
|
|
||
| export default function MyConferencePageImageBox({ | ||
| conferenceIdData, | ||
| }: { | ||
| conferenceIdData: GetConferenceDetailsWithRoleFilteringData; | ||
| }) { | ||
| return ( | ||
| <div className="absolute top-0 left-0 w-full h-full flex flex-col items-center text-close2White p-4"> | ||
| <h1 className="text-4xl pt-[5%]">{conferenceIdData.name}</h1> | ||
| <div className="w-full h-auto flex justify-around text-3xl pt-[10%]"> | ||
| <div className="flex-row flex gap-x-3 w-full h-auto items-center justify-center"> | ||
| <FaRegCalendarCheck className="text-4xl" /> | ||
| <h1 className="text-lg"> | ||
| {conferenceIdData.startDateTime.split("T")[0]}{" "} | ||
| {conferenceIdData.startDateTime | ||
| .split("T")[1] | ||
| .split(":") | ||
| .slice(0, 2) | ||
| .join(":")} | ||
| </h1> | ||
| </div> | ||
| <div className="flex-row flex gap-x-3 w-full h-auto items-center justify-center"> | ||
| <FaRegCalendarXmark className="text-4xl" /> | ||
| <h1 className="text-lg"> | ||
| {conferenceIdData.endDateTime.split("T")[0]}{" "} | ||
| {conferenceIdData.endDateTime | ||
| .split("T")[1] | ||
| .split(":") | ||
| .slice(0, 2) | ||
| .join(":")} | ||
| </h1> | ||
| </div> | ||
| </div> | ||
| <div className="flex-col flex gap-x-3 w-full h-auto items-center justify-center pt-[18%]"> | ||
| <div className="flex-row flex gap-x-3 w-full h-auto items-center justify-center"> | ||
| <IoMdPin className="text-4xl" /> | ||
| <h1 className=" text-3xl">{conferenceIdData.location.name}</h1> | ||
| </div> | ||
| <Link | ||
| href={`https://www.google.com/maps/place/${conferenceIdData.location.locX}+${conferenceIdData.location.locY}`} | ||
| className={"pt-2 hover:underline flex items-center gap-2"} | ||
| > | ||
| Zobacz lokalizację na mapie <FaChevronRight /> | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
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,29 @@ | ||
| import Image, { StaticImageData } from "next/image"; | ||
|
|
||
| export default function People({ | ||
| username, | ||
| photo, | ||
| email, | ||
| }: { | ||
| username: string; | ||
| photo: string | StaticImageData; | ||
| email?: string; | ||
| }) { | ||
| return ( | ||
| <div className="w-full"> | ||
| <p className="w-full flex justify-center items-center"> | ||
| <Image | ||
| src={photo} | ||
| alt={"Logo"} | ||
| className="rounded-full" | ||
| width={80} | ||
| height={80} | ||
| /> | ||
| </p> | ||
| <span className="w-full flex justify-center pt-1 text-md"> | ||
| {username} | ||
| </span> | ||
| <span className="w-full flex justify-center text-xs">{email}</span> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.