Addition of two FileUpload templates

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 ? <DarkTestimonialA theme={theme} /> : <LightTestimonialA theme={theme} />,
       TestimonialB: darkMode ? <DarkTestimonialB theme={theme} /> : <LightTestimonialB theme={theme} />,
       TestimonialC: darkMode ? <DarkTestimonialC theme={theme} /> : <LightTestimonialC theme={theme} />
+    },
+    Upload: {
+      UploadA: darkMode ? <DarkUploadA theme={theme} /> : <LightUploadA theme={theme} />,
+      UploadB: darkMode ? <DarkUploadB theme={theme} /> : <LightUploadB theme={theme} />
     }
   }
 }

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 (
+    <section className="text-gray-400 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="lg:w-2/3 flex flex-col items-start mx-auto">
+          <label
+            className="title-font mb-2 text-sm font-medium text-white"
+            for="multiple_files"
+          >
+            Upload multiple files
+          </label>
+          <input
+            ref={ref}
+            className={`w-full cursor-pointer rounded-lg border border-gray-600 bg-gray-800 px-6 py-2 text-lg text-gray-200 file:rounded-lg file:border-none file:bg-${props.theme}-600 file:p-2 file:text-white hover:file:cursor-pointer hover:file:bg-${props.theme}-500 file:mr-6`}
+            id="multiple_files"
+            type="file"
+            multiple
+          />
+          <button
+            className={`absolute flex-shrink-0 text-white bg-${props.theme}-500 border-0 py-1 px-3 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg ml-4 mt-9`}
+            onClick={handleClick}
+          >
+            Choose Files
+          </button>
+          <span class="text-sm text-gray-400 mt-1 ml-3">
+            *Remove or hide the button in the above line in the code while using
+            it.
+          </span>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+DarkUploadA.defaultProps = {
+  theme: "indigo",
+};
+
+DarkUploadA.propTypes = {
+  theme: PropTypes.string.isRequired,
+};
+
+export default DarkUploadA;

src/blocks/upload/dark/b.js

@@ -0,0 +1,53 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function DarkUploadB(props) {
+  return (
+    <section className="text-gray-400 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="lg:w-2/3 flex flex-col items-start mx-auto">
+          <label
+            for="dropzone-file"
+            className={`flex flex-col justify-center items-center w-full h-64 bg-${props.theme}-800 bg-opacity-10 rounded-lg border-2 border-${props.theme}-500 border-dashed cursor-pointer hover:bg-opacity-20`}
+          >
+            <div className="flex flex-col justify-center items-center pt-5 pb-6">
+              <svg
+                aria-hidden="true"
+                className={`mb-3 w-10 h-10 text-${props.theme}-500`}
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                ></path>
+              </svg>
+              <p className="mb-2 text-base text-white">
+                <span className="font-semibold ">Click to upload</span> or drag
+                and drop
+              </p>
+              <p className="text-xs text-gray-100">
+                SVG, PNG, JPG or GIF (MAX. 800x400px)
+              </p>
+            </div>
+            <input id="dropzone-file" type="file" className="hidden" />
+          </label>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+DarkUploadB.defaultProps = {
+  theme: "indigo",
+};
+
+DarkUploadB.propTypes = {
+  theme: PropTypes.string.isRequired,
+};
+
+export default DarkUploadB;

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 (
+    <section className="text-gray-600 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="lg:w-2/3 flex flex-col items-start mx-auto">
+          <label
+            className="title-font mb-2 text-sm font-medium text-gray-900"
+            for="multiple_files"
+          >
+            Upload multiple files
+          </label>
+          <input
+            ref={ref}
+            className={`w-full cursor-pointer rounded-lg border border-gray-300 bg-gray-100 px-6 py-2 text-lg text-gray-600 file:rounded-lg file:border-none file:bg-${props.theme}-600 file:p-2 file:text-white hover:file:cursor-pointer hover:file:bg-${props.theme}-500 file:mr-6`}
+            id="multiple_files"
+            type="file"
+            multiple
+          />
+          <button
+            className={`absolute flex-shrink-0 text-white bg-${props.theme}-500 border-0 py-1 px-3 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg ml-4 mt-9`}
+            onClick={handleClick}
+          >
+            Choose Files
+          </button>
+          <span class="text-sm text-gray-400 mt-1 ml-3">
+            *Remove or hide the button in the above line in the code while using
+            it.
+          </span>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+LightUploadA.defaultProps = {
+  theme: "indigo",
+};
+
+LightUploadA.propTypes = {
+  theme: PropTypes.string.isRequired,
+};
+
+export default LightUploadA;

src/blocks/upload/light/b.js

@@ -0,0 +1,53 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function LightUploadB(props) {
+  return (
+    <section className="text-gray-600 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="lg:w-2/3 flex flex-col items-start mx-auto">
+          <label
+            for="dropzone-file"
+            className={`flex flex-col justify-center items-center w-full h-64 bg-${props.theme}-50 rounded-lg border-2 border-${props.theme}-300 border-dashed cursor-pointer  hover:bg-${props.theme}-100 `}
+          >
+            <div className="flex flex-col justify-center items-center pt-5 pb-6">
+              <svg
+                aria-hidden="true"
+                className={`mb-3 w-10 h-10 text-${props.theme}-500`}
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                ></path>
+              </svg>
+              <p className="mb-2 text-base text-gray-500">
+                <span className="font-semibold ">Click to upload</span> or drag
+                and drop
+              </p>
+              <p className="text-xs text-gray-500">
+                SVG, PNG, JPG or GIF (MAX. 800x400px)
+              </p>
+            </div>
+            <input id="dropzone-file" type="file" className="hidden" />
+          </label>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+LightUploadB.defaultProps = {
+  theme: "indigo",
+};
+
+LightUploadB.propTypes = {
+  theme: PropTypes.string.isRequired,
+};
+
+export default LightUploadB;

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: <TestimonialA />,
       TestimonialB: <TestimonialB />,
       TestimonialC: <TestimonialC />
+    },
+    Upload: {
+      UploadA: <UploadA />,
+      UploadB: <UploadB />
     }
   }
 }

src/icons/upload/a.js

@@ -0,0 +1,39 @@
+import React from "react";
+
+function UploadA() {
+  return (
+    <svg fill="none" viewBox="0 0 266 150">
+      <path fill="var(--solid)" d="M0 0h266v150H0z" />
+      <rect
+        x={50}
+        y={38}
+        width={48}
+        height={4}
+        rx={2.5}
+        fill="var(--solid-900)"
+      />
+
+      <rect
+        x={50}
+        y={48}
+        width={160}
+        height={12}
+        rx={2.5}
+        fill="var(--base-400)"
+      />
+
+      <rect x={60} y={51} width={35} height={6} rx={4} fill="var(--main-500)" />
+
+      <rect
+        x={52}
+        y={65}
+        width={80}
+        height={4}
+        rx={2.5}
+        fill="var(--base-400)"
+      />
+    </svg>
+  );
+}
+
+export default UploadA;

src/icons/upload/b.js

@@ -0,0 +1,40 @@
+import React from "react";
+
+function UploadB() {
+  return (
+    <svg fill="none" viewBox="0 0 266 150">
+      <path fill="var(--solid)" d="M0 0h266v150H0z" />
+
+      <rect
+        x={50}
+        y={25}
+        width={160}
+        height={70}
+        rx={2.5}
+        fill="var(--main-100)"
+      />
+      <circle cx={125} cy={50} r={8} fill="var(--main-400)" />
+
+    <rect
+        x={92}
+        y={65}
+        width={70}
+        height={4}
+        rx={2.5}
+        fill="var(--base-400)"
+      />
+
+      <rect
+        x={95}
+        y={72}
+        width={60}
+        height={4}
+        rx={2.5}
+        fill="var(--base-400)"
+      />
+
+    </svg>
+  );
+}
+
+export default UploadB;