@snowcone-app/ui 0.1.42 → 0.2.0

package/src/composed/CurrentSelectionDisplay.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import React from "react";
+import { useProduct } from "../patterns/Product";
+import { FaReact } from "react-icons/fa";
+
+// Cast to fix React 19 type compatibility with react-icons
+const ReactIcon = FaReact as React.ComponentType<{ className?: string }>;
+
+export interface CurrentSelectionDisplayProps {
+  /**
+   * Additional CSS classes to apply to the root element
+   */
+  className?: string;
+
+  /**
+   * Whether to show the price in the selection display
+   * @default true
+   */
+  showPrice?: boolean;
+
+  /**
+   * Custom message to show when no options are selected
+   * @default "No options selected yet. Try selecting some options above!"
+   */
+  emptyMessage?: string;
+}
+
+/**
+ * CurrentSelectionDisplay - Shows the current product option selections and price
+ *
+ * Automatically displays the selected options and calculated price from the Product context.
+ * Useful for debugging, documentation, or showing a summary of selections to users.
+ *
+ * @example
+ * ```tsx
+ * import { Product, ProductOptions, CurrentSelectionDisplay } from '@yourorg/ui-react';
+ *
+ * <Product productId="BEEB77">
+ *   <ProductOptions />
+ *   <CurrentSelectionDisplay />
+ * </Product>
+ * ```
+ */
+export function CurrentSelectionDisplay({
+  className = "",
+  showPrice = true,
+  emptyMessage = "No options selected yet. Try selecting some options above!",
+}: CurrentSelectionDisplayProps) {
+  const { selection, currentPrice } = useProduct();
+
+  if (!selection || Object.keys(selection).length === 0) {
+    return (
+      <div className={`p-3 bg-muted border border-border rounded-lg ${className}`} style={{ borderRadius: "min(0.5rem, 12px)" }}>
+        <p className="text-sm text-muted-foreground">
+          {emptyMessage}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`p-4 bg-primary/10 rounded-lg ${className}`} style={{ borderRadius: "min(0.5rem, 12px)" }}>
+      <h3 className="text-sm font-semibold text-primary mb-3 flex items-center gap-2">
+        <ReactIcon className="text-primary" />
+        Current Selection:
+      </h3>
+      <div className="space-y-2">
+        {Object.entries(selection).map(([key, value]) => (
+          <div key={key} className="flex items-center justify-between">
+            <span className="text-sm font-medium text-primary">{key}:</span>
+            <span className="text-sm text-primary">{value}</span>
+          </div>
+        ))}
+        {showPrice && currentPrice && (
+          <div className="flex items-center justify-between pt-2 mt-2">
+            <span className="text-sm font-semibold text-primary">Price:</span>
+            <span className="text-lg font-semibold text-primary">
+              ${(currentPrice / 100).toFixed(2)}
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}