"use client";

import * as React from "react";

import { cn } from "@/lib/utils";
import { PriceTag } from "@/components/ui/price-tag";
import { QuantitySelector } from "@/components/ui/quantity-selector";

export interface CartItemProps extends React.HTMLAttributes<HTMLDivElement> {
  name: string;
  price: number | string;
  currency?: string;
  quantity?: number;
  defaultQuantity?: number;
  min?: number;
  max?: number;
  imageSrc?: string;
  imageAlt?: string;
  onQuantityChange?: (quantity: number) => void;
  onRemove?: () => void;
}

export function CartItem({
  name,
  price,
  currency = "$",
  quantity,
  defaultQuantity = 1,
  min = 1,
  max,
  imageSrc,
  imageAlt = "Cart item image",
  onQuantityChange,
  onRemove,
  className,
  ...props
}: CartItemProps) {
  return (
    <div
      className={cn(
        "flex flex-col gap-4 rounded-xl border border-border bg-card p-4 sm:flex-row sm:items-center",
        className
      )}
      {...props}
    >
      <div className="h-20 w-20 shrink-0 overflow-hidden rounded-lg border border-border bg-muted">
        {imageSrc ? (
          <img
            src={imageSrc}
            alt={imageAlt}
            className="h-full w-full object-cover"
          />
        ) : (
          <div className="flex h-full w-full items-center justify-center">
            <span className="text-xs text-muted-foreground">No image</span>
          </div>
        )}
      </div>
      <div className="flex flex-1 flex-col gap-3">
        <div className="flex items-start justify-between gap-4">
          <div className="space-y-1">
            <p className="text-sm font-medium text-foreground">{name}</p>
            <PriceTag price={price} currency={currency} size="sm" />
          </div>
          <button
            type="button"
            className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-muted-foreground transition hover:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current disabled:pointer-events-none disabled:opacity-50"
            onClick={onRemove}
            disabled={!onRemove}
          >
            <TrashIcon />
            <span>Remove</span>
          </button>
        </div>
        <QuantitySelector
          value={quantity}
          defaultValue={defaultQuantity}
          min={min}
          max={max}
          onChange={onQuantityChange}
        />
      </div>
    </div>
  );
}

function TrashIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" className="h-3.5 w-3.5">
      <path
        d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14Z"
        fill="none"
        stroke="currentColor"
        strokeWidth={1.5}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}
Cart Item

Dependencies

Files

Installation
