React savings calculator (from Claude)

gistfile1.txt

import React, { useState } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';

const PricingCalculator = () => {
  const [downloads, setDownloads] = useState(1000);
  const [fileSize, setFileSize] = useState(500);
  const [downloadCostPerMB, setDownloadCostPerMB] = useState(0.12);
  const [shrinkFactor, setShrinkFactor] = useState(0.3);
  
  const calculateTotal = () => {
    // Cost per download: downloadCostPerMB * (fileSize * shrinkFactor) * number of downloads
    const effectiveSize = fileSize * shrinkFactor;
    const downloadCost = downloadCostPerMB * effectiveSize * downloads;
    
    // Apply volume discounts for high-usage customers
    if (downloads >= 10000) {
      return downloadCost * 0.8; // 20% discount
    } else if (downloads >= 5000) {
      return downloadCost * 0.9; // 10% discount
    }
    return downloadCost;
  };

  const formatNumber = (num) => {
    return num.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  };

  return (
    <Card className="w-full max-w-md mx-auto">
      <CardHeader>
        <CardTitle className="text-xl font-bold text-center">Model Download Savings Calculator</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium mb-2">File Size (MB)</label>
            <input
              type="number"
              min="0"
              step="0.1"
              value={fileSize}
              onChange={(e) => setFileSize(Math.max(0, parseFloat(e.target.value) || 0))}
              className="w-full p-2 border rounded-md"
            />
          </div>

          <div>
            <label className="block text-sm font-medium mb-2">Downloads per Month</label>
            <input
              type="number"
              min="0"
              value={downloads}
              onChange={(e) => setDownloads(Math.max(0, parseInt(e.target.value) || 0))}
              className="w-full p-2 border rounded-md"
            />
          </div>

          <div>
            <label className="block text-sm font-medium mb-2">Shrink Factor</label>
            <input
              type="number"
              min="0"
              max="1"
              step="0.01"
              value={shrinkFactor}
              onChange={(e) => setShrinkFactor(Math.min(1, Math.max(0, parseFloat(e.target.value) || 0)))}
              className="w-full p-2 border rounded-md"
            />
            <p className="text-sm text-gray-500 mt-1">Enter a value between 0 and 1 (e.g., 0.7 means 70% of original size)</p>
          </div>

          <div>
            <label className="block text-sm font-medium mb-2">Download Cost per MB ($)</label>
            <input
              type="number"
              min="0"
              step="0.01"
              value={downloadCostPerMB}
              onChange={(e) => setDownloadCostPerMB(Math.max(0, parseFloat(e.target.value) || 0))}
              className="w-full p-2 border rounded-md"
            />
          </div>
          
          <div className="mt-6 p-4 bg-gray-50 rounded-md">            
            {downloads >= 5000 && (
              <div className="flex justify-between items-center text-green-600">
                <span className="font-medium">Volume Discount:</span>
                <span>-${formatNumber(downloadCostPerMB * fileSize * shrinkFactor * downloads * (downloads >= 10000 ? 0.2 : 0.1))}</span>
              </div>
            )}
            
            <div className="flex justify-between items-center mt-2 pt-2 border-t font-bold">
              <span>Total Savings:</span>
              <span>${formatNumber(calculateTotal())}/month</span>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};

export default PricingCalculator;