From b9dc4750186d9b55805a88b4c1debd5f6e8e7ae8 Mon Sep 17 00:00:00 2001
From: Kelvin Oghenerhoro Omereshone <kelvinomereshone@gmail.com>
Date: Thu, 19 Sep 2024 02:29:10 +0100
Subject: [PATCH] feat(mellow-react): work on InputBase component

---
 .../assets/js/components/InputBase.jsx        | 41 +++++++++++++++++++
 .../mellow-react/assets/js/pages/example.jsx  | 11 -----
 2 files changed, 41 insertions(+), 11 deletions(-)
 create mode 100644 templates/mellow-react/assets/js/components/InputBase.jsx
 delete mode 100644 templates/mellow-react/assets/js/pages/example.jsx

diff --git a/templates/mellow-react/assets/js/components/InputBase.jsx b/templates/mellow-react/assets/js/components/InputBase.jsx
new file mode 100644
index 00000000..979d75f5
--- /dev/null
+++ b/templates/mellow-react/assets/js/components/InputBase.jsx
@@ -0,0 +1,41 @@
+export default function InputBase({
+  value,
+  onChange,
+  label,
+  id,
+  icon,
+  suffix,
+  ...props
+}) {
+  return (
+    <div className="relative">
+      {label && (
+        <label htmlFor={id} className="mb-1 block text-lg">
+          {label}
+        </label>
+      )}
+      <div className="relative">
+        {Icon && (
+          <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
+            <Icon className="h-5 w-5" />
+          </span>
+        )}
+        <input
+          ref={ref}
+          id={id}
+          className={`block w-full rounded-lg border border-gray-300 bg-white py-2 ${
+            Icon ? 'pl-10' : 'pl-3'
+          } pr-3 shadow-sm placeholder:text-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 ${className}`}
+          value={value}
+          onChange={onChange}
+          {...props}
+        />
+        {suffix && (
+          <span className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">
+            {suffix}
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/templates/mellow-react/assets/js/pages/example.jsx b/templates/mellow-react/assets/js/pages/example.jsx
deleted file mode 100644
index ecb81c27..00000000
--- a/templates/mellow-react/assets/js/pages/example.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Link } from '@inertiajs/react'
-export default function Hello({ quote }) {
-  return (
-    <div className="flex h-screen flex-col items-center justify-center space-y-8 text-center text-gray-700">
-      <p className="text-xl">{quote}</p>
-      <Link href="/" className="text-purple-600 underline">
-        Back to Home
-      </Link>
-    </div>
-  )
-}