Todos.tsx — react Source File

Architecture documentation for Todos.tsx, a tsx file in the react codebase. 10 imports, 1 dependents.

File tsx BabelCompiler Entrypoint 10 imports 1 dependents 1 functions

Entity Profile

BabelCompiler→ Entrypoint→ Todos.tsx — react Source File

Dependency Diagram

graph LR
  c3489d06_1452_f7f8_d28f_240d296f1926["Todos.tsx"]
  92a57e25_d5ae_6cfd_c67c_ec168f4dede5["client.tsx"]
  c3489d06_1452_f7f8_d28f_240d296f1926 --> 92a57e25_d5ae_6cfd_c67c_ec168f4dede5
  6c1b6d6e_2fe8_f022_b057_933dcc2ec002["Todos.css"]
  c3489d06_1452_f7f8_d28f_240d296f1926 --> 6c1b6d6e_2fe8_f022_b057_933dcc2ec002
  96e127ca_58f8_32fc_b0fc_1352fef0df7b["Dialog.tsx"]
  c3489d06_1452_f7f8_d28f_240d296f1926 --> 96e127ca_58f8_32fc_b0fc_1352fef0df7b
  60bd018b_2f0d_e868_25f9_0cc2d072ab57["Dialog"]
  c3489d06_1452_f7f8_d28f_240d296f1926 --> 60bd018b_2f0d_e868_25f9_0cc2d072ab57
  9d193cb4_26df_d78d_77c8_1c784c234257["TodoDetail.tsx"]
  c3489d06_1452_f7f8_d28f_240d296f1926 --> 9d193cb4_26df_d78d_77c8_1c784c234257
  8b83c596_f110_c079_04b5_f9e243da4359["TodoDetail"]
  c3489d06_1452_f7f8_d28f_240d296f1926 --> 8b83c596_f110_c079_04b5_f9e243da4359
  e8761808_43d6_8512_b503_192a97c4359a["TodoCreate.tsx"]
  c3489d06_1452_f7f8_d28f_240d296f1926 --> e8761808_43d6_8512_b503_192a97c4359a
  0b3774c4_c85a_6b9a_0686_fd70761af006["TodoCreate"]
  c3489d06_1452_f7f8_d28f_240d296f1926 --> 0b3774c4_c85a_6b9a_0686_fd70761af006
  c0c08439_2d95_7b70_f20b_1bbbbdc9a402["TodoList.tsx"]
  c3489d06_1452_f7f8_d28f_240d296f1926 --> c0c08439_2d95_7b70_f20b_1bbbbdc9a402
  f6c087c2_ebd1_220a_73d7_cbb2581020ee["TodoList"]
  c3489d06_1452_f7f8_d28f_240d296f1926 --> f6c087c2_ebd1_220a_73d7_cbb2581020ee
  a79cd622_5834_df3e_54e0_56ba202376a6["server.tsx"]
  a79cd622_5834_df3e_54e0_56ba202376a6 --> c3489d06_1452_f7f8_d28f_240d296f1926
  style c3489d06_1452_f7f8_d28f_240d296f1926 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

'use server-entry';

import './client';
import './Todos.css';
import {Dialog} from './Dialog';
import {TodoDetail} from './TodoDetail';
import {TodoCreate} from './TodoCreate';
import {TodoList} from './TodoList';

export async function Todos({id}: {id?: number}) {
  return (
    <html style={{colorScheme: 'dark light'}}>
      <head>
        <title>Todos</title>
      </head>
      <body>
        <header>
          <h1>Todos</h1>
          <Dialog trigger="+">
            <h2>Add todo</h2>
            <TodoCreate />
          </Dialog>
        </header>
        <main>
          <div className="todo-column">
            <TodoList id={id} />
          </div>
          {id != null ? <TodoDetail key={id} id={id} /> : <p>Select a todo</p>}
        </main>
      </body>
    </html>
  );
}