@sikka/hawa 0.0.58 → 0.0.60

package/src/blocks/Pricing/ComparingPlans.js

@@ -0,0 +1,151 @@
+import React, { useState } from "react";
+import { HawaPricingCard, HawaPanelTabs, HawaTabs } from "../../elements";
+import PropTypes from "prop-types";
+
+const CheckMark = () => (
+  <svg
+    class="w-5 h-5 text-green-500"
+    aria-hidden="true"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+      clip-rule="evenodd"
+    ></path>
+  </svg>
+);
+
+const UncheckMark = () => (
+  <svg
+    class="w-5 h-5 text-red-500"
+    aria-hidden="true"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+      clip-rule="evenodd"
+    ></path>
+  </svg>
+);
+
+export const ComparingPlans = (props) => {
+  const [currentCurrency, setCurrentCurrency] = useState("sar");
+  const [currentCycle, setCurrentCycle] = useState("monthly");
+  let cycleOptions = [
+    { label: `Monthly`, value: `monthly` },
+    { label: `3 Months`, value: `3-months` },
+    { label: `6 Months`, value: `6-months` },
+    { label: `Annually`, value: `annually` }
+  ];
+  let currencyOptions = [
+    { label: `USD`, value: `usd` },
+    { label: `SAR`, value: `sar` }
+  ];
+  let activeTabStyle =
+    "inline-block py-3 px-4 text-white bg-blue-600 rounded-lg active";
+  let inactiveTabStyle =
+    "inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white";
+  return (
+    <div id="detailed-pricing" class="overflow-x-auto w-full">
+      <div class="overflow-hidden min-w-max">
+        <div class="grid grid-cols-4 gap-x-16 p-4 text-sm font-medium text-gray-900 bg-gray-100 border-t border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700 dark:text-white">
+          <div class="flex items-center"></div>
+          {props.plans.map((plan) => (
+            <div>{plan.title}</div>
+          ))}
+        </div>
+        {props.plans.map((plan) => {
+          return (
+            <div class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
+              <div class="text-gray-500 dark:text-gray-400">
+                Basic components (
+                <a href="#" class="text-blue-600 hover:underline">
+                  view all
+                </a>
+                )
+              </div>
+              <CheckMark />
+              <CheckMark />
+              <CheckMark />
+            </div>
+          );
+        })}
+        <div class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
+          <div class="text-gray-500 dark:text-gray-400">
+            Application UI (
+            <a href="#" class="text-blue-600 hover:underline">
+              view demo
+            </a>
+            )
+          </div>
+          <UncheckMark />
+          <CheckMark />
+          <UncheckMark />
+        </div>
+        <div class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
+          <div class="text-gray-500 dark:text-gray-400">
+            Marketing UI pre-order
+          </div>
+          <UncheckMark />
+          <CheckMark />
+          <UncheckMark />
+        </div>
+        <div class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
+          <div class="text-gray-500 dark:text-gray-400"></div>
+          <div>
+            <a
+              href="#"
+              class="text-white block w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-4 py-2.5 text-center dark:focus:ring-blue-900"
+            >
+              Buy now
+            </a>
+          </div>
+          <div>
+            <a
+              href="#"
+              class="text-white block w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-4 py-2.5 text-center dark:focus:ring-blue-900"
+            >
+              Buy now
+            </a>
+          </div>
+          <div>
+            <a
+              href="#"
+              class="text-white block w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-4 py-2.5 text-center dark:focus:ring-blue-900"
+            >
+              Buy now
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+ComparingPlans.propTypes = {
+  /**
+   * An array of the pricing plans
+   */
+  plans: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string,
+      title_ar: PropTypes.string,
+      subtitle: PropTypes.string,
+      subtitle_ar: PropTypes.string,
+      price: PropTypes.number,
+      currency: PropTypes.string,
+      cycleText: PropTypes.string,
+      buttonText: PropTypes.string,
+      features: PropTypes.array,
+      features_ar: PropTypes.array,
+      selectedPlan: PropTypes.bool
+    })
+  ),
+  lang: PropTypes.string
+};

package/src/blocks/Pricing/PricingPlans.js

@@ -1,10 +1,24 @@
 import React, { useState } from "react";
-import { HawaPricingCard, HawaPanelTabs } from "../../elements";
+import { HawaPricingCard, HawaPanelTabs, HawaTabs } from "../../elements";
 import PropTypes from "prop-types";
 
 export const PricingPlans = (props) => {
   const [currentCurrency, setCurrentCurrency] = useState("sar");
   const [currentCycle, setCurrentCycle] = useState("monthly");
+  let cycleOptions = [
+    { label: `Monthly`, value: `monthly` },
+    { label: `3 Months`, value: `3-months` },
+    { label: `6 Months`, value: `6-months` },
+    { label: `Annually`, value: `annually` }
+  ];
+  let currencyOptions = [
+    { label: `USD`, value: `usd` },
+    { label: `SAR`, value: `sar` }
+  ];
+  let activeTabStyle =
+    "inline-block py-3 px-4 text-white bg-blue-600 rounded-lg active";
+  let inactiveTabStyle =
+    "inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white";
   return (
     <div>
       <div
@@ -15,28 +29,23 @@ export const PricingPlans = (props) => {
           marginBottom: 10
         }}
       >
-        <HawaPanelTabs
-          location="inPricing"
-          handleChange={(e) => setCurrentCycle(e)}
-          defaultValue="monthly"
+        <HawaTabs
+          defaultValue={currentCycle}
           options={[
             { label: `Monthly`, value: `monthly` },
             { label: `3 Months`, value: `3-months` },
             { label: `6 Months`, value: `6-months` },
             { label: `Annually`, value: `annually` }
           ]}
+          onChangeTab={(e) => setCurrentCycle(e)}
         />
-
-        <HawaPanelTabs
-          location="inPricing"
-          handleChange={(e) => {
-            setCurrentCurrency(e);
-          }}
-          defaultValue="sar"
+        <HawaTabs
+          defaultValue={currentCurrency}
           options={[
             { label: `USD`, value: `usd` },
             { label: `SAR`, value: `sar` }
           ]}
+          onChangeTab={(e) => setCurrentCurrency(e)}
         />
       </div>
 

package/src/blocks/Pricing/index.js

@@ -1 +1,2 @@
 export * from "./PricingPlans";
+export * from "./ComparingPlans";

package/src/elements/DragDropImages.js

@@ -157,9 +157,8 @@ export const DragDropImages = ({
               e.stopPropagation();
               onClearFiles(acceptedFiles);
             }}
-          >
-            Clear All
-          </HawaButton>
+            text={"Clear All"}
+          />
         )}
 
         {thumbs && showPreview ? (

package/src/elements/HawaButton.js

@@ -1,17 +1,24 @@
 import React from "react";
+import { HawaTooltip } from "./HawaTooltip";
 
 export const HawaButton = (props) => {
+  let iconStyle = "pr-2 flex flex-col justify-center items-center";
   let styles =
-    "text-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
+    "m-1 px-2.5 py-2.5 text-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300       font-medium rounded-lg        text-sm  text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
   if (props.fullWidth) {
     styles =
-      "mt-2 w-full flex justify-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
+      "my-1 w-full flex justify-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
+  }
+  if (props.iconOnly) {
+    iconStyle = "flex flex-col justify-center items-center";
   }
   return (
-    <button type="button" className={styles} {...props}>
-      {props.icon ? <div class="mr-2 -ml-1 w-5 h-5">{props.icon}</div> : null}
-
-      {props.children}
+    <button data-tooltip-target={props.tooltip} type="button" className={styles} {...props}>
+      {props.tooltip && (
+        <HawaTooltip tooltipID={props.tooltip} content={props.tooltip} />
+      )}
+      {props.icon ? <div className={iconStyle}>{props.icon}</div> : null}
+      {!props.iconOnly && props.text}
     </button>
   );
 };

package/src/elements/HawaCheckbox.js

@@ -1,21 +1,18 @@
 import React from "react";
 
 export const HawaCheckbox = (props) => {
-  console.log("props : ", props);
   return (
-    <div class="flex items-center mb-4">
+    <div className="flex items-center h-full p-2">
       <input
-        id="default-checkbox"
         type="checkbox"
         value=""
-        class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+        className="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
       />
-      <label
-        for="default-checkbox"
-        class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-      >
-        Default checkbox
-      </label>
+      {props.label && (
+        <label className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+          {props.label}
+        </label>
+      )}
     </div>
 
     // <React.Fragment>

package/src/elements/HawaItemCard.js

@@ -2,177 +2,60 @@ import React from "react";
 import PropTypes from "prop-types";
 
 export const HawaItemCard = (props) => {
-  let isArabic = props.lang === "ar";
-  const handleParentClick = (e) => {
-    e.stopPropagation();
-    props.onCardClick();
-  };
   return (
-    <div
-      // href="#"
-      class="block pt-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md  dark:bg-gray-800 dark:border-gray-700 "
-    >
-      <div class="flex justify-end pr-6">
-        <button
-          id="dropdownButton"
-          data-dropdown-toggle="dropdown"
-          class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm"
-          type="button"
-        >
-          <span class="sr-only">Open dropdown</span>
-          <svg
-            class="w-6 h-6"
-            aria-hidden="true"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
-          </svg>
-        </button>
-        <div
-          id="dropdown"
-          class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
-        >
-          <ul class="py-1" aria-labelledby="dropdownButton">
-            <li>
-              <a
-                href="#"
-                class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-              >
-                Edit
-              </a>
-            </li>
-            <li>
-              <a
-                href="#"
-                class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-              >
-                Export Data
-              </a>
-            </li>
-            <li>
-              <a
-                href="#"
-                class="block py-2 px-4 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-              >
-                Delete
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="px-6">
-        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-          Noteworthy technology acquisitions 2021
-        </h5>
-        <p class="font-normal text-gray-700 dark:text-gray-400">
-          Here are the biggest enterprise technology acquisitions of 2021 so
-          far, in reverse chronological order.
-        </p>
-      </div>
-      <div className="p-3 mt-6 rounded-b-lg flex justify-end">
-        <div class="inline-flex rounded-md shadow-sm" role="group">
-          <button
-            type="button"
-            class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-l-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"
-          >
-            <svg
-              aria-hidden="true"
-              class="mr-0 w-4 h-4 fill-current"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
-                clip-rule="evenodd"
-              ></path>
-            </svg>
-            {/* Profile */}
-          </button>
+    <div class="block pt-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md  dark:bg-gray-800 dark:border-gray-700 ">
+      {props.headerActions && (
+        <div class="flex justify-end pr-6">
           <button
+            id="dropdownButton"
+            data-dropdown-toggle="dropdown"
+            class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm"
             type="button"
-            class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"
           >
+            <span class="sr-only">Open dropdown</span>
             <svg
+              class="w-6 h-6"
               aria-hidden="true"
-              class="mr-0 w-4 h-4 fill-current"
               fill="currentColor"
               viewBox="0 0 20 20"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path>
+              <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
             </svg>
-            {/* Settings */}
           </button>
-          <button
-            type="button"
-            class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-r-md border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"
+          <div
+            id="dropdown"
+            class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
           >
-            <svg
-              aria-hidden="true"
-              class="mr-0 w-4 h-4 fill-current"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z"
-                clip-rule="evenodd"
-              ></path>
-            </svg>
-            {/* Downloads */}
-          </button>
+            <ul class="py-1" aria-labelledby="dropdownButton">
+              {props.headerActions.map((action) => {
+                return (
+                  <li>
+                    <a
+                      href="#"
+                      class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+                    >
+                      {action.label}
+                    </a>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
         </div>
+      )}
+      <div class="px-6">
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+          {props.header}{" "}
+        </h5>
+        <p class="font-normal text-gray-700 dark:text-gray-400">
+          {props.content}
+        </p>
+      </div>
+      <div className="p-3 mt-6 rounded-b-lg flex justify-end">
+        {props.actions}
       </div>
     </div>
-
-    // <Container
-    //   onClick={handleParentClick}
-    //   maxWidth="xs"
-    //   variant="card-container"
-    //   dataValue="parent"
-    //   //   variant={props.selectedPlan ? "selected-plan-card" : "plan-card"}
-    //   style={{ direction: isArabic ? "rtl" : "ltr" }}
-    // >
-    //   {props.header && (
-    //     <Container style={{ zIndex: 20 }} variant="card-header">
-    //       {props.headerActions && (
-    //         <div
-    //           style={{
-    //             margin: 0,
-    //             marginRight: -20,
-    //             marginLeft: -20,
-    //             marginBottom: -20,
-    //             // backgroundColor: "red",
-    //             display: "flex",
-    //             paddingTop: 5,
-    //             paddingLeft: 5,
-    //             paddingRight: 5,
-    //             justifyContent: "flex-end"
-    //           }}
-    //         >
-    //           {props.headerActions}
-    //         </div>
-    //       )}
-    //       {props.header}
-    //     </Container>
-    //   )}
-    //   {props.content && (
-    //     <Container style={{ zIndex: 20 }} variant="card-content">
-    //       {props.content}
-    //     </Container>
-    //   )}
-
-    //   {props.actions && (
-    //     <Container style={{ zIndex: 20 }} variant="card-actions">
-    //       {props.actions}
-    //     </Container>
-    //   )}
-    // </Container>
   );
 };
 HawaItemCard.propTypes = {

package/src/elements/HawaModal.js

@@ -0,0 +1,73 @@
+import React from "react";
+import "flowbite";
+
+export const HawaModal = (props) => {
+  return (
+    <div
+      id={props.modalID}
+      tabindex="-1"
+      aria-hidden="true"
+      class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center"
+    >
+      <div class="relative p-4 w-full max-w-2xl h-full md:h-auto">
+        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+          <div class="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
+            <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+              Terms of Service
+            </h3>
+            <button
+              type="button"
+              class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+              data-modal-toggle="defaultModal"
+            >
+              <svg
+                aria-hidden="true"
+                class="w-5 h-5"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                  clip-rule="evenodd"
+                ></path>
+              </svg>
+              <span class="sr-only">Close modal</span>
+            </button>
+          </div>
+          <div class="p-6 space-y-6">
+            <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+              With less than a month to go before the European Union enacts new
+              consumer privacy laws for its citizens, companies around the world
+              are updating their terms of service agreements to comply.
+            </p>
+            <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+              The European Union’s General Data Protection Regulation (G.D.P.R.)
+              goes into effect on May 25 and is meant to ensure a common set of
+              data rights in the European Union. It requires organizations to
+              notify users as soon as possible of high-risk data breaches that
+              could personally affect them.
+            </p>
+          </div>
+          <div class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
+            <button
+              data-modal-toggle="defaultModal"
+              type="button"
+              class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+            >
+              I accept
+            </button>
+            <button
+              data-modal-toggle="defaultModal"
+              type="button"
+              class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
+            >
+              Decline
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};