Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { Icon } from '@/components/ui/icons';
export interface ProductDetailsProps {
details?: string[] | null;
}
/**
* ProductDetails Component
*
* Displays product key features/details as a bulleted list with checkmark icons.
* Each detail is shown as a separate list item with an icon for visual emphasis.
*
* @param details - Array of product detail strings
*
* @example
* ```tsx
* <ProductDetails details={[
* "Commercial-grade construction",
* "Accommodates 6-8 children safely",
* "Includes 1.5 HP continuous air blower"
* ]} />
* ```
*/
const ProductDetails = ({ details }: ProductDetailsProps) => {
// Don't render if no details provided
if (!details || details.length === 0) {
return null;
}
return (
<div className="mt-6">
<h3 className="text-2xl font-semibold mb-4 text-dark">Key Features</h3>
<ul className="space-y-2">
{details.map((detail, index) => (
<li key={index} className="flex items-start gap-3">
<Icon
name="check-circle-filled"
size={20}
className="text-primary mt-0.5 flex-shrink-0"
aria-hidden="true"
/>
<span className="text-body">{detail}</span>
</li>
))}
</ul>
</div>
);
};
export default ProductDetails;
|