import { useState } from 'react' import { Card, CardContent, CardHeader, CardTitle } from "/components/ui/card" import { Slider } from "/components/ui/slider" import { Label } from "/components/ui/label" export default function ParkingIncomeCalculator() { const [units, setUnits] = useState(10) const [monthlyRate, setMonthlyRate] = useState(300) // Calculate incomes in real-time const monthlyIncome = units * monthlyRate const annualIncome = monthlyIncome * 12 return ( Parking Lockers Income Calculator

Number of Units {units}

setUnits(value[0])} className="[&>div>div]:bg-[#0CC288] [&>button]:bg-[#0CC288] [&>button]:border-[#0CC288] [&>button]:ring-[#0CC288] [&>button:hover]:bg-[#0CC288]/90" />

Monthly Rental Rate ($) ${monthlyRate}

setMonthlyRate(value[0])} className="[&>div>div]:bg-[#0CC288] [&>button]:bg-[#0CC288] [&>button]:border-[#0CC288] [&>button]:ring-[#0CC288] [&>button:hover]:bg-[#0CC288]/90" />

{/* Monthly Income Box */}

Monthly Income

${monthlyIncome.toLocaleString()}

{/* Annual Income Box */}

Annual Income

${annualIncome.toLocaleString()}

) }