Skip to content

Commit

Permalink
designed new details page
Browse files Browse the repository at this point in the history
  • Loading branch information
@sksabbirhossain
sksabbirhossain committed Sep 4, 2023
1 parent 6742cec commit 3b877dc
Show file tree
Hide file tree
Showing 3 changed files with 167 additions and 20 deletions.
4 changes: 2 additions & 2 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@
-->
<title>MegaMart</title>
</head>
<body>
<body style="background-color: #eff0f5">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root" class="bg-[#eff0f5]"></div>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
Expand Down
6 changes: 4 additions & 2 deletions src/components/user/ProductCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const ProductCard = ({ product }) => {
};

return (
<div className="md:max-w-[250px] h-[325px] border-gray-100 border rounded-md hover:shadow-lg duration-100 ease-linear">
<div className="md:max-w-[250px] h-[325px] bg-white/80 border-gray-100 border rounded-md hover:shadow-lg duration-100 ease-linear">
<Link to={`/product-details/${productSlug}/${_id}`}>
<div className="pt-2">
<img
Expand All @@ -50,7 +50,9 @@ export const ProductCard = ({ product }) => {
<FaStar />
))}

<span className="text-gray-500 text-sm font-thin ml-1">({rating})</span>
<span className="text-gray-500 text-sm font-thin ml-1">
({rating})
</span>
</p>
<div>
<button
Expand Down
177 changes: 161 additions & 16 deletions src/pages/User/ProductDetails/ProductDetails.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@
import React from "react";
import { toast } from "react-hot-toast";
import {
FaCashRegister,
FaChair,
FaRegHeart,
FaSearchLocation,
FaShareAlt,
FaSlack,
FaStar,
} from "react-icons/fa";
import { useDispatch } from "react-redux";
import { useParams } from "react-router-dom";
import { Link, useParams } from "react-router-dom";
import { ProductDetailsSkeleton } from "../../../components/ui/ProductDetailsSkeleton";
import { addToCart } from "../../../features/cart/addToCartSlice";
import { useGetProductQuery } from "../../../features/product/productApi";
Expand All @@ -12,6 +21,7 @@ export const ProductDetails = () => {
const { productId } = useParams();
const dispatch = useDispatch();

const rating = 5;
const {
data: product,
isLoading,
Expand All @@ -38,7 +48,7 @@ export const ProductDetails = () => {
<p className="text-center uppercase font-medium">No Product found!</p>
);

const { name, picture, price, category, description } = product || {};
const { name, picture, price, category, description } = product || {};

const categoryId = category?._id;

Expand All @@ -49,23 +59,71 @@ export const ProductDetails = () => {
};

//set ppage title
setTitle("Product Details");
setTitle(`${name} - Product Details`);
return (
<div className="container mx-auto my-7 px-2 sm:px-0">
<div className="grid grid-cols-1 md:grid-cols-2">
<div className="">
<div className="container mx-auto my-7 px-2 space-y-5 sm:px-0">
<div className="grid grid-cols-1 md:grid-cols-12 gap-6 bg-white rounded-md">
{/* product imgaes */}
<div className="col-span-12 md:col-span-5 lg:col-span-4 p-3">
<img
src={`${process.env.REACT_APP_BASE_URL}/uploads/${picture}`}
alt="product"
className="rounded-md"
/>
</div>
<div className="space-y-3">

{/* product details */}
<div className="col-span-12 md:col-span-6 p-3 lg:col-span-5 space-y-3">
<h1 className="text-xl font-medium">{name}</h1>
<p className="text-sm">{description}</p>
<p className="font-medium text-green-600">start</p>

<div className="flex justify-between items-center border-b-2 pb-2">
<div className="space-y-2">
<p className="flex items-center text-sm font-thin space-x-2">
<span className="flex items-center text-orange-600">
{Array(rating)
.fill()
.map((i) => (
<FaStar />
))}
</span>
<span className="text-green-800 hover:underline hover:cursor-pointer">
{" "}
{rating} Ratings
</span>
<span>|</span>
<span className="text-green-800 hover:underline hover:cursor-pointer">
6 Answered Questions
</span>
</p>
<p className="flex items-center text-sm font-thin space-x-2">
<p className="text-green-800">
<span className="text-gray-600">Brand:</span> {"HP"}
</p>
<span>|</span>
<span className="text-green-800 hover:underline hover:cursor-pointer">
<Link to="/">More Men from No Brand</Link>
</span>
</p>
</div>

<div className="flex items-center space-x-6 text-xl text-gray-800">
<span className="cursor-pointer hover:text-orange-600 duration-200 ease-out">
<FaShareAlt />
</span>
<span className="cursor-pointer hover:text-orange-600 duration-200 ease-out">
<FaRegHeart />
</span>
</div>
</div>

<div className="flex justify-between items-center">
<p className="font-medium">Price: ${price}</p>
<p className="font-medium flex items-center">
Price:
<span className="text-orange-600 text-3xl font-semibold pl-2">
${price}
</span>
<span className="ml-5 text-gray-500 line-through">$2000</span>
</p>
{/* <div className="flex items-center">
<p className="font-medium">Quantity:</p>
<div className="flex bg-green-700 rounded-md overflow-hidden">
Expand All @@ -90,13 +148,100 @@ export const ProductDetails = () => {
</div>
</div> */}
</div>
<button
className="py-2 px-5 bg-green-800 text-white rounded-md hover:bg-green-600 duration-100 ease-linear"
onClick={() => addToCartHandler(product)}
>
Add To Cart
</button>

{/* button for add to cart */}
<div className="flex gap-5 pt-5">
<button
className="hover:bg-white duration-200 ease-linear bg-orange-600 hover:text-orange-600 text-white border border-orange-600 w-full rounded-md py-1"
onClick={() => addToCartHandler(product)}
>
Add To Cart
</button>
<button
className="bg-white duration-200 ease-linear hover:bg-orange-600 text-orange-600 hover:text-white border border-orange-600 w-full rounded-md py-1"
onClick={() => addToCartHandler(product)}
>
Buy Now
</button>
</div>
</div>

{/* extra informations */}
<div className="col-span-12 md:col-span-5 lg:col-span-3 p-3 bg-gray-50 rounded-tr-md rounded-br-md overflow-hidden">
{/* delivery */}
<div>
<div className="pb-2">
<p className="text-sm text-gray-500">Delivery</p>
</div>
<div className="flex space-x-2">
<p className="text-xl mt-2 text-gray-600">
<FaSearchLocation />
</p>
<div className="flex justify-between items-center">
<p className="leading-5">
Dhaka, Dhaka North, Banani Road No. 12 - 19
</p>
<p className="uppercase text-sm text-green-700 font-medium cursor-pointer">
change
</p>
</div>
</div>
<p className="pt-2 border-b-2" />

<div className="py-3 space-y-3">
<div className="flex justify-between space-x-2">
<p className="text-xl mt-2 text-gray-600">
<FaCashRegister />
</p>
<p className="font-medium">
Standard Delivery{" "}
<span className="text-sm text-gray-600 font-normal">
11 Sep - 18 Sep 7 - 14 day(s)
</span>
</p>
<p className="font-medium">$55</p>
</div>
<div className="flex space-x-2">
<p className="text-xl mt-1 text-gray-600">
<FaCashRegister />
</p>
<p className="font-normal">Cash on Delivery Available</p>
</div>
<p className="pt-2 border-b-2" />
</div>
</div>
{/* services */}
<div className="space-y-3">
<div className="">
<p className="text-sm text-gray-500">Delivery</p>
</div>
<div className="flex space-x-2">
<p className="text-xl mt-1 text-gray-600">
<FaChair />
</p>
<div>
<p className="font-medium">7 Days Returns</p>
<p className="font-thin text-sm text-gray-600">
Change of mind is not applicable
</p>
</div>
</div>
<div className="flex space-x-2">
<p className="text-xl mt-1 text-gray-600">
<FaSlack />
</p>
<p className="font-medium">Warranty not available</p>
</div>

<p className="pt-2 border-b-2" />
</div>
</div>
</div>

{/* product description */}
<div className=" bg-white rounded-md p-3 space-y-2">
<p className="text-1xl font-medium">Product details of {name}</p>
<p className="text-sm">{description}</p>
</div>
<RelatedProduct categoryId={categoryId} />
</div>
Expand Down

0 comments on commit 3b877dc

Please sign in to comment.