From 1cfa1e12f91d63fdfa2160e37aac1d275161dccd Mon Sep 17 00:00:00 2001
From: Matt Kirby <MattJKirby@outlook.com>
Date: Thu, 13 Apr 2023 17:08:34 +0100
Subject: [PATCH] Added basic field form component
---
.../src/components/form/BasicField.tsx | 43 +++++++++++++++++++
1 file changed, 43 insertions(+)
create mode 100644 daily-thought-frontend/src/components/form/BasicField.tsx
diff --git a/daily-thought-frontend/src/components/form/BasicField.tsx b/daily-thought-frontend/src/components/form/BasicField.tsx
new file mode 100644
index 00000000..2f099b28
--- /dev/null
+++ b/daily-thought-frontend/src/components/form/BasicField.tsx
@@ -0,0 +1,43 @@
+import { FC } from "react"
+
+type BasicFieldProps = {
+ name: string,
+ placeholder: string,
+ error?: string | null
+ onChange: (value: string) => void;
+}
+
+const BasicField:FC<BasicFieldProps> = ({
+ name,
+ placeholder,
+ error,
+ onChange
+}) => {
+
+ const handleChange = (value: string) => {
+ onChange(value)
+ }
+
+ return (
+ <div className="mb-3">
+ <label htmlFor={name} className="sr-only">
+ {placeholder}
+ </label>
+ <input
+ id={name}
+ name={name}
+ type={name}
+ autoComplete={name}
+ required
+ className={`p-3 relative block w-full rounded-md border-0 py-1.5 text-gray-900 ring-1 ring-inset placeholder:text-gray-400 focus:z-10 sm:text-sm sm:leading-6 ${error ? "ring-c-pink" : "ring-gray-300"}`}
+ placeholder={placeholder}
+ onChange={e => handleChange(e.target.value)}
+ />
+ <p className="text-xs text-c-pink m-1">
+ {error}
+ </p>
+ </div>
+ )
+}
+
+export default BasicField
\ No newline at end of file
--
GitLab