diff --git a/src/layouts/pages/widgets/components/InputForm/HOC/HOC.jsx b/src/layouts/pages/widgets/components/InputForm/HOC/HOC.jsx new file mode 100644 index 0000000..84e1ad8 --- /dev/null +++ b/src/layouts/pages/widgets/components/InputForm/HOC/HOC.jsx @@ -0,0 +1,2 @@ +const Dummy = (props) => props.children; +export default Dummy; diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/InputForm2/InputForm2.jsx b/src/layouts/pages/widgets/components/InputForm/InputForms/InputForm2/InputForm2.jsx new file mode 100644 index 0000000..c4d23c7 --- /dev/null +++ b/src/layouts/pages/widgets/components/InputForm/InputForms/InputForm2/InputForm2.jsx @@ -0,0 +1,51 @@ +import styles from "./InputForm2.module.css"; +import InputText from "../components/inputText/inputText"; +import Img1 from "../images/image 4.jpg"; +import Img2 from "../images/image 2.jpg"; + +const InputForm2 = () => ( +
+
+ Car + Barcode +
+
+ +
+
+ + + + + + + + + +
+
+ + + + + + + + +
+
+
+ + + +
+
+); + +export default InputForm2; diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/InputForm2/InputForm2.module.css b/src/layouts/pages/widgets/components/InputForm/InputForms/InputForm2/InputForm2.module.css new file mode 100644 index 0000000..cb891bf --- /dev/null +++ b/src/layouts/pages/widgets/components/InputForm/InputForms/InputForm2/InputForm2.module.css @@ -0,0 +1,44 @@ +.images { + display: flex; + justify-content: space-between; + padding: 20px 40px; +} + +.form { + display: grid; + background: white; + padding: 35px; + grid-template-columns: repeat(2, minmax(30%, auto)); + grid-gap: 30px; +} + +.buttons { + display: flex; + justify-content: center; +} + +.buttons button { + padding: 12px 50px; + border-radius: 4px; + border: none; + margin: 0 8px; + color: white; + margin-bottom: 50px; +} + +.in { + background: #34c759; +} + +.out { + background: #ff3b30; +} + +.report { + background: #007aff; +} + +.outer { + height: auto; + background: white; +} diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/components/Icons/Image.js b/src/layouts/pages/widgets/components/InputForm/InputForms/components/Icons/Image.js new file mode 100644 index 0000000..be3c9e4 --- /dev/null +++ b/src/layouts/pages/widgets/components/InputForm/InputForms/components/Icons/Image.js @@ -0,0 +1,72 @@ +const Image = ({ width = 40, height = 22, ...props }) => ( + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default Image; diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/components/Icons/upload.js b/src/layouts/pages/widgets/components/InputForm/InputForms/components/Icons/upload.js new file mode 100644 index 0000000..819b8d9 --- /dev/null +++ b/src/layouts/pages/widgets/components/InputForm/InputForms/components/Icons/upload.js @@ -0,0 +1,18 @@ +const ImportIcon = ({ width = 40, height = 22, color = "#2F363D", ...props }) => ( + + + +); +export default ImportIcon; diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/components/Image Upload/ImageUpload.jsx b/src/layouts/pages/widgets/components/InputForm/InputForms/components/Image Upload/ImageUpload.jsx new file mode 100644 index 0000000..1602ec9 --- /dev/null +++ b/src/layouts/pages/widgets/components/InputForm/InputForms/components/Image Upload/ImageUpload.jsx @@ -0,0 +1,23 @@ +import styles from "./ImageUpload.module.css"; +import Upload from "../Icons/upload"; +import Image from "../Icons/Image"; + +const ImageUpload = () => ( +
+
+
+ +
+ {"Upload Image"} +
+
+ + + + +
+
+
+); + +export default ImageUpload; diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/components/Image Upload/ImageUpload.module.css b/src/layouts/pages/widgets/components/InputForm/InputForms/components/Image Upload/ImageUpload.module.css new file mode 100644 index 0000000..c0f4821 --- /dev/null +++ b/src/layouts/pages/widgets/components/InputForm/InputForms/components/Image Upload/ImageUpload.module.css @@ -0,0 +1,21 @@ +.border { + text-align: center; + border: 1px dashed #e8e8e8; + width: 100%; + border-radius: 5px; + font-size: 15px; + padding: 45px 0; +} + +.border svg { + margin-bottom: 5px; +} +.outerBorder { + border: 2px solid #e8e8e8; + padding: 12px; + border-radius: 5px; +} + +.items { + padding-top: 15px; +} diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/components/inputOptions/inputOptions.module.css b/src/layouts/pages/widgets/components/InputForm/InputForms/components/inputOptions/inputOptions.module.css new file mode 100644 index 0000000..94f56f2 --- /dev/null +++ b/src/layouts/pages/widgets/components/InputForm/InputForms/components/inputOptions/inputOptions.module.css @@ -0,0 +1,28 @@ +.select { + color: #000000; + font-size: 14px; + position: relative; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + background: rgb(255, 255, 255) + url("data:image/svg+xml;utf8,") + no-repeat; + background-position: right 5px top 50%; + + padding: 14px 0; + padding-left: 10px; + border: 1px solid lightgray; + border-radius: 5px; + width: 100%; + margin-top: 5px; + margin-bottom: 15px; +} + +.selected { + color: blue; +} + +select option:first-child { + color: lightgray; +} diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/components/inputOptions/inputoptions.jsx b/src/layouts/pages/widgets/components/InputForm/InputForms/components/inputOptions/inputoptions.jsx new file mode 100644 index 0000000..186e51c --- /dev/null +++ b/src/layouts/pages/widgets/components/InputForm/InputForms/components/inputOptions/inputoptions.jsx @@ -0,0 +1,22 @@ +import styles from "./inputOptions.module.css"; +import HOC from "../../../HOC/HOC"; + +const InputOptions = ({ label, options, data, placeholder }) => { + return ( + + +
+ +
+ ); +}; +export default InputOptions; diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/components/inputText/input.module.css b/src/layouts/pages/widgets/components/InputForm/InputForms/components/inputText/input.module.css new file mode 100644 index 0000000..30d1bff --- /dev/null +++ b/src/layouts/pages/widgets/components/InputForm/InputForms/components/inputText/input.module.css @@ -0,0 +1,14 @@ +.label { + font-size: 14px; + padding-bottom: 5px; +} + +.input { + padding: 14px 0; + padding-left: 10px; + border: 1px solid lightgray; + border-radius: 5px; + width: calc(100% - 10px); + margin-top: 5px; + margin-bottom: 15px; +} diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/components/inputText/inputText.jsx b/src/layouts/pages/widgets/components/InputForm/InputForms/components/inputText/inputText.jsx new file mode 100644 index 0000000..534cab4 --- /dev/null +++ b/src/layouts/pages/widgets/components/InputForm/InputForms/components/inputText/inputText.jsx @@ -0,0 +1,14 @@ +import styles from "./input.module.css"; +import HOC from "../../../HOC/HOC"; + +const Input = ({ label, placeholder }) => ( + + +
+ +
+); + +export default Input; diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/images/image 2.jpg b/src/layouts/pages/widgets/components/InputForm/InputForms/images/image 2.jpg new file mode 100644 index 0000000..413530a Binary files /dev/null and b/src/layouts/pages/widgets/components/InputForm/InputForms/images/image 2.jpg differ diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/images/image 4.jpg b/src/layouts/pages/widgets/components/InputForm/InputForms/images/image 4.jpg new file mode 100644 index 0000000..b230f77 Binary files /dev/null and b/src/layouts/pages/widgets/components/InputForm/InputForms/images/image 4.jpg differ diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/inputform1/Inputform1.jsx b/src/layouts/pages/widgets/components/InputForm/InputForms/inputform1/Inputform1.jsx new file mode 100644 index 0000000..92935a9 --- /dev/null +++ b/src/layouts/pages/widgets/components/InputForm/InputForms/inputform1/Inputform1.jsx @@ -0,0 +1,100 @@ +import styles from "./input1.module.css"; +import InputText from "../components/inputText/inputText"; +import InputOption from "../components/inputOptions/inputoptions"; +import ImageUpload from "../components/Image Upload/ImageUpload"; + +const inputForm = () => ( +
+
+
+
+
+ + +
+ + + + + +
+
+ + + + + + + + +
+
+
+
+ +
+
+ + +
+ Stock Level Triggers +
+
+
+
+ +
+
+ +
+ +
+
+
+ +
+
+ +
+ + +
+
+
+
+
+); + +export default inputForm; diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/inputform1/input1.module.css b/src/layouts/pages/widgets/components/InputForm/InputForms/inputform1/input1.module.css new file mode 100644 index 0000000..321fdf2 --- /dev/null +++ b/src/layouts/pages/widgets/components/InputForm/InputForms/inputform1/input1.module.css @@ -0,0 +1,83 @@ +.border { + background-color: #f9f9f9; +} + +.form { + display: grid; + background: white; + padding: 30px 35px; + grid-template-rows: repeat(2, 1fr); +} + +.formOuter { + padding: 30px 35px; +} + +.label { + font-size: 14px; + padding-bottom: 5px; +} + +.text { + padding: 14px 0; + padding-left: 10px; + border: 1px solid lightgray; + border-radius: 5px; + width: calc(100% - 10px); + margin-top: 5px; + margin-bottom: 15px; + resize: none; +} + +.row1 { + display: grid; + grid-gap: 30px; + grid-template-columns: repeat(2, minmax(30%, auto)); +} + +.buttons { + display: flex; + justify-content: center; + padding: 50px 0; +} + +.buttons button { + border: 1px solid #80bcff; + color: #80bcff; + background: white; + border-radius: 7px; + font-size: 13px; + padding: 10px 0; + width: 18%; + margin: 0 15px; + text-transform: uppercase; + cursor: pointer; +} + +.row2 input[type="number"] { + padding: 12px 10px; + border: 1px solid lightgray; + border-radius: 5px; + margin-right: 25px; +} + +.row2 input[type="number"]::-webkit-inner-spin-button, +.row2 input[type="number"]::-webkit-outer-spin-button { + opacity: 1; + margin: 0; + background-color: white; +} + +.numbers { + display: flex; + margin-top: 20px; +} + +.cancel { + color: red !important; + border: 1px solid red !important; +} +.add { + color: white !important; + background: #007aff !important; +}