From 87da3fdbd8a88fcb58d8d220924f2dd689dbe9a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Valverd=C3=A9?= <julien.valverde@mailo.com>
Date: Sun, 10 Aug 2025 05:25:33 +0200
Subject: [PATCH] Work

---
 packages/example/src/lib/TextInput.tsx | 36 +++++++++++++++++++-------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/packages/example/src/lib/TextInput.tsx b/packages/example/src/lib/TextInput.tsx
index 609a9c3..e2b7514 100644
--- a/packages/example/src/lib/TextInput.tsx
+++ b/packages/example/src/lib/TextInput.tsx
@@ -1,8 +1,8 @@
-import { TextField } from "@radix-ui/themes"
-import { type ParseResult, Schema } from "effect"
+import { Callout, Flex, TextField } from "@radix-ui/themes"
+import { Option, ParseResult, Schema } from "effect"
 import { Component } from "effect-fc"
 import { useInput } from "effect-fc/hooks"
-import type * as React from "react"
+import * as React from "react"
 
 
 export interface TextInputProps<A, R> extends Omit<useInput.Options<A, R>, "schema"> {
@@ -19,14 +19,30 @@ export const TextInput = <A, R>(
     R
 > => Component.makeUntraced(function* TextInput(props: TextInputProps<A, R>) {
     const input = yield* useInput({ ...props, schema })
+    const issues = React.useMemo(() => Option.map(
+        input.error,
+        ParseResult.ArrayFormatter.formatErrorSync,
+    ), [input.error])
 
     return (
-        <TextField.Root
-            value={input.value}
-            onChange={input.onChange}
-            {...props.textFieldRootProps}
-        >
-            {props.children}
-        </TextField.Root>
+        <Flex direction="column" gap="1">
+            {Option.isSome(issues) &&
+                <Callout.Root>
+                    <Callout.Text>
+                        <ul>
+                            {issues.value.map(issue => <li>{issue.message}</li>)}
+                        </ul>
+                    </Callout.Text>
+                </Callout.Root>
+            }
+
+            <TextField.Root
+                value={input.value}
+                onChange={input.onChange}
+                {...props.textFieldRootProps}
+            >
+                {props.children}
+            </TextField.Root>
+        </Flex>
     )
 })