initial code

src/features/settings/index.tsx

@@ -0,0 +1,61 @@
+/* eslint-disable react-hooks/set-state-in-effect */
+import { useEffect, useState } from "react";
+import {
+  saveMerchant,
+  getMerchant,
+} from "../../utils/storage";
+
+export default function SettingsFeature() {
+  const [form, setForm] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(false);
+  const merchant = getMerchant();
+
+  function handleChange(
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+  ) {
+    const { value } = e.target;
+    setForm(value);
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    saveMerchant(form)
+    setTimeout(() => {
+      setLoading(false);
+    }, 200);
+    
+  }
+
+  useEffect(() => {
+    setForm(merchant || 'SAVY');
+  },[merchant]);
+
+  return (
+    <form onSubmit={handleSubmit} className="p-4">
+      <div className="flex flex-col gap-4">
+        <div>
+          <label className="mb-1 text-neutral-900 block font-semibold">
+            Merchant Name
+          </label>
+          <input
+            name="merchantName"
+            value={form}
+            onChange={handleChange}
+            className="p-2 border border-neutral-200 w-full rounded-md"
+            required
+          />
+        </div>
+      
+      </div>
+
+      <button
+        type="submit"
+        className="w-full bg-orange-500 text-white py-2 rounded-lg mt-8 disabled:bg-neutral-500"
+        disabled={loading}
+      >
+        Save Device
+      </button>
+    </form>
+  );
+}