PROFIT CALCULATOR
Help creators set profitable prices and understand their earnings per sale.
PREVIEW
CODE
profit-calculator-example.tsxtsx
1import { ProfitCalculator } from '@/components/fanbace/creator';2 3export default function ProductPricing() {4 const [price, setPrice] = useState(2999);5 const [profit, setProfit] = useState(0);6 7 return (8 <ProfitCalculator9 baseCost={1500} // Base cost in cents10 defaultPrice={2999}11 minPrice={2000}12 maxPrice={5000}13 onPriceChange={(price, profit) => {14 setPrice(price);15 setProfit(profit);16 }}17 />18 );19}PROPS
| Prop | Type | Default | Description |
|---|---|---|---|
| baseCost | number | - | Product base cost in cents |
| defaultPrice | number | baseCost * 2 | Initial retail price |
| minPrice | number | baseCost + 500 | Minimum allowed price |
| maxPrice | number | 10000 | Maximum allowed price |
| currency | string | 'USD' | Currency code |
| onPriceChange | (price, profit) => void | - | Callback when price changes |
DIFFERENT PRODUCT TYPES
T-Shirt Pricing
Hoodie Pricing
Mug Pricing
Low Margin Example
USAGE EXAMPLES
IN PRODUCT CREATION FLOW
Embed in multi-step product setup
1function ProductCreationWizard() {2 const [productData, setProductData] = useState({3 baseProduct: 'base_tshirt',4 artwork: null,5 colors: [],6 price: 2999,7 profit: 0,8 });9 10 return (11 <WizardStep title="Set Your Price">12 <ProfitCalculator13 baseCost={getBaseProduct(productData.baseProduct).baseCost}14 defaultPrice={productData.price}15 onPriceChange={(price, profit) => {16 setProductData(prev => ({17 ...prev,18 price,19 profit,20 }));21 }}22 />23 <Button onClick={nextStep} disabled={productData.profit < 500}>24 Continue to Review25 </Button>26 </WizardStep>27 );28}WITH VALIDATION
Enforce minimum profit margins
1function PricingWithValidation() {2 const [error, setError] = useState('');3 const MIN_PROFIT_MARGIN = 15; // 15% minimum4 5 const handlePriceChange = (price: number, profit: number) => {6 const profitData = calculateProfit(price, baseCost);7 8 if (profitData.profitMargin < MIN_PROFIT_MARGIN) {9 setError(`Price too low. Minimum ${MIN_PROFIT_MARGIN}% margin required.`);10 } else {11 setError('');12 savePrice(price);13 }14 };15 16 return (17 <>18 <ProfitCalculator19 baseCost={baseCost}20 onPriceChange={handlePriceChange}21 />22 {error && <Alert variant="destructive">{error}</Alert>}23 </>24 );25}BULK PRICING UPDATE
Update prices for multiple products
1function BulkPriceUpdate({ products }) {2 const [priceMultiplier, setPriceMultiplier] = useState(2.0);3 4 return (5 <div>6 <Slider7 value={[priceMultiplier]}8 onValueChange={([value]) => setPriceMultiplier(value)}9 min={1.5}10 max={3.0}11 step={0.1}12 />13 14 {products.map(product => (15 <ProfitCalculator16 key={product.id}17 baseCost={product.baseCost}18 defaultPrice={product.baseCost * priceMultiplier}19 onPriceChange={(price) => updateProduct(product.id, price)}20 />21 ))}22 </div>23 );24}