I am workin on an e commerce website . I want to create this feature but i am having a little difficulty . When a user clicks on an image , it redirects them to a page that contains more details about the selected item and a little carousel that enables the user see different angle of the cloth selected . I dont want tp hard code this for all features on the project . I would love to create a component that cam serve this purpose . I am using Next js for React , Thank you
here is my code
This is an example of a shirt component file . I
import Image from “next/image”;
import products from "../product/MenShoes/MenShoes";
import Items from "../app/Items";
function ShirtComp ({}) {
return (
<div className="grid grid-flow-row-dense md:grid-cols-2 lg:grid-cols-3">
{
products.map(({id, name, price, size, image }) => {
return <Items
key={id}
id={id}
name={name}
price={price}
size={size}
image={image}
/>
})
}
</div>
)
}
export default ShirtComp
THIS IS THE ITEM FILE
import Image from "next/image";
import { useDispatch } from "react-redux";
import { addToBasket } from "../slices/basketSlice";
import { useRouter } from "next/router";
function Items({ id, name, price, size, image } ) {
const router = useRouter();
const dispatch = useDispatch();
const addItemToBasket =()=>{
const product = {
id,
image,
name,
size,
price,
};
dispatch(addToBasket(product))
}
return (
<div className="relative flex flex-col m-5 bg-white z-30 p-10">
<img onClick={() => router.push('/Description')} src={image} height={400} width={400} objectFit="contain" className="cursor-pointer"/>
<p className="my-3 pr-5">{name}</p>
<p className="mb-5">{size}</p>
<p className="mb-5"> ${price}</p>
<button onClick={addItemToBasket} className="mt-auto button">Add to cart</button>
</div>
)
}
export default Items
How di i please make on click of the image tag . the image clicked is automatically rendered in another page , I hope who ever reads this gets what i am talking about .