[V0_FILE]typescriptreact:file="hooks/useCalculator.ts" isFixed="true" "use client" import { useState } from "react" export function useCalculator() { const [display, setDisplay] = useState("0") const appendValue = (value: string) => { setDisplay((prev) => (prev === "0" ? value : prev + value)) } const clearDisplay = () => { setDisplay("0") } const deleteLast = () => { setDisplay((prev) => (prev.length > 1 ? prev.slice(0, -1) : "0")) } const calculate = () => { try { // eslint-disable-next-line no-eval const result = eval(display) setDisplay(result.toString()) } catch (error) { setDisplay("Error") } } return { display, appendValue, clearDisplay, deleteLast, calculate } } [V0_FILE]typescriptreact:file="components/Calculator.tsx" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { useCalculator } from "../hooks/useCalculator" const buttons = [ { label: "C", action: "clearDisplay", className: "col-span-1 bg-red-500 hover:bg-red-600" }, { label: "/", action: "appendValue", value: "/", className: "col-span-1 bg-gray-700 hover:bg-gray-600" }, { label: "*", action: "appendValue", value: "*", className: "col-span-1 bg-gray-700 hover:bg-gray-600" }, { label: "⌫", action: "deleteLast", className: "col-span-1 bg-gray-700 hover:bg-gray-600" }, { label: "7", action: "appendValue", value: "7" }, { label: "8", action: "appendValue", value: "8" }, { label: "9", action: "appendValue", value: "9" }, { label: "-", action: "appendValue", value: "-", className: "bg-gray-700 hover:bg-gray-600" }, { label: "4", action: "appendValue", value: "4" }, { label: "5", action: "appendValue", value: "5" }, { label: "6", action: "appendValue", value: "6" }, { label: "+", action: "appendValue", value: "+", className: "bg-gray-700 hover:bg-gray-600" }, { label: "1", action: "appendValue", value: "1" }, { label: "2", action: "appendValue", value: "2" }, { label: "3", action: "appendValue", value: "3" }, { label: "=", action: "calculate", className: "row-span-2 bg-blue-500 hover:bg-blue-600" }, { label: "0", action: "appendValue", value: "0", className: "col-span-2" }, { label: ".", action: "appendValue", value: "." }, ] export function Calculator() { const { display, appendValue, clearDisplay, deleteLast, calculate } = useCalculator() const handleButtonClick = (action: string, value?: string) => { switch (action) { case "appendValue": appendValue(value!) break case "clearDisplay": clearDisplay() break case "deleteLast": deleteLast() break case "calculate": calculate() break } } return (

{buttons.map((button, index) => ( ))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" import { Calculator } from "@/components/Calculator" export default function Home() { return (

React Calculator

) }

About

About