Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit ae91847a by jaymehta
Options

conflict

2 parents a3148dbd 9a12bc7f
Expand all
Inline Side-by-side
Showing 68 changed files with 620 additions and 339 deletions
components/blog-details/BlogDetails.js
......@@ -2,12 +2,14 @@ import React from 'react'
import PageBanner from './PageBanner'
import BlogsDetailInner from './BlogsDetailInner'
import MostReadBlogs from './MostReadBlogs'
import { useDispatch, useSelector } from "react-redux";
const BlogDetails = () => {
const { blog } = useSelector(state => state.blog);
console.log("blog >>>>>", blog)
return (
<>
<PageBanner />
<BlogsDetailInner />
<PageBanner blog={blog} />
<BlogsDetailInner blog={blog}/>
<MostReadBlogs />
</>
)
......
components/blog-details/BlogsDetailInner.js
import Image from 'next/image'
import React from 'react'
import Image from "next/image";
import React from "react";
import { cleanImage } from "../../services/imageHandling";
const BlogsDetailInner = () => {
const BlogsDetailInner = ({ blog }) => {
let mainBlog;
if (blog && blog.length > 0) {
mainBlog = blog[0];
}
console.log("mainBlog", blog)
return (
<section className='blog-detail-inner-session'>
<div className='container'>
<div className='row align-items-center mb-3'>
<div className='col-md-6'>
<div className='profile'>
<span className='image-container'>
<Image layout='fill' alt='' className='image img-fluid' src="/images/blog-pic.png" />
</span>
<div className='name'>By John Smith</div>
</div>
</div>
<div className='col-md-6'>
<div className='date'>
<span className='image-container'>
<Image layout='fill' alt='' className='image img-fluid' src="/images/icons/calendar.svg" />
</span>
<div className=''>27th Jan 2024</div>
</div>
</div>
<section className="blog-detail-inner-session">
<div className="container">
<div className="row align-items-center mb-3">
<div className="col-md-6">
<div className="profile">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={cleanImage(mainBlog?.attributes?.profilePic?.data?.attributes)} />
</span>
<div className="name">{mainBlog?.attributes?.name}</div>
</div>
<div className='row'>
<div className='col-12'>
<ul className='flag-list'>
<li>
<a href="">Adventure</a>
</li>
<li>
<a href="">Fun</a>
</li>
<li>
<a href="">Lorem Ipsum</a>
</li>
</ul>
</div>
</div>
<div className="col-md-6">
<div className="date">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/calendar.svg" />
</span>
<div className="">{mainBlog?.attributes?.date}</div>
</div>
<div className='row'>
<div className='col-12'>
<h2>13 MOST Unique Places to Stay in Washington State</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p>
</div>
</div>
<div className="row">
<div className="col-12">
<ul className="flag-list">
<li>
<a href="">{mainBlog?.attributes?.categories}</a>
</li>
<li>
<a href="">Fun</a>
</li>
<li>
<a href="">Lorem Ipsum</a>
</li>
</ul>
</div>
</div>
<div className="row">
<div className="col-12">
<h2>{mainBlog?.attributes?.title}</h2>
<div dangerouslySetInnerHTML={{__html: mainBlog?.attributes?.description}}></div>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>
</div>
</div>
</div>
</div>
</div>
</section>
)
}
);
};
export default BlogsDetailInner
export default BlogsDetailInner;
components/blog-details/MostReadBlogs.js
......@@ -10,7 +10,7 @@ import { Navigation, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { BlogData } from "../blogs/BlogsItem.js";
import { BlogData } from "../blog/BlogItem.js";
import Image from "next/image.js";
const MostReadBlogs = () => {
return (
......
components/blog-details/PageBanner.js
......@@ -2,13 +2,19 @@ import Image from "next/image";
import React from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
const PageBanner = () => {
import { cleanImage } from "../../services/imageHandling.js";
const PageBanner = ({blog}) => {
let mainBlog;
if (blog && blog.length > 0) {
mainBlog = blog[0];
}
console.log("123", mainBlog)
return (
<>
<div className="page-title-area">
<div className="banner-bg">
<span className="image-container hide-on-mobile">
<Image layout="fill" className="image img-fluid" alt="" src="/images/blogs/01.png" />
<Image layout="fill" className="image img-fluid" alt="" src={cleanImage(mainBlog?.attributes?.image?.data?.attributes)} />
</span>
<span className="image-container hide-on-desktop">
<Image layout="fill" className="image img-fluid" alt="" src="/images/blogs/01.png" />
......
components/blogs/Blogs.js → components/blog/Blog.js
import React from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
import BlogsItem from "./BlogsItem.js";
import BlogsItem from "./BlogItem.js";
import PageBanner from "./PageBanner.js";
const Blogs = () => {
import { useDispatch, useSelector } from "react-redux";
const Blog = () => {
const { blogs } = useSelector(state => state.blogs);
console.log("blogs", blogs)
return (
<>
<PageBanner />
<BlogsItem />
<BlogsItem blogs={blogs} />
</>
);
};
export default Blogs;
export default Blog;
components/blogs/BlogsItem.js → components/blog/BlogItem.js
......@@ -3,6 +3,7 @@ import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvaria
import { motion } from "framer-motion";
import Image from "next/image.js";
import { Accordion, Button, Form } from "react-bootstrap";
import { cleanImage } from "../../services/imageHandling.js";
export const BlogData = [
{
image: "/images/blogs/01.png",
......@@ -48,7 +49,7 @@ export const BlogData = [
}
];
const BlogsItem = () => {
const BlogsItem = ({blogs}) => {
const [showContent, setShowContent] = useState(false);
const [isGridViewOpen, setIsGridViewOpen] = useState(false);
const [isOpen, setIsOpen] = useState(false);
......@@ -298,28 +299,28 @@ const BlogsItem = () => {
<div className="row">
<div className="col-12">
<div className="row">
{BlogData &&
BlogData.map(data => {
{blogs &&
blogs.map(data => {
return (
<div className="col-md-4">
<div className="blog-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.flag}</div>
<div className="top-rated">{data?.attributes?.categories}</div>
</div>
<div className="info">
<div className="read-row">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/clock.svg" />
</span>
<div className="">{data.read}</div>
<div className="">{data?.attributes?.read} Read</div>
</div>
<div className="title">{data.title}</div>
<div className="discription">{data.discription}</div>
<div className="title">{data?.attributes?.title}</div>
<div className="discription" dangerouslySetInnerHTML={{ __html: data?.attributes?.description }}></div>
<div className="read-more">
<Button href="/blog-details" variant="primary">
<Button href={`/blog/${data.attributes.slug}`} variant="primary">
Read More
</Button>
</div>
......
components/home/BrowseExperiences.js
......@@ -11,65 +11,10 @@ import { motion } from "framer-motion";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
const BrowseExperiences = () => {
import { cleanImage } from "../../services/imageHandling.js";
const BrowseExperiences = ({allActivitiesData}) => {
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",
id: 1,
},
{
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",
id: 2,
},
{
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",
id: 3,
},
{
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",
id: 4,
},
{
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",
id: 5,
}
];
return (
<>
......@@ -118,8 +63,8 @@ const BrowseExperiences = () => {
modules={[Navigation, Autoplay]}
className="mySwiper01 mySwiper02"
>
{ListingData &&
ListingData.map(data => {
{allActivitiesData.data &&
allActivitiesData.data.map(data => {
return (
<SwiperSlide key={data?.id}>
<motion.div
......@@ -129,18 +74,18 @@ const BrowseExperiences = () => {
viewport={{ once: false, amount: 0.2 }}
>
<div className="browse-experiences-item">
<div className="img-wrapper">
<a href="/detail" 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>
<div className="top-rated">Top Rated</div>
</a>
<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>
......@@ -153,17 +98,17 @@ const BrowseExperiences = () => {
</div>
</div>
<div className="discription">
{data.discription} <a href="">Read More</a>
<span>{data?.attributes?.description}</span> <a href="/detail">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="/listing" variant="primary">Explore Now</Button>
<Button href="/detail" variant="primary">Explore Now</Button>
</div>
</div>
</div>
......@@ -174,12 +119,12 @@ const BrowseExperiences = () => {
</Swiper>
<div className="swiper-nav">
<div className="navbutton d-flex justify-content-between ">
<button className="BrowseExperiences-right arrow">
<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">
<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>
......
components/home/GiftAnExperience.js
......@@ -26,7 +26,7 @@ const GiftAnExperience = () => {
<div className="col-md-6">
<div className="img">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/gift-card.png" />
<Image layout="fill" alt="" className="image img-fluid" src="/images/gift-card.webp" />
</span>
</div>
</div>
......
components/home/Home.js
......@@ -11,8 +11,12 @@ import { useDispatch, useSelector } from "react-redux";
const Home = () => {
const { categories } = useSelector(state => state.categories);
const { testimonial } = useSelector(sate => sate.testimonial);
console.log("categories", categories )
console.log("testimonial", testimonial )
const { allActivitiesData } = useSelector(sate => sate.allActivitiesData);
const { homeBanner } = useSelector(state => state.homeBanner);
console.log("homeBanner", homeBanner);
console.log("categories", categories);
console.log("testimonial", testimonial);
console.log("allActivitiesData", allActivitiesData);
const dispatch = useDispatch();
useEffect(() => {
// dispatch(getHomePage())
......@@ -20,13 +24,13 @@ const Home = () => {
return (
<Fragment>
<main>
<Banner />
<SearchBar />
<LetDiscover categories={categories} />
<BrowseExperiences />
<GiftAnExperience />
<Testimonial testimonial={testimonial} />
<SignUpToExperienceOurPlatform />
<Banner homeBanner={homeBanner} />
<SearchBar />
<LetDiscover categories={categories} />
<BrowseExperiences allActivitiesData={allActivitiesData} />
<GiftAnExperience />
<Testimonial testimonial={testimonial} />
<SignUpToExperienceOurPlatform />
</main>
</Fragment>
);
......
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/home/Testimonial.js
......@@ -101,12 +101,12 @@ const Testimonial = ({ testimonial }) => {
</Swiper>
<div className="swiper-nav">
<div className="navbutton d-flex justify-content-between justify-content-md-between ">
<button className="testimonial-arrow-right arrow">
<button className="testimonial-arrow-right arrow" id="testimonial-arrow-right" aria-label="testimonial-arrow-right">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
</span>
</button>
<button className="testimonial-arrow-left arrow">
<button className="testimonial-arrow-left arrow" id="testimonial-arrow-left" aria-label="testimonial-arrow-left">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
</span>
......
components/layout/Layout.js
......@@ -7,7 +7,7 @@ import "react-toastify/dist/ReactToastify.css";
import { loadUser } from "../../redux/actions/userActions";
import { useDispatch, useSelector } from "react-redux";
const Layout = ({ children, title = "Zango", description = "" }) => {
const Layout = ({ children, title = "Zango", description = "Zango" }) => {
const dispatch = useDispatch();
useEffect(() => {
dispatch(loadUser());
......
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">
......@@ -64,13 +107,12 @@ const LetDiscover = () => {
your text or div will come here
</motion.div> */}
<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">Let’s </div>
<h2>Discover</h2>
</div>
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="head01">
<div className="title">Let’s </div>
<h2>Discover</h2>
</div>
</motion.div>
</div>
</div>
</div>
......@@ -104,21 +146,18 @@ 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="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={data.image} />
</span>
<div className="title">{data.title}</div>
</a>
</motion.div>
<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>
<div className="title">{data.title}</div>
</a>
</motion.div>
</SwiperSlide>
);
})}
......@@ -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,11 +3,12 @@ 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);
const [size, setSize] = useState(768);
const toggleGridViewDropdown = () => {
setIsGridViewOpen(!isGridViewOpen);
......@@ -35,15 +36,18 @@ const ListingInner = () => {
window.removeEventListener("resize", handleResize);
};
}, []);
return (
<>
<section className="listing-inner-session">
<div className="container-fluid">
<div className="row">
<div className="col-12">
<div className="filter-dd">
<div className="filter-view box-inner">
<div className="filter-view box-inner">
<a onClick={toggleFilterViewDropdown}>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/filter-view.svg" />
......@@ -133,20 +137,19 @@ const ListingInner = () => {
</div>
</div>
</div>
</div>
</div>
<div className="row ">
{ (isFilterViewOpen || size > 768) && (
<>
<div className={`col-md-3 first-block-content ${isFilterViewOpen ? "show" : ""}`}>
<ListingFilter />
</div>
</>
)}
{(isFilterViewOpen || size > 768) && (
<>
<div className={`col-md-3 first-block-content ${isFilterViewOpen ? "show" : ""}`}>
<ListingFilter />
</div>
</>
)}
<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} />
</span>
<div className="top-rated">{data.topRated}</div>
</div>
<div className="info">
<div className="top-name">
<div className="title">{data.title}</div>
<div className="rating-wishlist">
<div className="rating">
8.8
<div className="browse-experiences-item">
<div className="img-wrapper">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
<Image layout="fill" alt="" className="image img-fluid" src={cleanImage(data.attributes?.image?.data?.attributes)} />
</span>
<div className="top-rated">Top Rated</div>
</div>
<div className="wishlist">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/wishlist.svg" />
</span>
<div className="info">
<div className="top-name">
<div className="title">{data?.attributes?.name}</div>
<div className="rating-wishlist">
<div className="rating">
{data?.attributes?.rating}
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
</div>
<div className="wishlist">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/wishlist.svg" />
</span>
</div>
</div>
</div>
<div className="discription">
{data.discription} <a href="">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">
<Button href="/listing" variant="primary">Explore Now</Button>
</div>
</div>
</div>
</div>
<div className="discription">
{data.discription} <a href="">Read More</a>
</div>
<div className="price">
${data.price} <span className="off">{data.offPrice} OFF</span>
</div>
<div className="detail">
<div className="">{data.days}</div>
<div className="">{data.taxes}</div>
</div>
<div className="explore-now">
<Button href="/detail" variant="primary">Explore Now</Button>
</div>
</div>
</div>
</div>
</div>
);
......
components/user/MyWhishList.js
......@@ -94,7 +94,7 @@ const MyWhishList = () => {
<p className="other">{data.other}</p>
</div>
<div className="card-booking-footer pt-0">
<Button type="button" className="btn btn-primary btn-explore">
<Button id="exploreNow" aria-label="Explore Now" type="button" className="btn btn-primary btn-explore">
Explore Now
</Button>
</div>
......
pages/blog-details.js deleted 100644 → 0
import AboutUs from "../components/about-us/AboutUs";
import BlogDetails from "../components/blog-details/BlogDetails";
import Blogs from "../components/blogs/Blogs";
import Home from "../components/home/Home";
import Layout from "../components/layout/Layout";
import { loadUser } from "../redux/actions/userActions";
import { wrapper } from "../redux/store";
export default function BlogDetailsPage() {
return (
<Layout>
<BlogDetails />
</Layout>
);
}
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
// Get the menu data.
// get the locations data.
// await store.dispatch(loadUser())
return {
props: {},
};
});
pages/blog.js
import AboutUs from "../components/about-us/AboutUs";
import Blogs from "../components/blogs/Blogs";
import Blog from "../components/blog/Blog";
import Home from "../components/home/Home";
import Layout from "../components/layout/Layout";
import { getBlogData, getBlogsData } from "../redux/actions/blogAction";
import { loadUser } from "../redux/actions/userActions";
import { wrapper } from "../redux/store";
......@@ -9,20 +10,28 @@ export default function BlogsPage() {
return (
<Layout>
<Blogs />
<Blog />
</Layout>
);
}
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
// Get the menu data.
// get the locations data.
// await store.dispatch(loadUser())
try {
await store.dispatch(getBlogsData())
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);
}
});
pages/blog/[slug].js 0 → 100644
import BlogDetails from "../../components/blog-details/BlogDetails";
import Layout from "../../components/layout/Layout";
import { getBlogData } from "../../redux/actions/blogAction";
import { wrapper } from "../../redux/store";
export default function BlogDetailsPage() {
return (
<Layout>
<BlogDetails />
</Layout>
);
}
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
try {
console.log("query", query);
await store.dispatch(getBlogData(query.slug))
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);
}
});
pages/index.js
import Home from "../components/home/Home";
import Layout from "../components/layout/Layout";
import { getActivitiesByVendor } from "../redux/actions/activityAction";
import { getAllCategories } from "../redux/actions/categoriesAction";
import { getHomeBanner } from "../redux/actions/homeBannerAction";
import { getTestimonial } from "../redux/actions/testimonialAction";
import { loadUser } from "../redux/actions/userActions";
import { wrapper } from "../redux/store";
......@@ -27,6 +29,8 @@ export const getServerSideProps = wrapper.getServerSideProps(store => async ({ r
try {
await store.dispatch(getAllCategories())
await store.dispatch(getTestimonial())
await store.dispatch(getActivitiesByVendor())
await store.dispatch(getHomeBanner())
return {
props: {},
......
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/discover/01.webp 0 → 100644
No preview for this file type
public/images/discover/02.webp 0 → 100644
No preview for this file type
public/images/discover/03.webp 0 → 100644
No preview for this file type
public/images/discover/04.webp 0 → 100644
No preview for this file type
public/images/discover/05.webp 0 → 100644
No preview for this file type
public/images/discover/06.webp 0 → 100644
No preview for this file type
public/images/gift-card.webp 0 → 100644
No preview for this file type
public/images/gift-experience-bg-m.webp 0 → 100644
No preview for this file type
public/images/gift-experience-bg.webp 0 → 100644
No preview for this file type
public/images/home-banner/01-m.webp 0 → 100644
No preview for this file type
public/images/home-banner/01.webp 0 → 100644
No preview for this file type
public/images/home-banner/02.webp 0 → 100644
No preview for this file type
public/images/home-banner/03.webp 0 → 100644
No preview for this file type
public/images/home-banner/04.webp 0 → 100644
No preview for this file type
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>
public/images/sign-up-exp-bg-m.webp 0 → 100644
No preview for this file type
public/images/sign-up-exp-bg.webp 0 → 100644
No preview for this file type
redux/actions/activityAction.js
......@@ -102,7 +102,7 @@ export const getActivitiesByVendor = () => async dispatch => {
const query = {
filters: {},
populate: ["subCategory", "subCategory.category", "masterPincode", "vendor"]
populate: ["masterMonths", "subCategory", "subCategory.category", "timeSlots", "masterPincode", "vendor", "image"]
};
const queryString = qs.stringify(query, {
......
redux/actions/blogAction.js 0 → 100644
import axios from "axios";
import qs from "qs";
import { FETCH_BLOGS_FAIL, FETCH_BLOGS_REQUEST, FETCH_BLOGS_SUCCESS, FETCH_BLOG_FAIL, FETCH_BLOG_REQUEST, FETCH_BLOG_SUCCESS } from "../constants/blogConstants";
export const getBlogsData =
() =>
async dispatch => {
try {
console.log("HI >>>>>")
dispatch({
type: FETCH_BLOGS_REQUEST
});
const config = {
headers: {
"Content-Type": "application/json"
}
};
const query = {
// pagination: {
// pageSize: 12,
// page: currentPage
// },
filters: {
category: {
name: {}
}
},
populate: ["image"],
sort: ["updatedAt:desc"]
// pagination: {}
// pageSize: -1,
};
const queryString = qs.stringify(query, {
encodeValuesOnly: true
});
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/blogs/?${queryString}`);
dispatch({
// type: published ? PUBLISHED_ROOMS_SUCCESS : ADMIN_ROOMS_SUCCESS,
type: FETCH_BLOGS_SUCCESS,
payload: response.data
});
} catch (error) {
dispatch({
// type: published ? PUBLISHED_ROOMS_FAIL : ADMIN_ROOMS_FAIL,
type: FETCH_BLOGS_FAIL,
payload: error.response.data
});
}
};
export const getBlogData = slug => async dispatch => {
try {
dispatch({
type: FETCH_BLOG_REQUEST
});
const query = {
filters: {},
populate: ["image","profilePic"],
pagination: {}
};
// if (country) {
// query.filters["country"] = { $eq: country };
// }
query.filters["slug"] = { $eq: slug };
// if (category) {
// }
const queryString = qs.stringify(query, {
encodeValuesOnly: true
});
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/blogs/?${queryString}`);
dispatch({
// type: published ? PUBLISHED_ROOMS_SUCCESS : ADMIN_ROOMS_SUCCESS,
type: FETCH_BLOG_SUCCESS,
payload: response.data
});
} catch (error) {
dispatch({
// type: published ? PUBLISHED_ROOMS_FAIL : ADMIN_ROOMS_FAIL,
type: FETCH_BLOG_FAIL,
payload: error.response.data
});
}
};
redux/actions/homeBannerAction.js 0 → 100644
import axios from "axios";
import qs from "qs";
import { GET_HOMEBANNER_FAIL, GET_HOMEBANNER_REQUEST, GET_HOMEBANNER_SUCCESS } from "../constants/homeBannerConstants";
export const getHomeBanner = () => async dispatch => {
try {
dispatch({
type: GET_HOMEBANNER_REQUEST
});
const config = {
headers: {
"Content-Type": "application/json"
}
};
const query = {
populate: ["desktopBanner, mobileBanner"]
};
const queryString = qs.stringify(query, {
encodeValuesOnly: true
});
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/home-banners?${queryString}`, config);
console.log("response > ", response);
dispatch({
type: GET_HOMEBANNER_SUCCESS,
payload: response.data
});
return response.data;
} catch (error) {
dispatch({
type: GET_HOMEBANNER_FAIL,
payload: error.response.data
});
}
};
redux/constants/blogConstants.js 0 → 100644
export const FETCH_BLOGS_REQUEST = "FETCH_BLOGS_REQUEST";
export const FETCH_BLOGS_SUCCESS = "FETCH_BLOGS_SUCCESS";
export const FETCH_BLOGS_FAIL = "FETCH_BLOGS_FAIL";
export const FETCH_BLOG_REQUEST = "FETCH_BLOG_REQUEST";
export const FETCH_BLOG_SUCCESS = "FETCH_BLOG_SUCCESS";
export const FETCH_BLOG_FAIL = "FETCH_BLOG_FAIL";
export const CLEAR_ERRORS = "CLEAR_ERRORS";
redux/constants/homeBannerConstants.js 0 → 100644
export const GET_HOMEBANNER_REQUEST = "GET_HOMEBANNER_REQUEST"
export const GET_HOMEBANNER_SUCCESS = "GET_HOMEBANNER_SUCCESS"
export const GET_HOMEBANNER_FAIL = "GET_HOMEBANNER_FAIL"
export const CLEAR_ERRORS = "CLEAR_ERRORS";
\ No newline at end of file
redux/reducers/blogReducer.js 0 → 100644
import { FETCH_BLOGS_FAIL, FETCH_BLOGS_REQUEST, FETCH_BLOGS_SUCCESS, FETCH_BLOG_FAIL, FETCH_BLOG_REQUEST, FETCH_BLOG_SUCCESS, CLEAR_ERRORS } from "../constants/blogConstants";
export const blogsReducer = (state = { blogs: {} }, action) => {
switch (action.type) {
case FETCH_BLOGS_REQUEST:
return {
loading: true
};
case FETCH_BLOGS_SUCCESS:
return {
blogs: action.payload.data,
// totalCount: action.payload.meta.pagination.total,
// resultsPerPage: action.payload.meta.pagination.pageSize
};
case FETCH_BLOGS_FAIL:
return {
error: action.payload.error.message
};
case CLEAR_ERRORS:
return {
...state,
error: null
};
default:
return state;
}
};
export const blogReducer = (state = { blog: {} }, action) => {
switch (action.type) {
case FETCH_BLOG_REQUEST:
return {
loading: true
};
case FETCH_BLOG_SUCCESS:
return {
blog: action.payload.data
};
case FETCH_BLOG_FAIL:
return {
error: action.payload.error.message
};
case CLEAR_ERRORS:
return {
...state,
error: null
};
default:
return state;
}
};
redux/reducers/homeBannerReducer.js 0 → 100644
import { GET_HOMEBANNER_REQUEST, CLEAR_ERRORS, GET_HOMEBANNER_SUCCESS, GET_HOMEBANNER_FAIL } from "../constants/homeBannerConstants";
export const getAllHomeBannerReducer = (state = { loading: true, success: false, homeBanner: null }, action) => {
switch (action.type) {
case GET_HOMEBANNER_REQUEST:
return {
loading: true,
};
case GET_HOMEBANNER_SUCCESS:
return {
loading: false,
homeBanner: action.payload
};
case GET_HOMEBANNER_FAIL:
return {
loading: false,
error: action.payload.error.message
};
case CLEAR_ERRORS:
return {
...state,
error: null
};
default:
return state;
}
};
\ No newline at end of file
redux/reducers/reducers.js
......@@ -8,6 +8,8 @@ import { getVendorDetailsReducer, loggedInVendorReducer, updateVendorReducer } f
import { createActivityReducer, getActivitiesReducer, getActivityByIdReducer, updateActivityByIdReducer } from "./activitiesReducer";
import { getAllCategoriesReducer, getAllSubCategoriesReducer } from "./categoryReducer";
import { getAllTestimonialReducer } from "./testimonialReducer";
import { blogReducer, blogsReducer } from "./blogReducer";
import { getAllHomeBannerReducer } from "./homeBannerReducer";
const reducers = combineReducers({
townships: townshipsReducer,
......@@ -32,6 +34,9 @@ const reducers = combineReducers({
allActivitiesData: getActivitiesReducer,
activityById: getActivityByIdReducer,
updatedActivity: updateActivityByIdReducer,
blogs: blogsReducer,
blog: blogReducer,
homeBanner: getAllHomeBannerReducer,
});
export default reducers;
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!