list-view-details
Version:
A highly customizable List View Details component for React applications. This package provides an efficient and flexible way to display data in a detailed, organized, and user-friendly list view.
22 lines (21 loc) • 1.93 kB
JavaScript
import React from 'react';
import ShowMore from '../ShowMore/ShowMore';
var ItemComponent = function (_a) {
var imageUrl = _a.imageUrl, name = _a.name, quantity = _a.quantity, description = _a.description, price = _a.price, onIncrement = _a.onIncrement, onDecrement = _a.onDecrement, addCart = _a.addCart;
return (React.createElement("div", { className: "flex-1 items-center bg-white drop-shadow-lg rounded-lg p-4 mb-4" },
React.createElement("div", { className: 'flex' },
imageUrl !== undefined && React.createElement("img", { src: imageUrl, alt: name, className: "w-24 h-24 rounded-xl mr-4" }),
React.createElement("div", { className: "flex-1" },
name !== undefined && React.createElement("h2", { className: "text-l font-bold" }, name),
description !== undefined && React.createElement(ShowMore, { text: description }))),
React.createElement("div", { className: 'flex items-center' },
price !== undefined && React.createElement("span", { className: 'w-1/4 py-2 mx-1 text-l text-slate-400 font-bold items-center' },
"$",
price),
React.createElement("div", { className: "flex mx-2 w-3/6 p-2 justify-around border-2 border-slate-200 rounded-2xl" },
React.createElement("button", { onClick: onDecrement, className: "bg-white-500 text-slate-400 py-1 px-3 rounded text-3xl text-slate-400 font-bold" }, "-"),
React.createElement("span", { className: "mx-2 text-xl px-3 py-1" }, quantity),
React.createElement("button", { onClick: onIncrement, className: "bg-white-500 text-3xl text-slate-400 py-1 px-3 rounded font-bold" }, "+")),
React.createElement("button", { onClick: addCart, className: "w-1/4 mx-2 bg-orange-500 text-white p-2 rounded-xl text-l text-white-400 font-bold rounded-full" }, "Add"))));
};
export default ItemComponent;