Calculator

 import { useState } from 'react';

export default function LuxuryCalculator() { const [display, setDisplay] = useState('0'); const [previousValue, setPreviousValue] = useState(null); const [operation, setOperation] = useState(null); const [waitingForOperand, setWaitingForOperand] = useState(false); const [inputValue, setInputValue] = useState('0'); const [displayedResult, setDisplayedResult] = useState(false); // Color palette const colors = { background: '#121212', titanium: '#BAC4C8', gold: '#A5A9AB', // Silver main color darkGold: '#7D8184', // Darker silver displayBg: '#1A1A1A', displayText: '#C8CDD0', // Subtle silver for display buttonBg: '#1E1E1E', buttonHover: '#2A2A2A', buttonActive: '#333333', buttonText: '#E0E0E0', }; const inputDigit = (digit) => { if (waitingForOperand) { setInputValue(String(digit)); setDisplay(String(digit)); setWaitingForOperand(false); setDisplayedResult(false); } else { const newInputValue = inputValue === '0' ? String(digit) : inputValue + digit; setInputValue(newInputValue); setDisplay(newInputValue); } // Auto-calculate if we have a previous value and operation if (previousValue !== null && operation) { const currentValue = parseFloat(waitingForOperand ? digit : inputValue === '0' ? digit : inputValue + digit); calculateResult(currentValue); } }; const inputDecimal = () => { if (waitingForOperand) { setInputValue('0.'); setDisplay('0.'); setWaitingForOperand(false); setDisplayedResult(false); } else if (inputValue.indexOf('.') === -1) { const newInputValue = inputValue + '.'; setInputValue(newInputValue); setDisplay(newInputValue); } }; const clearDisplay = () => { setDisplay('0'); setInputValue('0'); setPreviousValue(null); setOperation(null); setWaitingForOperand(false); setDisplayedResult(false); }; const toggleSign = () => { const value = parseFloat(inputValue) * -1; setInputValue(String(value)); setDisplay(String(value)); // Auto-calculate if we have a previous value and operation if (previousValue !== null && operation) { calculateResult(value); } }; const inputPercent = () => { const value = parseFloat(inputValue) / 100; setInputValue(String(value)); setDisplay(String(value)); // Auto-calculate if we have a previous value and operation if (previousValue !== null && operation) { calculateResult(value); } }; const calculateResult = (currentInputValue) => { if (previousValue === null || !operation) return; const current = currentInputValue !== undefined ? currentInputValue : parseFloat(inputValue); let newValue; switch (operation) { case '+': newValue = previousValue + current; break; case '-': newValue = previousValue - current; break; case '×': newValue = previousValue * current; break; case '÷': newValue = previousValue / current; break; default: newValue = current; } // Format the display to avoid excessive decimal places const formattedValue = String(Math.round(newValue * 1000000) / 1000000); setDisplay(formattedValue); setDisplayedResult(true); }; const performOperation = (nextOperation) => { const current = parseFloat(inputValue); if (nextOperation === '=' || displayedResult) { // If equals pressed or we're already showing a result, use the displayed value as the new starting point setPreviousValue(parseFloat(display)); setInputValue(display); setOperation(nextOperation === '=' ? null : nextOperation); setWaitingForOperand(true); } else { // Normal operation button press if (previousValue === null) { // First operation in sequence setPreviousValue(current); } else if (operation && !waitingForOperand) { // We have an existing operation and a new input - calculate intermediate result calculateResult(); setPreviousValue(parseFloat(display)); } else { // Just changing operations setPreviousValue(parseFloat(display)); } setOperation(nextOperation); setWaitingForOperand(true); } }; // Button components with square design const OperationButton = ({ op, label }) => ( <button onClick={() => performOperation(op)} className="flex items-center justify-center w-16 h-12 m-0.5 text-lg font-medium" style={{ backgroundColor: operation === op ? colors.titanium : colors.gold, color: operation === op ? colors.background : '#FFF', borderRadius: '4px', // Subtle rounded corners boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)', transition: 'all 0.2s ease', }} > {label} </button> ); const DigitButton = ({ digit }) => ( <button onClick={() => inputDigit(digit)} className="flex items-center justify-center w-14 h-14 m-1 text-lg font-medium" style={{ backgroundColor: colors.buttonBg, color: colors.buttonText, borderRadius: '4px', // Subtle rounded corners border: `1px solid ${colors.titanium}`, boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)', transition: 'all 0.2s ease', }} > {digit} </button> ); const FunctionButton = ({ onPress, label, special }) => ( <button onClick={onPress} className="flex items-center justify-center w-14 h-14 m-1 text-lg font-medium" style={{ backgroundColor: special ? colors.titanium : colors.darkGold, color: special ? colors.background : colors.buttonText, borderRadius: '4px', // Subtle rounded corners boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)', transition: 'all 0.2s ease', }} > {label} </button> ); return ( <div className="flex flex-col items-center justify-center p-6 rounded-lg shadow-xl" style={{ backgroundColor: colors.background, maxWidth: '450px', border: `2px solid ${colors.titanium}`, boxShadow: `0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 1px ${colors.titanium}`, }}> <div className="w-full mb-4 p-3 rounded-md" style={{ backgroundColor: colors.displayBg, border: `1px solid ${colors.darkGold}`, boxShadow: `inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 1px ${colors.titanium}`, }}> <div className="text-right text-4xl font-light tracking-wider overflow-hidden" style={{ color: colors.displayText }}> {display} </div> </div> <div className="grid grid-cols-5 gap-0.5"> <FunctionButton onPress={clearDisplay} label="C" special={true} /> <FunctionButton onPress={toggleSign} label="±" special={false} /> <FunctionButton onPress={inputPercent} label="%" special={false} /> <OperationButton op="÷" label="÷" /> <FunctionButton onPress={() => {}} label="MC" special={false} /> <DigitButton digit={7} /> <DigitButton digit={8} /> <DigitButton digit={9} /> <OperationButton op="×" label="×" /> <FunctionButton onPress={() => {}} label="M+" special={false} /> <DigitButton digit={4} /> <DigitButton digit={5} /> <DigitButton digit={6} /> <OperationButton op="-" label="−" /> <FunctionButton onPress={() => {}} label="M-" special={false} /> <DigitButton digit={1} /> <DigitButton digit={2} /> <DigitButton digit={3} /> <OperationButton op="+" label="+" /> <FunctionButton onPress={() => {}} label="MR" special={false} /> <DigitButton digit={0} /> <button onClick={inputDecimal} className="flex items-center justify-center w-14 h-14 m-1 text-lg font-medium" style={{ backgroundColor: colors.buttonBg, color: colors.buttonText, borderRadius: '4px', // Subtle rounded corners border: `1px solid ${colors.titanium}`, boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)', }} > . </button> <button onClick={() => performOperation('=')} className="flex items-center justify-center col-span-3 w-full h-12 m-0.5 text-lg font-medium" style={{ backgroundColor: colors.gold, color: '#FFF', borderRadius: '4px', // Subtle rounded corners boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)', transition: 'all 0.2s ease', }} > = </button> </div> <div className="mt-4 text-center text-xs" style={{ color: colors.gold }}> LUXURY SQUARE EDITION </div> </div> ); }