Skip to content

Commit

Permalink
updated Previous Artists Section
Browse files Browse the repository at this point in the history
  • Loading branch information
@satyaaa111
satyaaa111 committed Mar 28, 2024
1 parent 4d72012 commit 598e2c1
Show file tree
Hide file tree
Showing 2 changed files with 147 additions and 43 deletions.
2 changes: 1 addition & 1 deletion src/Components/Artist/ArtistPageAnimation.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const ArtistPageAnimation = ({ first, second, third, setfirst, setsecond, setthi
className={`relative w-[100%] transition-all duration-[1000ms] ease-in-out ${first || second || third ? "h-[50rem]" : " h-[25rem]"}`}
>
<div
className={`flex h-[30rem] w-[100%] justify-center gap-[7rem] transition-all duration-[1500] ease-in-out ${first || second || third ? "top-[30rem]" : "top-[0rem]"} absolute`}
className={`flex h-[30rem] w-[100%] justify-center gap-[8rem] transition-all duration-[1500] ease-in-out ${first || second || third ? "top-[30rem]" : "top-[0rem]"} absolute`}
>
<div
className={`transition-all duration-[1500ms] ease-in-out ${first ? "absolute top-[-30rem]" : "top-[0rem]"}`}
Expand Down
188 changes: 146 additions & 42 deletions src/Pages/Artist/ArtistPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,26 @@ const ArtistPage = () => {
const jaapi =
"https://res.cloudinary.com/dhpqjrbha/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1711053903/OBJECTS_1_gvgj7g.jpg?_s=public-apps";

const UpArtistData = [
{
id: 1,
name: "Zubeen Garg",
photoLink:
"https://res.cloudinary.com/dhpqjrbha/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1710876326/sf7py4kekiyxmzcndxqp.jpg?_s=public-apps",
},
{
id: 2,
name: "Zubeen Garg",
photoLink:
"https://res.cloudinary.com/dhpqjrbha/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1710876326/sf7py4kekiyxmzcndxqp.jpg?_s=public-apps",
},
{
id: 3,
name: "Zubeen Garg",
photoLink:
"https://res.cloudinary.com/dhpqjrbha/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1710876326/sf7py4kekiyxmzcndxqp.jpg?_s=public-apps",
},
];
const prevArtistData = [
{
id: 1,
Expand All @@ -48,34 +68,55 @@ const ArtistPage = () => {
photoLink:
"https://assets.sentinelassam.com/h-upload/c_scale,w_360,f_auto,fl_lossy/2021/04/14/218865-bihu.webp?w=940&dpr=1.3",
},
];

const UpArtistData = [
{
id: 1,
name: "Zubeen Garg",
id: 4,
name: "Priyanka Bharali",
profession: "Singer",
photoLink:
"https://res.cloudinary.com/dhpqjrbha/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1710876326/sf7py4kekiyxmzcndxqp.jpg?_s=public-apps",
"https://res.cloudinary.com/dp92qug2f/image/upload/c_scale,w_360,f_auto,fl_lossy/v1677513050/WhatsApp_Image_2023-02-27_at_20.35.22_ai2wby.jpg",
},
{
id: 2,
name: "Zubeen Garg",
id: 5,
name: "Tezpuriya Thespian",
profession: "Band",
photoLink:
"https://res.cloudinary.com/dhpqjrbha/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1710876326/sf7py4kekiyxmzcndxqp.jpg?_s=public-apps",
"https://res.cloudinary.com/dp92qug2f/image/upload/v1677787106/posua/maxresdefault_edezq4.jpg",
},
{
id: 3,
id: 6,
name: "Zubeen Garg",
profession: "Singer",
photoLink:
"https://res.cloudinary.com/dhpqjrbha/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1710876326/sf7py4kekiyxmzcndxqp.jpg?_s=public-apps",
"https://res.cloudinary.com/dp92qug2f/image/upload/c_scale,w_360,f_auto,fl_lossy/v1677785093/posua/Zubeen-Hospitalized-Shifted-to-ICU-for-24-Hours_1658305106491_1658305113562_1658305113562_fgv1gr.webp",
},
{
id: 7,
name: "Neel Akash",
profession: "Singer",
photoLink:
"https://res.cloudinary.com/dp92qug2f/image/upload/c_scale,w_360,f_auto,fl_lossy/v1677785486/posua/278904714_3139465349627002_1271890122984205712_n.jpg_nmumpg.jpg",
},
{
id: 8,
name: "Simanta Shekhar",
profession: "Singer",
photoLink:
"https://res.cloudinary.com/dp92qug2f/image/upload/c_scale,w_360,f_auto,fl_lossy/v1677785795/posua/artist_4642892-1500240408_vtmltu.jpg",
},
{
id: 9,
name: "Manash Robin",
profession: "Singer",
photoLink:
"https://res.cloudinary.com/dp92qug2f/image/upload/v1677786083/posua/manas_sr8oab.jpg",
},
];

return (
<main className="min-h-full min-w-full flex flex-col relative justify-center items-center overflow-hidden mb-[4rem]">
<ArtistAnimation imgUrl={artImg} jaapi={jaapi} text="UPCOMING ARTISTS" />

{/* ************Previous Artist desktop view start1***************** */}
{/* ************Upcoming Artist desktop view start1***************** */}
<div className="mt-[5rem] z-[50] hidden md:block">
<ArtistPageAnimation
first={first}
Expand All @@ -86,16 +127,16 @@ const ArtistPage = () => {
setthird={setthird}
/>
</div>
{/* ************Previous Artist desktop view end1***************** */}
{/* ************Upcoming Artist desktop view end1***************** */}

{/* ************Previous Artist mobile view start2***************** */}
{/* ************Upcoming Artist mobile view start2***************** */}

<div
className="my-[4rem] w-[100%] z-[10] flex justify-center relative items-center md:hidden"
style={{ overflowX: "unset" }}
>
<Swiper spaceBetween={100} slidesPerView={1}>
{prevArtistData.map((profile) => {
{UpArtistData.map((profile) => {
return (
<SwiperSlide key={profile.id}>
{({ isActive }) => (
Expand All @@ -113,49 +154,46 @@ const ArtistPage = () => {
</Swiper>
<div className="flex w-[100%] justify-center items-center absolute bottom-[-2rem] z-[1000]">
<div
className={`${active1 === 1 ? "rounded-l-lg" : "rounded-lg"} w-[.8rem] h-[.8rem] transition-all duration-300 ease-in-out`}
className={`${active1 === 1 ? "rounded-l-lg" : "rounded-lg"} w-[.7rem] h-[.7rem] transition-all duration-300 ease-in-out`}
style={{ backgroundColor: active1 === 1 ? "white" : "#F2C18D" }}
></div>
<div
className="w-[.8rem] h-[.8rem] transition-all duration-300 ease-in-out"
className="w-[.7rem] h-[.7rem] transition-all duration-300 ease-in-out"
style={{ backgroundColor: active1 === 1 ? "white" : "" }}
></div>
<div
className={`transition-all duration-300 ease-in-out ${active1 === 1 ? "rounded-r-lg" : ""} ${active1 === 2 ? "rounded-l-lg" : ""} ${active1 !== 1 && active1 !== 2 ? "rounded-lg" : ""} w-[.8rem] h-[.8rem]`}
className={`transition-all duration-300 ease-in-out ${active1 === 1 ? "rounded-r-lg" : ""} ${active1 === 2 ? "rounded-l-lg" : ""} ${active1 !== 1 && active1 !== 2 ? "rounded-lg" : ""} w-[.7rem] h-[.7rem]`}
style={{
backgroundColor: active1 === 1 || active1 === 2 ? "white" : "#F2C18D",
}}
></div>
<div
className="transition-all duration-300 ease-in-out w-[.8rem] h-[.8rem]"
className="transition-all duration-300 ease-in-out w-[.7rem] h-[.7rem]"
style={{ backgroundColor: active1 === 2 ? "white" : "" }}
></div>
<div
className={`transition-all duration-300 ease-in-out ${active1 === 2 ? "rounded-r-lg" : ""} ${active1 === 3 ? "rounded-l-lg" : ""} ${active1 !== 2 && active1 !== 3 ? "rounded-lg" : ""} w-[.8rem] h-[.8rem]`}
className={`transition-all duration-300 ease-in-out ${active1 === 2 ? "rounded-r-lg" : ""} ${active1 === 3 ? "rounded-l-lg" : ""} ${active1 !== 2 && active1 !== 3 ? "rounded-lg" : ""} w-[.7rem] h-[.7rem]`}
style={{
backgroundColor: active1 === 2 || active1 === 3 ? "white" : "#F2C18D",
}}
></div>
<div
className="transition-all duration-300 ease-in-out w-[.8rem] h-[.8rem]"
className="transition-all duration-300 ease-in-out w-[.7rem] h-[.7rem]"
style={{ backgroundColor: active1 === 3 ? "white" : "" }}
></div>
<div
className={`transition-all duration-300 ease-in-out ${active1 === 3 ? "rounded-r-lg" : "rounded-lg"} w-[.8rem] h-[.8rem]`}
className={`transition-all duration-300 ease-in-out ${active1 === 3 ? "rounded-r-lg" : "rounded-lg"} w-[.7rem] h-[.7rem]`}
style={{ backgroundColor: active1 === 3 ? "white" : "#F2C18D" }}
></div>
</div>
</div>

{/* ************Previous Artist mobile view end2***************** */}
{/* ************Upcoming Artist mobile view end2***************** */}

{/* <div className=" h-[3.5rem] md:h-[7rem] mt-[4rem] mb-[3rem] flex z-[50]">
<img src={artImg2} alt="Art" className="w-full h-full object-cover" />
</div> */}
<ArtistAnimation imgUrl={artImg} jaapi={jaapi} text="PREVIOUS ARTISTS" />

{/* ************Upcoming Artist desktop start***************** */}
<div className="my-[5rem] md:flex gap-[7rem] hidden">
{/* ************Previous Artist desktop start***************** */}
<div className="my-[5rem] md:flex justify-center items-center flex-wrap hidden w-[60%] gap-[8rem]">
{prevArtistData.map((profile) => {
return (
<ArtistCard
Expand All @@ -167,16 +205,16 @@ const ArtistPage = () => {
);
})}
</div>
{/* ************Upcoming Artist desktop end***************** */}
{/* ************Previous Artist desktop end***************** */}

{/* ************Upcoming Artist mobile start***************** */}
{/* ************Previous Artist mobile start***************** */}

<div
className="my-[4rem] w-[100%] z-[10] flex justify-center relative items-center md:hidden"
style={{ overflowX: "unset" }}
>
<Swiper spaceBetween={100} slidesPerView={1}>
{UpArtistData.map((profile) => {
{prevArtistData.map((profile) => {
return (
<SwiperSlide key={profile.id}>
{({ isActive }) => (
Expand All @@ -185,50 +223,116 @@ const ArtistPage = () => {
style={{ overflowX: "unset" }}
>
{isActive ? setActive2(profile.id) : ""}
<ArtistCard photoLink={profile.photoLink} name={profile.name} />
<ArtistCard
photoLink={profile.photoLink}
name={profile.name}
profession={profile.profession}
/>
</div>
)}
</SwiperSlide>
);
})}
</Swiper>
<div className="flex w-[100%] justify-center items-center absolute bottom-[-2rem] z-[1000]">
<div className="flex w-[100%] justify-center items-center absolute bottom-[-2.5rem] z-[1000]">
<div
className={`${active2 === 1 ? "rounded-l-lg" : "rounded-lg"} w-[.8rem] h-[.8rem] transition-all duration-300 ease-in-out`}
className={`${active2 === 1 ? "rounded-l-lg" : "rounded-lg"} w-[.7rem] h-[.7rem] transition-all duration-300 ease-in-out`}
style={{ backgroundColor: active2 === 1 ? "white" : "#F2C18D" }}
></div>
<div
className="w-[.8rem] h-[.8rem] transition-all duration-300 ease-in-out"
className="w-[.7rem] h-[.7rem] transition-all duration-300 ease-in-out"
style={{ backgroundColor: active2 === 1 ? "white" : "" }}
></div>
<div
className={`transition-all duration-300 ease-in-out ${active2 === 1 ? "rounded-r-lg" : ""} ${active2 === 2 ? "rounded-l-lg" : ""} ${active2 !== 1 && active2 !== 2 ? "rounded-lg" : ""} w-[.8rem] h-[.8rem]`}
className={`transition-all duration-300 ease-in-out ${active2 === 1 ? "rounded-r-lg" : ""} ${active2 === 2 ? "rounded-l-lg" : ""} ${active2 !== 1 && active2 !== 2 ? "rounded-lg" : ""} w-[.7rem] h-[.7rem]`}
style={{
backgroundColor: active2 === 1 || active2 === 2 ? "white" : "#F2C18D",
}}
></div>
<div
className="transition-all duration-300 ease-in-out w-[.8rem] h-[.8rem]"
className="transition-all duration-300 ease-in-out w-[.7rem] h-[.7rem]"
style={{ backgroundColor: active2 === 2 ? "white" : "" }}
></div>
<div
className={`transition-all duration-300 ease-in-out ${active2 === 2 ? "rounded-r-lg" : ""} ${active2 === 3 ? "rounded-l-lg" : ""} ${active2 !== 2 && active2 !== 3 ? "rounded-lg" : ""} w-[.8rem] h-[.8rem]`}
className={`transition-all duration-300 ease-in-out ${active2 === 2 ? "rounded-r-lg" : ""} ${active2 === 3 ? "rounded-l-lg" : ""} ${active2 !== 2 && active2 !== 3 ? "rounded-lg" : ""} w-[.7rem] h-[.7rem]`}
style={{
backgroundColor: active2 === 2 || active2 === 3 ? "white" : "#F2C18D",
}}
></div>
<div
className="transition-all duration-300 ease-in-out w-[.8rem] h-[.8rem]"
className="transition-all duration-300 ease-in-out w-[.7rem] h-[.7rem]"
style={{ backgroundColor: active2 === 3 ? "white" : "" }}
></div>
<div
className={`transition-all duration-300 ease-in-out ${active2 === 3 ? "rounded-r-lg" : "rounded-lg"} w-[.8rem] h-[.8rem]`}
style={{ backgroundColor: active2 === 3 ? "white" : "#F2C18D" }}
className={`transition-all duration-300 ease-in-out ${active2 === 3 ? "rounded-r-lg" : ""} ${active2 === 4 ? "rounded-l-lg" : ""} ${active2 !== 3 && active2 !== 4 ? "rounded-lg" : ""} w-[.7rem] h-[.7rem]`}
style={{
backgroundColor: active2 === 3 || active2 === 4 ? "white" : "#F2C18D",
}}
></div>
<div
className="transition-all duration-300 ease-in-out w-[.7rem] h-[.7rem]"
style={{ backgroundColor: active2 === 4 ? "white" : "" }}
></div>
<div
className={`transition-all duration-300 ease-in-out ${active2 === 4 ? "rounded-r-lg" : ""} ${active2 === 5 ? "rounded-l-lg" : ""} ${active2 !== 4 && active2 !== 5 ? "rounded-lg" : ""} w-[.7rem] h-[.7rem]`}
style={{
backgroundColor: active2 === 4 || active2 === 5 ? "white" : "#F2C18D",
}}
></div>
<div
className="transition-all duration-300 ease-in-out w-[.7rem] h-[.7rem]"
style={{ backgroundColor: active2 === 5 ? "white" : "" }}
></div>
<div
className={`transition-all duration-300 ease-in-out ${active2 === 5 ? "rounded-r-lg" : ""} ${active2 === 6 ? "rounded-l-lg" : ""} ${active2 !== 5 && active2 !== 6 ? "rounded-lg" : ""} w-[.7rem] h-[.7rem]`}
style={{
backgroundColor: active2 === 5 || active2 === 6 ? "white" : "#F2C18D",
}}
></div>
<div
className="transition-all duration-300 ease-in-out w-[.7rem] h-[.7rem]"
style={{ backgroundColor: active2 === 6 ? "white" : "" }}
></div>
<div
className={`transition-all duration-300 ease-in-out ${active2 === 6 ? "rounded-r-lg" : ""} ${active2 === 7 ? "rounded-l-lg" : ""} ${active2 !== 6 && active2 !== 7 ? "rounded-lg" : ""} w-[.7rem] h-[.7rem]`}
style={{
backgroundColor: active2 === 6 || active2 === 7 ? "white" : "#F2C18D",
}}
></div>
<div
className="transition-all duration-300 ease-in-out w-[.7rem] h-[.7rem]"
style={{ backgroundColor: active2 === 7 ? "white" : "" }}
></div>
<div
className={`transition-all duration-300 ease-in-out ${active2 === 7 ? "rounded-r-lg" : ""} ${active2 === 8 ? "rounded-l-lg" : ""} ${active2 !== 7 && active2 !== 8 ? "rounded-lg" : ""} w-[.7rem] h-[.7rem]`}
style={{
backgroundColor: active2 === 7 || active2 === 8 ? "white" : "#F2C18D",
}}
></div>
<div
className="transition-all duration-300 ease-in-out w-[.7rem] h-[.7rem]"
style={{ backgroundColor: active2 === 8 ? "white" : "" }}
></div>
<div
className={`transition-all duration-300 ease-in-out ${active2 === 8 ? "rounded-r-lg" : ""} ${active2 === 9 ? "rounded-l-lg" : ""} ${active2 !== 8 && active2 !== 9 ? "rounded-lg" : ""} w-[.7rem] h-[.7rem]`}
style={{
backgroundColor: active2 === 8 || active2 === 9 ? "white" : "#F2C18D",
}}
></div>
<div
className="transition-all duration-300 ease-in-out w-[.7rem] h-[.7rem]"
style={{ backgroundColor: active2 === 9 ? "white" : "" }}
></div>
<div
className={`transition-all duration-300 ease-in-out ${active2 === 9 ? "rounded-r-lg" : "rounded-lg"} w-[.7rem] h-[.7rem]`}
style={{
backgroundColor: active2 === 9 ? "white" : "#F2C18D",
}}
></div>
</div>
</div>

{/* ************Upcoming Artist mobile start***************** */}
{/* ************Previous Artist mobile start***************** */}

{/* *************Flower section start************** */}
<div
Expand Down

0 comments on commit 598e2c1

Please sign in to comment.