Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 978f65f9 by Ravindra Kanojiya
Options

updated listing filter

1 parent e5c83327
Inline Side-by-side
Showing 9 changed files with 230 additions and 101 deletions
components/home/LetDiscover.js
......@@ -30,7 +30,7 @@ const LetDiscover = ({ categories }) => {
</div>
</motion.div>
<div className="view-all-btn">
<Button variant="primary">View All</Button>
<Button href="/listing" variant="primary">View All</Button>
</div>
</div>
</div>
......
components/listing/LetDiscover.js
import Image from "next/image";
import React from "react";
import {fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import React, { useState } from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { Button } from "react-bootstrap";
import { Swiper, SwiperSlide } from "swiper/react";
......@@ -12,6 +12,16 @@ import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
const LetDiscover = () => {
const [activeIndex, setActiveIndex] = useState(null);
const handleTitleClick = (index) => {
// Check if the clicked index is already active
if (activeIndex === index) {
return; // Do nothing if it's already active
}
// Toggle the active index if it's different from the clicked index
setActiveIndex(index);
};
const letDiscoverData = [
{
image: "/images/discover/01.png",
......@@ -54,6 +64,39 @@ const LetDiscover = () => {
title: "Wellness"
}
];
const [showCloseIcon, setShowCloseIcon] = useState({});
const handleToggleCloseIcon = index => {
setShowCloseIcon(prevShowCloseIcon => ({
...prevShowCloseIcon,
[index]: !prevShowCloseIcon[index]
}));
};
const subCategoriesData = [
{
name: "Boat"
},
{
name: "Games"
},
{
name: "Helicopter"
},
{
name: "Ice-skating"
},
{
name: "Jet-skiing"
},
{
name: "Kayaking"
},
{
name: "Park"
},
{
name: "Rooftop"
}
];
return (
<>
<section className="let-discover-session let-discover-listing-session">
......@@ -70,7 +113,6 @@ const LetDiscover = () => {
<h2>Discover</h2>
</div>
</motion.div>
</div>
</div>
</div>
......@@ -104,15 +146,12 @@ const LetDiscover = () => {
>
{letDiscoverData &&
letDiscoverData.map((data, index) => {
const isActive = activeIndex === index;
return (
<SwiperSlide>
<motion.div
variants={zoomIn("left", 0.3)}
initial={"hidden"}
whileInView={"show"}
viewport={{ once: false, amount: 0.2 }}
>
<a href="">
<motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<a className={isActive ? "active" : ""}
onClick={() => handleTitleClick(index)}>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={data.image} />
</span>
......@@ -140,6 +179,23 @@ const LetDiscover = () => {
</div>
</div>
</div>
<div className="row">
<div className="col-12">
<div className="sub-categories">
{subCategoriesData &&
subCategoriesData.map((data, index) => (
<a key={index} onClick={() => handleToggleCloseIcon(index)}>
<span>{data.name}</span>
{showCloseIcon[index] && (
<span className="image-container">
<Image layout="fill" alt="image" className="image" src="/images/icons/close-button.svg" />
</span>
)}
</a>
))}
</div>
</div>
</div>
</div>
</section>
</>
......
components/listing/Listing.js
......@@ -2,13 +2,17 @@ import React, { Fragment } from "react";
import ListingInner from "./ListingInner";
import SignUpToExperienceOurPlatform from "../home/SignUpToExperienceOurPlatform";
import LetDiscover from "./LetDiscover";
import { useSelector } from "react-redux";
const Listing = () => {
const { allActivitiesData } = useSelector(sate => sate.allActivitiesData);
console.log("allActivitiesData >>>> 123", allActivitiesData)
return (
<Fragment>
<main>
<LetDiscover />
<ListingInner />
<ListingInner allActivitiesData={allActivitiesData} />
<SignUpToExperienceOurPlatform />
</main>
</Fragment>
......
components/listing/ListingFilter.js
import Image from "next/image";
import React, { useState } from "react";
import { Accordion, Form } from "react-bootstrap";
// import upArrow from "./assets/up-arrow.png";
// import downArrow from "./assets/down-arrow.png";
import upArrow from "../../public/images/icons/up-s.svg";
// import downArrow from "../images/icons/down-s.svg";
import downArrow from "../../public/images/icons/down-s.svg";
import { Slider } from "antd";
import { DatePicker, Space } from "antd";
const ListingFilter = () => {
const [showContent, setShowContent] = useState(false);
......@@ -14,7 +10,9 @@ const ListingFilter = () => {
const toggleContent = () => {
setShowContent(!showContent);
};
const onChange = (date, dateString) => {
console.log(date, dateString);
};
return (
<>
<div className="listing-filter">
......@@ -36,9 +34,26 @@ const ListingFilter = () => {
<div className="head">Your Budget</div>
</div>
<div className="inner">
<div className="price">$200 - $5000+</div>
<div className="price">
$200 - $5000+ <span className="sub-text">Average price is $5000</span>
</div>
<div className="graph">
<img className="img-fluid w-100" src="/images/buget.svg" />
<Slider
range={{
draggableTrack: true
}}
defaultValue={[200, 5000]}
min={200}
max={5000}
tooltip={{
open: true
}}
/>
<div className="graph-price">
<div className="min">$200</div>
<div className="min">$5000</div>
</div>
{/* <img className="img-fluid w-100" src="/images/buget.svg" /> */}
</div>
</div>
</div>
......@@ -253,7 +268,7 @@ const ListingFilter = () => {
</div>
</div>
</div>
<div className="box-01">
{/* <div className="box-01">
<div className="p-all">
<div className="head">Rating:</div>
</div>
......@@ -274,8 +289,8 @@ const ListingFilter = () => {
</label>
</div>
</div>
</div>
<div className="box-01">
</div> */}
{/* <div className="box-01">
<div className="p-all">
<div className="head">Months:</div>
</div>
......@@ -289,8 +304,8 @@ const ListingFilter = () => {
</Form.Select>
</div>
</div>
</div>
<div className="box-01">
</div> */}
{/* <div className="box-01">
<div className="p-all">
<div className="head">Days</div>
</div>
......@@ -311,6 +326,27 @@ const ListingFilter = () => {
</label>
</div>
</div>
</div> */}
<div className="box-01">
<div className="p-all">
<div className="head">Date</div>
</div>
<div className="inner">
<div className="row">
<div className="col-6">
<div>From</div>
<Space direction="vertical">
<DatePicker onChange={onChange} />
</Space>
</div>
<div className="col-6">
<div>To</div>
<Space direction="vertical">
<DatePicker onChange={onChange} />
</Space>
</div>
</div>
</div>
</div>
<div className="box-01">
<div className="p-all">
......
components/listing/ListingInner.js
......@@ -3,7 +3,8 @@ import ListingFilter from "./ListingFilter";
import ListingItems from "./ListingItems";
import Image from "next/image";
const ListingInner = () => {
const ListingInner = ({allActivitiesData}) => {
console.log("allActivitiesData >>>>>", allActivitiesData)
const [isFilterViewOpen, setIsFilterViewOpen] = useState(false);
const [isGridViewOpen, setIsGridViewOpen] = useState(false);
const [isOpen, setIsOpen] = useState(false);
......@@ -36,10 +37,13 @@ const ListingInner = () => {
};
}, []);
return (
<>
<section className="listing-inner-session">
<div className="container-fluid">
<div className="row">
<div className="col-12">
<div className="filter-dd">
......@@ -133,11 +137,10 @@ const ListingInner = () => {
</div>
</div>
</div>
</div>
</div>
<div className="row ">
{ (isFilterViewOpen || size > 768) && (
{(isFilterViewOpen || size > 768) && (
<>
<div className={`col-md-3 first-block-content ${isFilterViewOpen ? "show" : ""}`}>
<ListingFilter />
......@@ -146,7 +149,7 @@ const ListingInner = () => {
)}
<div className="col-md-9">
<ListingItems />
<ListingItems allActivitiesData={allActivitiesData} />
</div>
</div>
</div>
......
components/listing/ListingItems.js
import Image from "next/image";
import React from "react";
import { Button } from "react-bootstrap";
import { cleanImage } from "../../services/imageHandling";
const ListingItems = () => {
const ListingData = [
{
image: "/images/Browse-Experiences/01.png",
topRated: "Top Rated",
title: "City Climb",
discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees"
},
{
image: "/images/Browse-Experiences/02.png",
topRated: "Top Rated",
title: "City Climb",
discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees"
},
{
image: "/images/Browse-Experiences/03.png",
topRated: "Top Rated",
title: "City Climb",
discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees"
},
{
image: "/images/Browse-Experiences/04.png",
topRated: "Top Rated",
title: "City Climb",
discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees"
},
{
image: "/images/Browse-Experiences/01.png",
topRated: "Top Rated",
title: "City Climb",
discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees"
}
];
const ListingItems = ({allActivitiesData}) => {
console.log("allActivitiesData",allActivitiesData )
return (
<>
<div className="listing-items">
<div className="row">
{ListingData &&
ListingData.map(data => {
{allActivitiesData.data &&
allActivitiesData.data.map(data => {
return (
<div className="col-md-3">
<div className="item">
<div className="browse-experiences-item">
<div className="img-wrapper">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={data.image} />
<Image layout="fill" alt="" className="image img-fluid" src={cleanImage(data.attributes?.image?.data?.attributes)} />
</span>
<div className="top-rated">{data.topRated}</div>
<div className="top-rated">Top Rated</div>
</div>
<div className="info">
<div className="top-name">
<div className="title">{data.title}</div>
<div className="title">{data?.attributes?.name}</div>
<div className="rating-wishlist">
<div className="rating">
8.8
{data?.attributes?.rating}
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
......@@ -92,14 +42,14 @@ const ListingItems = () => {
{data.discription} <a href="">Read More</a>
</div>
<div className="price">
${data.price} <span className="off">{data.offPrice} OFF</span>
${data?.attributes?.pricePerPerson} <span className="off">{data?.attributes?.off}% OFF</span>
</div>
<div className="detail">
<div className="">{data.days}</div>
<div className="">{data.taxes}</div>
<div className="">For 1 Night</div>
<div className="">Includes taxes & Fees</div>
</div>
<div className="explore-now">
<Button href="/detail" variant="primary">Explore Now</Button>
<Button href="/listing" variant="primary">Explore Now</Button>
</div>
</div>
</div>
......
pages/listing.js
import Home from "../components/home/Home";
import Layout from "../components/layout/Layout";
import Listing from "../components/listing/Listing";
import { getActivitiesByVendor } from "../redux/actions/activityAction";
import { wrapper } from "../redux/store";
export default function ListingPage() {
......@@ -22,13 +22,20 @@ export default function ListingPage() {
/** For server side rendering */
export const getStaticProps = wrapper.getStaticProps(store => async ({ req, query }) => {
// Get the menu data.
// get the locations data.
try {
await store.dispatch(getActivitiesByVendor())
return {
props: {},
// Next.js will attempt to re-generate the page:
// - Any requests to the page after the initial request and before 10 seconds are also cached and instantaneous.
// - After the 10-second window, the next request will still show the cached (stale) page
// - Next.js triggers a regeneration of the page in the background.
// - Once the page generates successfully, Next.js will invalidate the cache and show the updated page. If the background regeneration fails, the old page would still be unaltered.
// In seconds
// revalidate: Number(process.env.NEXT_PUBLIC_ISR_REVALIDATE_AFTER)
};
} catch (error) {
console.log("index.js", error);
}
});
public/images/icons/close-button.svg 0 → 100644
<svg width="23" height="23" xmlns="http://www.w3.org/2000/svg"><g transform="rotate(45 19.63172804 8.13172796)" fill="none" fill-rule="evenodd"><circle fill="#1E1D24" transform="rotate(45 16.263456 16.263456)" cx="16.263456" cy="16.263456" r="11.5"/><path stroke="#FCFCFF" stroke-width="2" stroke-linecap="round" d="M16.263456 11.663456v9.2M20.863456 16.263456h-9.2"/></g></svg>
styles/globals.css
......@@ -1832,8 +1832,9 @@ span.form-error,
/*--------------------------*/
.let-discover-carousal a {
color: #000;
color: #808080;
text-align: center;
cursor: pointer;
}
.let-discover-carousal a .image{
padding: 0.2rem !important;
......@@ -1842,7 +1843,12 @@ span.form-error,
.let-discover-carousal a .title {
padding: 1rem;
}
.let-discover-carousal a.active{
color: #000;
}
.let-discover-carousal a.active .title{
text-decoration: underline;
}
.carousal-c {
padding: 0 4rem;
}
......@@ -2735,6 +2741,72 @@ footer hr {
width: 33px !important;
height: 33px !important;
}
.sub-categories{
display: flex;
align-items: center;
}
.sub-categories a{
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
margin-left: 1rem;
border: 1px solid #000;
border-radius: 2rem;
height: 2.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
transition-property: all;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s;
}
.sub-categories a .image-container{
width: 20px;
display: inline-block;
margin-left: 0.5rem;
margin-right: -0.8rem;
}
.graph{
padding-top: 3rem;
}
.graph .graph-price{
display: flex;
align-items: center;
justify-content: space-between;
color: #808080;
}
:where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-inner {
padding: 5px 8px;
color: #808080;
background-color: transparent;
}
:where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-arrow:before {
background: transparent;
}
:where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-arrow::after {
box-shadow: 1px 1px 6px #c1c1c1;
}
.graph :where(.css-dev-only-do-not-override-1kuana8).ant-slider:hover .ant-slider-track {
background-color: #0070BD;
}
.graph :where(.css-dev-only-do-not-override-1kuana8).ant-slider .ant-slider-handle::after {
background-color: #0070BD;
box-shadow: 0 0 0 2px #0070BD;
}
.graph :where(.css-dev-only-do-not-override-1kuana8).ant-slider .ant-slider-rail {
background-color: #A1A1A1;
}
.graph :where(.css-dev-only-do-not-override-1kuana8).ant-slider .ant-slider-track {
background-color: #0070BD;
}
.box-01 .inner .price .sub-text{
color: #D1D1D1;
}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!