1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3
4interface CreateEnvelopeModalProps {
7}
8
9const CreateEnvelopeModal: React.FC<CreateEnvelopeModalProps> = ({ onClose, onCreate }) => {
10 const [name, setName] = useState("");
11 const [icon, setIcon] = useState("๐ฐ");
28 ];
29
30 const handleSubmit = (e: React.FormEvent) => {
31 e.preventDefault();
32 if (name.trim()) {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import type { Transaction, Envelope } from "../../shared/types.ts";
4
9}
10
11const TransactionList: React.FC<TransactionListProps> = ({
12 transactions,
13 envelopes,
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import type { Envelope } from "../../shared/types.ts";
4
9}
10
11const EnvelopeList: React.FC<EnvelopeListProps> = ({ envelopes, onDrop, isDragging }) => {
12 if (envelopes.length === 0) {
13 return (
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useRef } from "https://esm.sh/react@18.2.0";
3import type { User, Envelope, Transaction } from "../../shared/types.ts";
4import EnvelopeList from "./EnvelopeList.tsx";
15}
16
17const Dashboard: React.FC<DashboardProps> = ({
18 user,
19 onCreateEnvelope,
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3
4interface OnboardingProps {
6}
7
8const Onboarding: React.FC<OnboardingProps> = ({ onCreateUser }) => {
9 const [name, setName] = useState("");
10 const [step, setStep] = useState(0);
11
12 const handleSubmit = (e: React.FormEvent) => {
13 e.preventDefault();
14 if (name.trim()) {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import type { User, Envelope, Transaction, Achievement } from "../../shared/types.ts";
4import Onboarding from "./Onboarding.tsx";
9const API_BASE_URL = "/api";
10
11const App: React.FC = () => {
12 const [user, setUser] = useState<User | null>(null);
13 const [loading, setLoading] = useState<boolean>(true);
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4import App from "./components/App.tsx";
5
17## Tech Stack
18
19- Frontend: React with animations
20- Backend: TypeScript with SQLite storage
21- Data: CSV parsing for bank statements
29โ โโโ index.ts # Main API entry point
30โโโ frontend/
31โ โโโ components/ # React components
32โ โโโ animations/ # Animation utilities
33โ โโโ index.html # Main HTML template
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
4
5const OUTER_RADIUS = 146;
