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.
30 lines (29 loc) • 2.41 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, rating = _a.rating, count = _a.count, 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' },
React.createElement("div", { className: 'w-3/4' },
name != undefined && React.createElement("h2", { className: "text-l font-bold" }, name),
description != undefined && (description === null || description === void 0 ? void 0 : description.length) > 100 && React.createElement(ShowMore, { text: description }),
price != undefined && React.createElement("h1", { className: "text-l" },
"Price:-",
price),
rating != undefined && React.createElement("h1", { className: "text-m" },
"Rating:- ",
rating,
"(",
count,
")")),
React.createElement("div", { className: 'flex flex-col' },
imageUrl != undefined && React.createElement("img", { className: 'h-24', src: imageUrl, alt: name }),
React.createElement("div", { className: "flex mt-1 justify-around border-2 border-rose-200 rounded-2xl" },
React.createElement("button", { onClick: onDecrement, className: "bg-white-500 text-rose-400 rounded text-3xl font-bold" }, "-"),
React.createElement("span", { className: "mx-2 text-xl text-rose-400" }, quantity),
React.createElement("button", { onClick: onIncrement, className: "bg-white-500 text-3xl text-rose-400 rounded font-bold" }, "+")),
React.createElement("span", { className: "mx-2 text-m px-3 py-1 text-gray-400" }, "Customizable"))),
React.createElement("div", { className: 'flex p-2 w-full items-center justify-center' },
React.createElement("button", { onClick: addCart, className: "w-2/5 mx-2 bg-rose-500 text-white p-2 rounded-xl text-l text-white-400 font-bold rounded-full" }, "Add"))));
};
export default ItemComponent;