import { atom, useAtom } from "jotai"; import type { NextPage } from "next"; import { useState } from "react"; import { Form } from "react-bootstrap"; import EditBox from "../components/EditBox"; import ReceiptItem, { IReceiptItem } from "../components/ReceiptItem"; import parseInput, { ParsedInputDisplay } from "../lib/parseInput"; import { addLine, receiptAtom, receiptTotalAtom, totalAtom, } from "../lib/state"; const Home: NextPage = () => { const [receipt, setReceipt] = useAtom(receiptAtom); const [total] = useAtom(receiptTotalAtom); const [input, setInput] = useState(""); const formatter = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", }); const add = (e) => { e.preventDefault(); addLine(input, setReceipt); setInput(""); return false; }; return (

Items

setInput(e.target.value)} value={input} style={{ padding: "8px 16px", fontSize: "1.5em" }} />
Receipt Total:
{receipt.map((itemAtom, i) => { return ; })} {total.size > 0 && ( <>

Weighted Breakdown

    {[...total.entries()].map(([person, value], i) => (
  • {person}: {formatter.format(value)}
  • ))}
)}
); }; export default Home;