freks blog

export const action = async ({ request }: ActionFunctionArgs) => {
  // some action
}

export default function IndexPage() {
  const records = useLoaderData<typeof loader>();

  return (
    <div>
      {records.map((record) => (
        <Layout.Section key={record.id}>
          <Record record={record} />
        </Layout.Section>
      ))}
      <Listbox accessibilityLabel="Listbox with Action example">
        {records
          .map((record) => (
            <Listbox.Option key={record.id} value={record.id}>
              <Record record={record} />
            </Listbox.Option>
        ))}
      </Listbox>
    </div>
  )
}

function Record() {
  return (
    <Form method="post">
      <Button type="submit">Action</Button>
    </Form>
  )
}