diff --git a/src/blocks/index.js b/src/blocks/index.js index f48ad80..bf4ba5a 100644 --- a/src/blocks/index.js +++ b/src/blocks/index.js @@ -157,6 +157,12 @@ import DarkTestimonialA from './testimonial/dark/a'; import DarkTestimonialB from './testimonial/dark/b'; import DarkTestimonialC from './testimonial/dark/c'; +import LightUploadA from './upload/light/a'; +import LightUploadB from './upload/light/b'; + +import DarkUploadA from './upload/dark/a'; +import DarkUploadB from './upload/dark/b'; + export default function getBlock({theme = 'indigo', darkMode = false}) { return { Blog: { @@ -251,6 +257,10 @@ export default function getBlock({theme = 'indigo', darkMode = false}) { TestimonialA: darkMode ? : , TestimonialB: darkMode ? : , TestimonialC: darkMode ? : + }, + Upload: { + UploadA: darkMode ? : , + UploadB: darkMode ? : } } } diff --git a/src/blocks/upload/dark/a.js b/src/blocks/upload/dark/a.js new file mode 100644 index 0000000..b0f580c --- /dev/null +++ b/src/blocks/upload/dark/a.js @@ -0,0 +1,51 @@ +import React, { useRef } from "react"; +import PropTypes from "prop-types"; + +function DarkUploadA(props) { + const ref = useRef(); + + const handleClick = () => { + ref.current.click(); + }; + return ( + + + + + Upload multiple files + + + + Choose Files + + + *Remove or hide the button in the above line in the code while using + it. + + + + + ); +} + +DarkUploadA.defaultProps = { + theme: "indigo", +}; + +DarkUploadA.propTypes = { + theme: PropTypes.string.isRequired, +}; + +export default DarkUploadA; diff --git a/src/blocks/upload/dark/b.js b/src/blocks/upload/dark/b.js new file mode 100644 index 0000000..de650d4 --- /dev/null +++ b/src/blocks/upload/dark/b.js @@ -0,0 +1,53 @@ +import React from "react"; +import PropTypes from "prop-types"; + +function DarkUploadB(props) { + return ( + + + + + + + + + + Click to upload or drag + and drop + + + SVG, PNG, JPG or GIF (MAX. 800x400px) + + + + + + + + ); +} + +DarkUploadB.defaultProps = { + theme: "indigo", +}; + +DarkUploadB.propTypes = { + theme: PropTypes.string.isRequired, +}; + +export default DarkUploadB; diff --git a/src/blocks/upload/light/a.js b/src/blocks/upload/light/a.js new file mode 100644 index 0000000..e477ef9 --- /dev/null +++ b/src/blocks/upload/light/a.js @@ -0,0 +1,52 @@ +import React, { useRef } from "react"; +import PropTypes from "prop-types"; + +function LightUploadA(props) { + const ref = useRef(); + + const handleClick = () => { + ref.current.click(); + }; + + return ( + + + + + Upload multiple files + + + + Choose Files + + + *Remove or hide the button in the above line in the code while using + it. + + + + + ); +} + +LightUploadA.defaultProps = { + theme: "indigo", +}; + +LightUploadA.propTypes = { + theme: PropTypes.string.isRequired, +}; + +export default LightUploadA; diff --git a/src/blocks/upload/light/b.js b/src/blocks/upload/light/b.js new file mode 100644 index 0000000..2b297c8 --- /dev/null +++ b/src/blocks/upload/light/b.js @@ -0,0 +1,53 @@ +import React from "react"; +import PropTypes from "prop-types"; + +function LightUploadB(props) { + return ( + + + + + + + + + + Click to upload or drag + and drop + + + SVG, PNG, JPG or GIF (MAX. 800x400px) + + + + + + + + ); +} + +LightUploadB.defaultProps = { + theme: "indigo", +}; + +LightUploadB.propTypes = { + theme: PropTypes.string.isRequired, +}; + +export default LightUploadB; diff --git a/src/icons/index.js b/src/icons/index.js index 9b89c77..340b154 100644 --- a/src/icons/index.js +++ b/src/icons/index.js @@ -78,6 +78,9 @@ import TestimonialA from './testimonial/a'; import TestimonialB from './testimonial/b'; import TestimonialC from './testimonial/c'; +import UploadA from './upload/a'; +import UploadB from './upload/b'; + export default function getIcons() { return { Blog: { @@ -172,6 +175,10 @@ export default function getIcons() { TestimonialA: , TestimonialB: , TestimonialC: + }, + Upload: { + UploadA: , + UploadB: } } } diff --git a/src/icons/upload/a.js b/src/icons/upload/a.js new file mode 100644 index 0000000..9da3175 --- /dev/null +++ b/src/icons/upload/a.js @@ -0,0 +1,39 @@ +import React from "react"; + +function UploadA() { + return ( + + + + + + + + + + + ); +} + +export default UploadA; diff --git a/src/icons/upload/b.js b/src/icons/upload/b.js new file mode 100644 index 0000000..8c35d53 --- /dev/null +++ b/src/icons/upload/b.js @@ -0,0 +1,40 @@ +import React from "react"; + +function UploadB() { + return ( + + + + + + + + + + + + ); +} + +export default UploadB;
+ Click to upload or drag + and drop +
+ SVG, PNG, JPG or GIF (MAX. 800x400px) +