One CSV file, picked or dropped

// apps/docs/examples/ui/simple-dropzone.tsx'use client';
import {useState} from 'react';
import {formatByteSize} from '@workspace/active-format';import {SimpleDropzone} from '@workspace/active-ui/components/composed/simple-dropzone';import {  Field,  FieldDescription,  FieldError,} from '@workspace/active-ui/components/primitives/field';
/** * One file, chosen with the file picker or dropped on the box. The * instruction is the field's label. The check on the type is the * application's: `accept` only filters the picker, so a dropped file of * another type gets an error here. Nothing is uploaded. */export default function SimpleDropzoneExample() {  const [file, setFile] = useState<File | null>(null);  const wrongType = file !== null && !file.name.toLowerCase().endsWith('.csv');  return (    <Field className="w-full max-w-md" data-invalid={wrongType || undefined}>      <SimpleDropzone        accept=".csv,text/csv"        onFileChange={setFile}        instruction="Choose a CSV file, or drop it here"        clearFileLabel="Remove the file"        aria-invalid={wrongType || undefined}        aria-describedby="participants-file-state"      />      {wrongType ? (        <FieldError id="participants-file-state">          Choose a CSV file. {file.name} is not one.        </FieldError>      ) : (        <FieldDescription id="participants-file-state">          {file            ? `${file.name}, ${formatByteSize(file.size, 'en', {system: 'decimal'})}`            : 'A CSV file with one participant per row.'}        </FieldDescription>      )}    </Field>  );}