Adding the Pagination Block & Icon

src/blocks/index.js

@@ -119,6 +119,12 @@ import DarkHeroD from './hero/dark/d';
 import DarkHeroE from './hero/dark/e';
 import DarkHeroF from './hero/dark/f';
 
+import DarkPaginationA from './pagination/dark/a';
+import DarkPaginationB from './pagination/dark/b';
+
+import LightPaginationA from './pagination/light/a';
+import LightPaginationB from './pagination/light/b';
+
 import LightPricingA from './pricing/light/a';
 import LightPricingB from './pricing/light/b';
 
@@ -228,6 +234,10 @@ export default function getBlock({theme = 'indigo', darkMode = false}) {
       HeroE: darkMode ? <DarkHeroE theme={theme} /> : <LightHeroE theme={theme} />,
       HeroF: darkMode ? <DarkHeroF theme={theme} /> : <LightHeroF theme={theme} />
     },
+    Pagination: {
+      PaginationA: darkMode ? <DarkPaginationA theme={theme} /> : <LightPaginationA theme={theme} />,
+      PaginationB: darkMode ? <DarkPaginationB theme={theme} /> : <LightPaginationB theme={theme} />
+    },
     Pricing: {
       PricingA: darkMode ? <DarkPricingA theme={theme} /> : <LightPricingA theme={theme} />,
       PricingB: darkMode ? <DarkPricingB theme={theme} /> : <LightPricingB theme={theme} />

src/blocks/pagination/dark/a.js

@@ -0,0 +1,73 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function DarkPaginationA(props) {
+  return (
+    <footer className="text-gray-400 md:fixed md:w-screen md:bottom-24 md:left-0 bg-gray-900 body-font">
+      <div className="container px-5 py-8 mx-auto flex items-center justify-center sm:flex-row flex-col">
+        <div className="flex flex-row title-font font-medium items-center justify-center">
+          <span
+            className={`ml-3 text-xl ring-1 ring-gray-500 text-gray-200 py-2 px-4 rounded-full`}
+          >
+            <svg
+              stroke="currentColor"
+              strokeWidth="3"
+              fill="none"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              viewBox="0 0 24 24"
+              className="w-6 h-6"
+            >
+              <path d="M9 19l-7-7 7-7M16 19l-7-7 7-7" />
+            </svg>
+          </span>
+          <span
+            className={`ml-3 text-xl ring-1 ring-${props.theme}-300 bg-${props.theme}-500 text-white py-2 px-4 rounded-full`}
+          >
+            3
+          </span>
+          <span
+            className={`ml-3 text-xl ring-1 ring-gray-500 text-gray-200 py-2 px-4 rounded-full`}
+          >
+            4
+          </span>
+          <span
+            className={`ml-3 text-xl ring-1 ring-gray-500 text-gray-200 py-2 px-4 rounded-full`}
+          >
+            5
+          </span>
+          <span
+            className={`ml-3 text-xl ring-1 ring-gray-500 text-gray-200 py-2 px-4 rounded-full`}
+          >
+            6
+          </span>
+          <span
+            className={`ml-3 text-xl ring-1 ring-gray-500 text-gray-200 py-2 px-4 rounded-full`}
+          >
+            <svg
+              stroke="currentColor"
+              strokeWidth="3"
+              fill="none"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              viewBox="0 0 24 24"
+              className="w-6 h-6"
+            >
+              <path d="M9 5l7 7-7 7M16 5l7 7-7 7" />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+DarkPaginationA.defaultProps = {
+  theme: "indigo",
+};
+
+DarkPaginationA.propTypes = {
+  theme: PropTypes.string.isRequired,
+};
+
+export default DarkPaginationA;

src/blocks/pagination/dark/b.js

@@ -0,0 +1,70 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function DarkPaginationB(props) {
+  return (
+    <footer className="text-gray-400 md:fixed md:w-screen md:bottom-24 md:left-0 bg-gray-900 body-font">
+      <div className="container px-5 py-8 mx-auto flex items-center justify-center sm:flex-row flex-col">
+        <div className="flex flex-row title-font font-medium items-center justify-center">
+          <span
+            className={`ml-3 text-xl bg-gray-800 text-gray-200 py-2 px-4 rounded-sm flex flex-row rounded-l-full`}
+          >
+            <svg
+              stroke="currentColor"
+              strokeWidth="3"
+              fill="none"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              viewBox="0 0 24 24"
+              className="w-6 h-6"
+            >
+              <path d="M9 19l-7-7 7-7M16 19l-7-7 7-7" />
+            </svg>
+            Prev
+          </span>
+          <span
+            className={`ml-3 text-xl ring-1 ring-${props.theme}-300 bg-${props.theme}-500 text-white py-2 px-4 rounded-sm`}
+          >
+            1
+          </span>
+          <span
+            className={`ml-3 text-xl bg-gray-800 text-gray-200 py-2 px-4 rounded-sm`}
+          >
+            2
+          </span>
+          <span
+            className={`ml-3 text-xl bg-gray-800 text-gray-200 py-2 px-4 rounded-sm`}
+          >
+            3
+          </span>
+          <span
+            className={`ml-3 text-xl bg-gray-800 text-gray-200 py-2 px-4 rounded-sm flex flex-row rounded-r-full`}
+          >
+            Next
+            <svg
+              stroke="currentColor"
+              strokeWidth="3"
+              fill="none"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              viewBox="0 0 24 24"
+              className="w-6 h-6"
+            >
+              <path d="M9 5l7 7-7 7M16 5l7 7-7 7" />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+DarkPaginationB.defaultProps = {
+  theme: "indigo",
+};
+
+DarkPaginationB.propTypes = {
+  theme: PropTypes.string.isRequired,
+};
+
+export default DarkPaginationB;

src/blocks/pagination/light/a.js

@@ -0,0 +1,73 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function LightPaginationA(props) {
+  return (
+    <footer className="text-gray-600 md:fixed md:w-screen md:bottom-24 md:left-0 body-font">
+      <div className="container px-5 py-8 mx-auto flex items-center justify-center sm:flex-row flex-col">
+        <div className="flex flex-row title-font font-medium items-center justify-center ">
+          <span
+            className={`ml-3 text-xl ring-1 ring-gray-200 text-gray-500 py-2 px-4 rounded-full`}
+          >
+            <svg
+              stroke="currentColor"
+              strokeWidth="3"
+              fill="none"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              viewBox="0 0 24 24"
+              className="w-6 h-6"
+            >
+              <path d="M9 19l-7-7 7-7M16 19l-7-7 7-7" />
+            </svg>
+          </span>
+          <span
+            className={`ml-3 text-xl ring-1 ring-${props.theme}-500 bg-${props.theme}-500 text-white py-2 px-4 rounded-full`}
+          >
+            3
+          </span>
+          <span
+            className={`ml-3 text-xl ring-1 ring-gray-200 text-gray-500 py-2 px-4 rounded-full`}
+          >
+            4
+          </span>
+          <span
+            className={`ml-3 text-xl ring-1 ring-gray-200 text-gray-500 py-2 px-4 rounded-full`}
+          >
+            5
+          </span>
+          <span
+            className={`ml-3 text-xl ring-1 ring-gray-200 text-gray-500 py-2 px-4 rounded-full`}
+          >
+            6
+          </span>
+          <span
+            className={`ml-3 text-xl ring-1 ring-gray-200 text-gray-500 py-2 px-4 rounded-full`}
+          >
+            <svg
+              stroke="currentColor"
+              strokeWidth="3"
+              fill="none"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              viewBox="0 0 24 24"
+              className="w-6 h-6"
+            >
+              <path d="M9 5l7 7-7 7M16 5l7 7-7 7" />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+LightPaginationA.defaultProps = {
+  theme: "indigo",
+};
+
+LightPaginationA.propTypes = {
+  theme: PropTypes.string.isRequired,
+};
+
+export default LightPaginationA;

src/blocks/pagination/light/b.js

@@ -0,0 +1,70 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function LightPaginationB(props) {
+  return (
+    <footer className="text-gray-600 md:fixed md:w-screen md:bottom-24 md:left-0 body-font">
+      <div className="container px-5 py-8 mx-auto flex items-center justify-center sm:flex-row flex-col">
+        <div className="flex flex-row title-font font-medium items-center justify-center ">
+          <span
+            className={`ml-3 text-xl bg-gray-200 text-gray-500 py-2 px-4 rounded-sm rounded-l-full flex flex-row`}
+          >
+            <svg
+              stroke="currentColor"
+              strokeWidth="3"
+              fill="none"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              viewBox="0 0 24 24"
+              className="w-6 h-6"
+            >
+              <path d="M9 19l-7-7 7-7M16 19l-7-7 7-7" />
+            </svg>{" "}
+            Prev
+          </span>
+          <span
+            className={`ml-3 text-xl ring-1 ring-${props.theme}-500 bg-${props.theme}-500 text-white py-2 px-4 rounded-sm`}
+          >
+            1
+          </span>
+          <span
+            className={`ml-3 text-xl bg-gray-200 text-gray-500 py-2 px-4 rounded-sm`}
+          >
+            2
+          </span>
+          <span
+            className={`ml-3 text-xl bg-gray-200 text-gray-500 py-2 px-4 rounded-sm`}
+          >
+            3
+          </span>
+          <span
+            className={`ml-3 text-xl bg-gray-200 text-gray-500 py-2 px-4 rounded-sm flex flex-row rounded-r-full`}
+          >
+            Next
+            <svg
+              stroke="currentColor"
+              strokeWidth="3"
+              fill="none"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              viewBox="0 0 24 24"
+              className="w-6 h-6"
+            >
+              <path d="M9 5l7 7-7 7M16 5l7 7-7 7" />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+LightPaginationB.defaultProps = {
+  theme: "indigo",
+};
+
+LightPaginationB.propTypes = {
+  theme: PropTypes.string.isRequired,
+};
+
+export default LightPaginationB;

src/icons/index.js

@@ -62,6 +62,9 @@ import HeroF from './hero/f';
 import PricingA from './pricing/a';
 import PricingB from './pricing/b';
 
+import PaginationA from './pagination/a';
+import PaginationB from './pagination/b';
+
 import StatisticA from './statistic/a';
 import StatisticB from './statistic/b';
 import StatisticC from './statistic/c';
@@ -149,6 +152,10 @@ export default function getIcons() {
       HeroE: <HeroE />,
       HeroF: <HeroF />
     },
+    Pagination: {
+      PaginationA: <PaginationA />,
+      PaginationB: <PaginationB />
+    },
     Pricing: {
       PricingA: <PricingA />,
       PricingB: <PricingB />

src/icons/pagination/a.js

@@ -0,0 +1,24 @@
+import React from "react";
+
+function PaginationA(props) {
+  return (
+    <svg fill="none" viewBox="0 0 266 150" {...props}>
+      <path fill="var(--solid)" d="M0 0h266v150H0z" />
+
+      <ellipse cx={77} cy={125} rx={7} ry={5} stroke="var(--solid-900)" />
+      <rect x={76} y={124} width={2} height={2} fill="var(--solid-900)" />
+      <circle cx={97} cy={125} r={7} fill="var(--main-500)" />
+      <rect x={96} y={124} width={2} height={2} fill="white" />
+      <circle cx={117} cy={125} r={7} stroke="var(--solid-900)" />
+      <rect x={116} y={124} width={2} height={2} fill="var(--solid-900)" />
+      <circle cx={137} cy={125} r={7} stroke="var(--solid-900)" />
+      <rect x={136} y={124} width={2} height={2} fill="var(--solid-900)" />
+      <circle cx={157} cy={125} r={7} stroke="var(--solid-900)" />
+      <rect x={156} y={124} width={2} height={2} fill="var(--solid-900)" />
+      <ellipse cx={177} cy={125} rx={7} ry={5} stroke="var(--solid-900)" />
+      <rect x={176} y={124} width={2} height={2} fill="var(--solid-900)" />
+    </svg>
+  );
+}
+
+export default PaginationA;

src/icons/pagination/b.js

@@ -0,0 +1,38 @@
+import React from "react";
+
+function PaginationB(props) {
+  return (
+    <svg fill="none" viewBox="0 0 266 150" {...props}>
+      <path fill="var(--solid)" d="M0 0h266v150H0z" />
+
+      <rect
+        x={72}
+        y={119}
+        width={20}
+        height={13}
+        rx={5}
+        fill="var(--base-500)"
+      />
+
+      <rect x={80} y={124} width={5} height={2} fill="var(--solid-900)" />
+      <circle cx={107} cy={125} r={7} fill="var(--main-500)" />
+      <rect x={106} y={124} width={2} height={2} fill="white" />
+      <circle cx={127} cy={125} r={7} fill="var(--base-500)" />
+      <rect x={126} y={124} width={2} height={2} fill="var(--solid-900)" />
+      <circle cx={147} cy={125} r={7} fill="var(--base-500)" />
+      <rect x={146} y={124} width={2} height={2} fill="var(--solid-900)" />
+
+      <rect
+        x={160}
+        y={119}
+        width={20}
+        height={13}
+        rx={5}
+        fill="var(--base-500)"
+      />
+      <rect x={166} y={124} width={5} height={2} fill="var(--solid-900)" />
+    </svg>
+  );
+}
+
+export default PaginationB;