[V0_FILE]typescriptreact:file="App.tsx" import type React from "react" import { useFireproof } from "use-fireproof" // Cessna fuel consumption rates (gallons per hour) for different models const FUEL_RATES = { "Cessna 172": 8.5, "Cessna 182": 13, "Cessna 206": 15, "Cessna 210": 17, } function App() { const { database, useLiveQuery, useDocument } = useFireproof("cessna-flights-db") const { doc: newFlight, merge: mergeNewFlight, save: saveNewFlight, reset: resetNewFlight, } = useDocument({ model: "Cessna 172", duration: 1, fuelUsage: 0, date: new Date().toISOString().split("T")[0], }) const flights = useLiveQuery("date", { descending: true }) const calculateFuelUsage = (model: string, duration: number) => { return FUEL_RATES[model] * duration } const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target mergeNewFlight({ [name]: value }) if (name === "model" || name === "duration") { const fuelUsage = calculateFuelUsage( name === "model" ? value : newFlight.model, name === "duration" ? Number.parseFloat(value) : newFlight.duration, ) mergeNewFlight({ fuelUsage }) } } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() saveNewFlight() resetNewFlight() } return (

Cessna Fuel Estimator

Flight History

Model: {flight.model}

Duration: {flight.duration} hours

Fuel Usage: {flight.fuelUsage.toFixed(2)} gallons

Date: {flight.date}

) } export default App

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This