create discount and ads section

src/components/Editor.jsx

@@ -0,0 +1,55 @@
+import { forwardRef, useEffect, useLayoutEffect, useRef } from 'react';
+
+// Editor is an uncontrolled React component
+const Editor = forwardRef(
+  ({ readOnly, defaultValue, onTextChange, onSelectionChange }, ref) => {
+    const containerRef = useRef(null);
+    const defaultValueRef = useRef(defaultValue);
+    const onTextChangeRef = useRef(onTextChange);
+    const onSelectionChangeRef = useRef(onSelectionChange);
+
+    useLayoutEffect(() => {
+      onTextChangeRef.current = onTextChange;
+      onSelectionChangeRef.current = onSelectionChange;
+    });
+
+    useEffect(() => {
+      ref.current?.enable(!readOnly);
+    }, [ref, readOnly]);
+
+    useEffect(() => {
+      const container = containerRef.current;
+      const editorContainer = container.appendChild(
+        container.ownerDocument.createElement('div'),
+      );
+      const quill = new Quill(editorContainer, {
+        theme: 'snow',
+      });
+
+      ref.current = quill;
+
+      if (defaultValueRef.current) {
+        quill.setContents(defaultValueRef.current);
+      }
+
+      quill.on(Quill.events.TEXT_CHANGE, (...args) => {
+        onTextChangeRef.current?.(...args);
+      });
+
+      quill.on(Quill.events.SELECTION_CHANGE, (...args) => {
+        onSelectionChangeRef.current?.(...args);
+      });
+
+      return () => {
+        ref.current = null;
+        container.innerHTML = '';
+      };
+    }, [ref]);
+
+    return <div ref={containerRef}></div>;
+  },
+);
+
+Editor.displayName = 'Editor';
+
+export default Editor;