Skip the Endless Proposals. Get Matched to Serious Projects.

// Developer Earnings Calculator
import React, { useState } from 'react';

function EarningsCalculator() {
  const [projectBudget, setProjectBudget] = useState(2500);
  const [projectDuration, setProjectDuration] = useState(3);
  const [platformFee, setPlatformFee] = useState(7);
  
  // Calculate developer earnings
  const developerEarnings = projectBudget * (1 - platformFee/100);
  const weeklyRate = developerEarnings / projectDuration;
  
  return (
    <div className="calculator">
      <h2>Developer Earnings Calculator</h2>
      
      <div className="input-group">
        <label>Project Budget ($)</label>
        <input 
          type="range" 
          min="500" max="10000" step="100"
          value={projectBudget}
          onChange={(e) => setProjectBudget(Number(e.target.value))}
        />
        <span>{projectBudget}</span>
      </div>
      
      <div className="results">
        <div className="result-item">
          <span>Platform Fee:</span>
          <span>{platformFee}%</span>
        </div>
        <div className="result-item highlight">
          <span>Your Earnings:</span>
          <span>{developerEarnings.toFixed(2)}</span>
        </div>
        <div className="result-item">
          <span>Weekly Rate:</span>
          <span>{weeklyRate.toFixed(2)}/week</span>
        </div>
      </div>
      
      <button className="apply-button">
        Apply Now
      </button>
    </div>
  );
}

export default EarningsCalculator;