const TransactionView: Component<RouteSectionProps> = () => {
  const envelopesQuery = createQuery(() => ({
    queryKey: ["transactions", "envelopes"],
    queryFn: async () => await getEnvelopes(),
  }))

  const createTransactionMutation = createMutation(() => ({
    mutationFn: createTransaction,
  }))

  return (
    <ErrorBoundary fallback={<div>"Error!"</div>}>
      <table class="w-full table-fixed">
        <thead>
          <tr>
            <th class="w-1/6">Date</th>
            <th class="w-1/6">Amount</th>
            <th class="w-1/6">Description</th>
            <th class="w-1/6">Payee</th>
            <th class="w-1/6">Envelope Name</th>
            <th class="w-1/6">Bank Account Name</th>
          </tr>
        </thead>
        <tbody>
          
          <tr>
            <Suspense fallback={<div>Loading form...</div>}>
              <TransactionForm
                onSubmit={(values) => createTransactionMutation.mutate(values)}
                envelopes={envelopesQuery.data || []}
              />
            </Suspense>
          </tr>
        </tbody>
      </table>
    </ErrorBoundary>
  )
}

const TransactionView: Component<RouteSectionProps> = () => {
  const envelopesQuery = createQuery(() => ({
    queryKey: ["transactions", "envelopes"],
    queryFn: async () => await getEnvelopes(),
  }))

  const createTransactionMutation = createMutation(() => ({
    mutationFn: createTransaction,
  }))

  return (
    <ErrorBoundary fallback={<div>"Error!"</div>}>
      <table class="w-full table-fixed">
        <thead>
          <tr>
            <th class="w-1/6">Date</th>
            <th class="w-1/6">Amount</th>
            <th class="w-1/6">Description</th>
            <th class="w-1/6">Payee</th>
            <th class="w-1/6">Envelope Name</th>
            <th class="w-1/6">Bank Account Name</th>
          </tr>
        </thead>
        <tbody>
          
          <tr>
            <Suspense fallback={<div>Loading form...</div>}>
              <TransactionForm
                onSubmit={(values) => createTransactionMutation.mutate(values)}
                envelopes={envelopesQuery.data || []}
              />
            </Suspense>
          </tr>
        </tbody>
      </table>
    </ErrorBoundary>
  )
}

const Component = ({foo, bar}) => ...

const Component = ({foo, bar}) => ...

const Component = (props) => 

const Component = (props) => 

import { splitProps, type ParentComponent } from "solid-js"

interface Props {...}

const Button: ParentComponent<Props> = (props) => {
  const [local, rest] = splitProps(props, ["customClass", "onClick", "children"])

return (
  <button
     onclick={local.onclick}
     class={local.custonClass}
     {...rest}
>
     {local.children}
   </button>
  );
};

export { Button }

import { splitProps, type ParentComponent } from "solid-js"

interface Props {...}

const Button: ParentComponent<Props> = (props) => {
  const [local, rest] = splitProps(props, ["customClass", "onClick", "children"])

return (
  <button
     onclick={local.onclick}
     class={local.custonClass}
     {...rest}
>
     {local.children}
   </button>
  );
};

export { Button }