Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 66080dbb by jaymehta
Options

.

1 parent eb16a1c2
Inline Side-by-side
Showing 2 changed files with 135 additions and 133 deletions
components/home/BrowseExperiences.js
......@@ -16,156 +16,157 @@ import { useRouter } from "next/router.js";
import WishlistComponent from "../detail/WIshlistComponent.js";
import { useSelector } from "react-redux";
import Link from "next/link.js";
import ActiveLink from "../common/ActiveLink.js";
const BrowseExperiences = ({ allActivitiesData }) => {
const { endUser } = useSelector(state => state.endUser);
const { endUser } = useSelector(state => state.endUser);
const router = useRouter();
const router = useRouter();
return (
<>
<section className="browse-experiences-session">
<div className="container">
<div className="row">
<div className="col-12">
<div className="head-btn">
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="head01">
<div className="title">Browse Experiences</div>
<h2>In New York</h2>
</div>
</motion.div>
<div className="view-all-btn">
<Link href={"/listing"} prefetch>
<Button
variant="primary"
// onClick={() => {
// router.push("/listing");
// }}
>
View All
</Button>
</Link>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-12">
<div className="browse-experiences-carousal position-relative">
<Swiper
slidesPerView={1}
// autoplay={{
// delay: 2500,
// disableOnInteraction: false
// }}
autoHeight={true}
navigation={{ nextEl: ".BrowseExperiences-left", prevEl: ".BrowseExperiences-right" }}
breakpoints={{
640: {
slidesPerView: 1,
spaceBetween: 0
},
768: {
slidesPerView: 2,
spaceBetween: 0
},
1024: {
slidesPerView: 4,
spaceBetween: 0
}
}}
modules={[Navigation, Autoplay]}
className="mySwiper01 mySwiper02"
>
{allActivitiesData &&
allActivitiesData.data.map(data => {
return (
<SwiperSlide key={data?.id}>
<motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="browse-experiences-item">
<a href="/detail" className="img-wrapper">
<span className="image-container">
<img layout="fill" alt="" className="image img-fluid" src={cleanImage(data.attributes?.image?.data?.attributes)} />
</span>
{/* <div className="top-rated">Top Rated</div> */}
</a>
<div className="info">
<div className="top-name">
<div className="title">{data?.attributes?.name}</div>
<div className="rating-wishlist">
{/* <div className="rating">
return (
<>
<section className="browse-experiences-session">
<div className="container">
<div className="row">
<div className="col-12">
<div className="head-btn">
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="head01">
<div className="title">Browse Experiences</div>
<h2>In New York</h2>
</div>
</motion.div>
<div className="view-all-btn">
<ActiveLink href={"/listing"} prefetch>
<Button
variant="primary"
// onClick={() => {
// router.push("/listing");
// }}
>
View All
</Button>
</ActiveLink>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-12">
<div className="browse-experiences-carousal position-relative">
<Swiper
slidesPerView={1}
// autoplay={{
// delay: 2500,
// disableOnInteraction: false
// }}
autoHeight={true}
navigation={{ nextEl: ".BrowseExperiences-left", prevEl: ".BrowseExperiences-right" }}
breakpoints={{
640: {
slidesPerView: 1,
spaceBetween: 0
},
768: {
slidesPerView: 2,
spaceBetween: 0
},
1024: {
slidesPerView: 4,
spaceBetween: 0
}
}}
modules={[Navigation, Autoplay]}
className="mySwiper01 mySwiper02"
>
{allActivitiesData &&
allActivitiesData.data.map(data => {
return (
<SwiperSlide key={data?.id}>
<motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="browse-experiences-item">
<a href="/detail" className="img-wrapper">
<span className="image-container">
<img layout="fill" alt="" className="image img-fluid" src={cleanImage(data.attributes?.image?.data?.attributes)} />
</span>
{/* <div className="top-rated">Top Rated</div> */}
</a>
<div className="info">
<div className="top-name">
<div className="title">{data?.attributes?.name}</div>
<div className="rating-wishlist">
{/* <div className="rating">
<span className="number">{data?.attributes?.rating}</span>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
</div> */}
<div className="wishlist">
{endUser && <WishlistComponent activityId={data.id} userId={endUser.id} />}
{/* <span className="image-container">
<div className="wishlist">
{endUser && <WishlistComponent activityId={data.id} userId={endUser.id} />}
{/* <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/wishlist.svg" />
</span> */}
</div>
</div>
</div>
<div className="discription">
<span>{data?.attributes?.description}</span>
{/* <a href="/detail">Read More</a> */}
</div>
<div className="price">
${data?.attributes?.pricePerPerson}
{/* <span className="off">{data?.attributes?.off}% OFF</span> */}
</div>
<div className="detail">
{/* <div className="">For 1 Night</div> */}
<div className="">Includes taxes & Fees</div>
</div>
<div className="explore-now">
<Link href={`/activities/${data.id}`} prefetch>
<Button
// onClick={() => {
// router.push(`/activities/${data.id}`);
// }}
variant="primary"
>
Explore Now
</Button>
</Link>
</div>
</div>
</div>
</motion.div>
</SwiperSlide>
);
})}
</Swiper>
<div className="swiper-nav">
<div className="navbutton d-flex justify-content-between ">
<button className="BrowseExperiences-right arrow" id="BrowseExperiences-right" aria-label="BrowseExperiences-right">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
</span>
</button>
<button className="BrowseExperiences-left arrow" id="BrowseExperiences-left" aria-label="BrowseExperiences-left">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
</span>
</button>
</div>
</div>
</div>
<div className="discription">
<span>{data?.attributes?.description}</span>
{/* <a href="/detail">Read More</a> */}
</div>
<div className="price">
${data?.attributes?.pricePerPerson}
{/* <span className="off">{data?.attributes?.off}% OFF</span> */}
</div>
<div className="detail">
{/* <div className="">For 1 Night</div> */}
<div className="">Includes taxes & Fees</div>
</div>
<div className="explore-now">
<ActiveLink href={`/activities/${data.id}`} prefetch>
<Button
// onClick={() => {
// router.push(`/activities/${data.id}`);
// }}
variant="primary"
>
Explore Now
</Button>
</ActiveLink>
</div>
</div>
</div>
</div>
</div>
{/* <div className="row">
</motion.div>
</SwiperSlide>
);
})}
</Swiper>
<div className="swiper-nav">
<div className="navbutton d-flex justify-content-between ">
<button className="BrowseExperiences-right arrow" id="BrowseExperiences-right" aria-label="BrowseExperiences-right">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
</span>
</button>
<button className="BrowseExperiences-left arrow" id="BrowseExperiences-left" aria-label="BrowseExperiences-left">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
</span>
</button>
</div>
</div>
</div>
</div>
</div>
{/* <div className="row">
<div className="col-12">
<div className="btn-center">
<Button variant="outline-secondary">Sign In for Member Price</Button>
</div>
</div>
</div> */}
</div>
</section>
</>
);
</div>
</section>
</>
);
};
export default BrowseExperiences;
components/home/LetDiscover.js
......@@ -14,6 +14,7 @@ import "swiper/css/navigation";
import { cleanImage } from "../../services/imageHandling.js";
import { useRouter } from "next/router.js";
import Link from "next/link.js";
import ActiveLink from "../common/ActiveLink.js";
const LetDiscover = ({ categories }) => {
const router = useRouter();
return (
......@@ -33,7 +34,7 @@ const LetDiscover = ({ categories }) => {
</div>
</motion.div>
<div className="view-all-btn">
<Link href={"/listing"} prefetch>
<ActiveLink href={"/listing"} prefetch>
<Button
// onClick={() => {
// router.push("/listing");
......@@ -42,7 +43,7 @@ const LetDiscover = ({ categories }) => {
>
View All
</Button>
</Link>
</ActiveLink>
</div>
</div>
</div>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!