Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 4fb5e42c by Chetan
Options

wishlist link added in navbar and no wishlist items condition added

1 parent 1a6ce2ab
Inline Side-by-side
Showing 2 changed files with 54 additions and 42 deletions
components/layout/Header.js
...@@ -46,7 +46,7 @@ const Header = () => { ...@@ -46,7 +46,7 @@ const Header = () => {
}, [endUser]); }, [endUser]);
return ( return (
<header className={`header_wrap ${isSticky ? "stick" : ""}`}> <header className={`header_wrap ${isSticky ? "stick" : ""}`}>
{isSticky && <div style={{height :76}} className="bg-transparent"></div>} {isSticky && <div style={{ height: 76 }} className="bg-transparent"></div>}
<Navbar expand="lg" className="bg-body-tertiary"> <Navbar expand="lg" className="bg-body-tertiary">
<Container fluid> <Container fluid>
<Navbar.Brand href="/"> <Navbar.Brand href="/">
...@@ -57,6 +57,9 @@ const Header = () => { ...@@ -57,6 +57,9 @@ const Header = () => {
<Navbar.Toggle aria-controls="navbarScroll" /> <Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll"> <Navbar.Collapse id="navbarScroll">
<Nav className=" my-2 my-lg-0" style={{ maxHeight: "100px" }} navbarScroll> <Nav className=" my-2 my-lg-0" style={{ maxHeight: "100px" }} navbarScroll>
<ActiveLink href="/user/wishlist" activeClassName="active">
<a className="nav-link ">Wishlist</a>
</ActiveLink>
<ActiveLink href="/blog" activeClassName="active"> <ActiveLink href="/blog" activeClassName="active">
<a className="nav-link ">Blogs</a> <a className="nav-link ">Blogs</a>
</ActiveLink> </ActiveLink>
......
components/user/MyWhishList.js
...@@ -15,52 +15,61 @@ const MyWhishList = ({ data }) => { ...@@ -15,52 +15,61 @@ const MyWhishList = ({ data }) => {
<h2 className="px-2 px-lg-0">My Bookings</h2> <h2 className="px-2 px-lg-0">My Bookings</h2>
<div className="listing-items"> <div className="listing-items">
<div className="row"> <div className="row">
{data?.length && data.map((data, index) => ( {data?.length > 0 ?
<div className="col-12 col-sm-12 col-lg-3 col-md-6 px-4 px-lg-3" key={`1${index}`}> <>
<div className="item"> {data.map((data, index) => (
<div className="browse-experiences-item"> <div className="col-12 col-sm-12 col-lg-3 col-md-6 px-4 px-lg-3" key={`1${index}`}>
<div className="img-wrapper"> <div className="item">
<span className="image-container"> <div className="browse-experiences-item">
<Image src={cleanImage(data?.attributes?.experience?.data?.attributes?.image?.data?.attributes)} layout="fill" className="image img-fluid" /> <div className="img-wrapper">
</span> <span className="image-container">
<div className="top-rated">Top Rated</div> <Image src={cleanImage(data?.attributes?.experience?.data?.attributes?.image?.data?.attributes)} layout="fill" className="image img-fluid" />
</div> </span>
<div className="info"> <div className="top-rated">Top Rated</div>
<div className="top-name"> </div>
<div className="title">{data?.attributes?.experience?.data?.attributes?.name}</div> <div className="info">
<div className="rating-wishlist"> <div className="top-name">
<div className="rating"> <div className="title">{data?.attributes?.experience?.data?.attributes?.name}</div>
<span className="number">{data?.attributes?.experience?.data?.attributes?.rating}</span> <div className="rating-wishlist">
<span className="image-container"> <div className="rating">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" /> <span className="number">{data?.attributes?.experience?.data?.attributes?.rating}</span>
</span> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
</div>
<WishlistComponent activityId={data?.attributes?.experience?.data?.id} userId={data?.attributes?.endUser?.data?.id} />
</div>
</div>
<div className="discription"><p className="text-trunc-2">{data?.attributes?.experience?.data?.attributes?.description}</p></div>
<div className="price">
${data?.attributes?.experience?.data?.attributes?.pricePerPerson} <span className="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
variant="primary"
onClick={() => {
router.push(`/activities/${data?.attributes?.experience?.data?.id}`);
}}
>
Explore Now
</Button>
</div> </div>
<WishlistComponent activityId={data?.attributes?.experience?.data?.id} userId={data?.attributes?.endUser?.data?.id} />
</div> </div>
</div> </div>
<div className="discription"><p className="text-trunc-2">{data?.attributes?.experience?.data?.attributes?.description}</p></div>
<div className="price">
${data?.attributes?.experience?.data?.attributes?.pricePerPerson} <span className="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
variant="primary"
onClick={() => {
router.push(`/activities/${data?.attributes?.experience?.data?.id}`);
}}
>
Explore Now
</Button>
</div>
</div> </div>
</div> </div>
</div> ))}
</div> </>
))} :
<>
<p>No Item Found</p>
</>
}
</div> </div>
</div> </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!