import React, { useState, useCallback, useEffect, useRef } from 'react'; import { History, Trash2, X, ChevronDown, ChevronUp } from 'lucide-react'; import { clsx, type ClassValue } from 'clsx'; import { twMerge } from 'tailwind-merge'; // Mini-app templateId for storage const __INJECTED_TEMPLATE_ID__ = '9736a2a4-fb12-4e1e-9f02-7ac80b3c6095'; /** * Utility for Tailwind class merging */ function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } /** * STORAGE HOOKS */ const STORAGE_PREFIX = 'miniapp_'; const TEMPLATE_ID = __INJECTED_TEMPLATE_ID__ || 'local'; function usePersonalStorage(key: string, defaultValue: T): [T, (v: T | ((p: T) => T)) => void] { const storageKey = STORAGE_PREFIX + TEMPLATE_ID + '_' + key; const [value, setValue] = React.useState(() => { if (typeof window === 'undefined') return defaultValue; try { const item = localStorage.getItem(storageKey); return item ? JSON.parse(item) : defaultValue; } catch { return defaultValue; } }); const setStored = React.useCallback((newVal: T | ((p: T) => T)) => { setValue(prev => { const resolved = typeof newVal === 'function' ? (newVal as (p: T) => T)(prev) : newVal; try { localStorage.setItem(storageKey, JSON.stringify(resolved)); } catch {} return resolved; }); }, [storageKey]); return [value, setStored]; } /** * TYPES & CONSTANTS */ type Operator = '+' | '-' | '*' | '/' | null; interface HistoryItem { id: string; equation: string; result: string; timestamp: number; } const MAX_DISPLAY_LENGTH = 12; /** * COMPONENTS */ const CalcButton = ({ label, onClick, variant = 'number', className }: { label: string; onClick: () => void; variant?: 'number' | 'operator' | 'function' | 'action'; className?: string; }) => { const variants = { number: 'bg-zinc-800 hover:bg-zinc-700 text-white', operator: 'bg-green-500 hover:bg-green-400 text-white font-bold', function: 'bg-zinc-400 hover:bg-zinc-300 text-zinc-900', action: 'bg-green-600 hover:bg-green-500 text-white font-bold', }; return ( ); }; export default function CalculatorApp() { // Logic State const [display, setDisplay] = useState('0'); const [storedValue, setStoredValue] = useState(null); const [operator, setOperator] = useState(null); const [waitingForOperand, setWaitingForOperand] = useState(false); const [equation, setEquation] = useState(''); // UI State const [historyOpen, setHistoryOpen] = useState(false); const [history, setHistory] = usePersonalStorage('calc_history', []); const scrollRef = useRef(null); /** * MATH OPERATIONS */ const calculate = (a: number, b: number, op: Operator): number | 'Error' => { switch (op) { case '+': return a + b; case '-': return a - b; case '*': return a * b; case '/': return b === 0 ? 'Error' : a / b; default: return b; } }; const formatResult = (num: number | 'Error'): string => { if (num === 'Error') return 'Erreur'; const str = num.toString(); if (str.length > MAX_DISPLAY_LENGTH) { return num.toPrecision(7).toString(); } return str; }; /** * HANDLERS */ const handleDigit = (digit: string) => { if (waitingForOperand) { setDisplay(digit); setWaitingForOperand(false); } else { setDisplay(prev => (prev === '0' ? digit : prev + digit).slice(0, MAX_DISPLAY_LENGTH)); } }; const handleDecimal = () => { if (waitingForOperand) { setDisplay('0.'); setWaitingForOperand(false); } else if (!display.includes('.')) { setDisplay(prev => prev + '.'); } }; const handleOperator = (nextOp: Operator) => { const inputValue = parseFloat(display); if (storedValue === null) { setStoredValue(inputValue); setEquation(`${inputValue} ${nextOp}`); } else if (operator) { const result = calculate(storedValue, inputValue, operator); const formatted = formatResult(result); setDisplay(formatted); setStoredValue(result === 'Error' ? null : result); setEquation(result === 'Error' ? '' : `${formatted} ${nextOp}`); } setWaitingForOperand(true); setOperator(nextOp); }; const handleEqual = () => { const inputValue = parseFloat(display); if (operator && storedValue !== null) { const result = calculate(storedValue, inputValue, operator); const formatted = formatResult(result); const newHistoryItem: HistoryItem = { id: Math.random().toString(36).substr(2, 9), equation: `${storedValue} ${operator} ${inputValue} =`, result: formatted, timestamp: Date.now(), }; if (formatted !== 'Erreur') { setHistory(prev => [newHistoryItem, ...prev].slice(0, 50)); } setDisplay(formatted); setStoredValue(null); setOperator(null); setWaitingForOperand(true); setEquation(''); } }; const handleClear = () => { setDisplay('0'); setStoredValue(null); setOperator(null); setWaitingForOperand(false); setEquation(''); }; const handleToggleSign = () => { setDisplay(prev => (parseFloat(prev) * -1).toString()); }; const handlePercent = () => { const val = parseFloat(display); setDisplay((val / 100).toString()); }; // Keyboard support useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.key >= '0' && e.key <= '9') handleDigit(e.key); if (e.key === '.') handleDecimal(); if (e.key === '=') handleEqual(); if (e.key === 'Enter') handleEqual(); if (e.key === 'Backspace') handleClear(); if (e.key === 'Escape') handleClear(); if (e.key === '+') handleOperator('+'); if (e.key === '-') handleOperator('-'); if (e.key === '*') handleOperator('*'); if (e.key === '/') handleOperator('/'); }; window.addEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown); }, [display, operator, storedValue, waitingForOperand]); return (

{/* Header with History Toggle */}

Calculatrice

{/* Display Area */}

{equation}

{display}

{/* Keypad */}

handleOperator('/')} variant="operator" /> handleDigit('7')} /> handleDigit('8')} /> handleDigit('9')} /> handleOperator('*')} variant="operator" /> handleDigit('4')} /> handleDigit('5')} /> handleDigit('6')} /> handleOperator('-')} variant="operator" /> handleDigit('1')} /> handleDigit('2')} /> handleDigit('3')} /> handleOperator('+')} variant="operator" /> handleDigit('0')} className="col-span-2" />

{/* History Overlay Drawer */}

Historique

{history.length === 0 ? (

Aucun historique récent

) : ( history.map((item) => (

{ setDisplay(item.result); setHistoryOpen(false); }} >

{item.equation}

{item.result}

)) )}

{/* Footer info */}

React v18 Standard 4-Function

{/* Missing Data Section (Requirement fallback) */} {/* Since this is a generic calculator, no external facts are required, but we include the structure as per instructions if facts were missing. */} {false && (

Données manquantes

L'application nécessite des données factuelles pour s'afficher correctement.

)}

); }

Templates by Hehheeh Jejeeje