update

src/components/EditableInput.tsx

@@ -0,0 +1,53 @@
+import { Editable } from "@chakra-ui/react";
+import { FC } from "react";
+
+interface InputProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  defaultValue?: string;
+  placeholder?: string;
+  props?: any;
+  type?:string
+}
+const EditableInput: FC<InputProps> = ({
+  value,
+  onChange,
+  defaultValue,
+  placeholder,
+  type,
+  ...props
+}) => {
+  return (
+    <Editable.Root
+      {...props}
+      value={value}
+      onChange={() => onChange && onChange}
+      w={"100%"}
+      size={"sm"}
+      textAlign="start"
+      defaultValue={defaultValue || ""}
+    >
+      <Editable.Preview
+        bg={"#00000006"}
+        fontSize={"xs"}
+        w={"100%"}
+        bgSize={"sm"}
+        ps={3}
+        // _hover={{ backgroundColor: "#00000010" }}
+      />
+      <Editable.Input
+        fontSize={"xs"}
+        placeholder={placeholder}
+        w={"100%"}
+        border={"#ccc 1px solid"}
+        type={type}
+        _focus={{ bg: "#02A0A015" }}
+        outline={"#007F33"}
+        bgSize={"xs"}
+        ps={3}
+      />
+    </Editable.Root>
+  );
+};
+
+export default EditableInput;