nestiq-component-library 1.0.6 → 1.0.8

package/src/components/SharePopup/PopUp.tsx

@@ -0,0 +1,99 @@
+import React, { useRef } from "react";
+import { toast } from "react-toastify";
+import email from "../../../assets/Images/envelope-fill.svg";
+import facebook from "../../../assets/Images/facebook.svg";
+import x from "../../../assets/Images/icon_close 2.png";
+import linkedln from "../../../assets/Images/linkedin.svg";
+import Xtwitter from "../../../assets/Images/twitter-x.svg";
+import whatsapp from "../../../assets/Images/whatsapp.svg";
+import "./PopUp.css";
+
+export default function PopUp({ onClick }) {
+  const handleClose = () => {
+    onClick();
+  };
+
+  const urlInputRef = useRef(null);
+
+  const copyToClipboard = () => {
+    urlInputRef.current.select();
+    document.execCommand("copy");
+    toast.success("URL copied to clipboard!");
+  };
+
+  return (
+    <div className="popup-overlay">
+      <div className="shareSection  col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4">
+        <div className="end-0 top-0 position-absolute ">
+          <img
+            src={x}
+            alt="close"
+            className="closeIcon me-2"
+            onClick={handleClose}
+          />
+        </div>
+        <div className="popUpHeader col-lg-12 d-flex justify-content-center mb-2">
+          Jetzt teilen und weitersagen!
+        </div>
+        <div className="h-25 col-lg-12 socialMediaIconsSection d-flex flex-row align-items-center justify-content-center mx-auto">
+        
+        <a href="https://twitter.com/intent/tweet?url=https://www.nestiq.de&text=Nestiq" className="text-decoration-none" target="blank">
+          <div className=" flex-column d-flex align-items-center">
+            <img src={Xtwitter} alt="twitter" className="socialMediaIcons" />
+            <span className="socialMediaIconText" >Xtwitter</span>
+          </div>
+          </a>
+
+          <a href="https://www.facebook.com/sharer/sharer.php?u=https://www.nestiq.de" className="text-decoration-none" target="blank" >
+          <div className=" flex-column d-flex align-items-center">
+            <img src={facebook} alt="facebook" className="socialMediaIcons " />
+            <span className="socialMediaIconText">Facebook</span>
+          </div>
+          </a>
+
+          <a href="https://api.whatsapp.com/send?text=https://www.nestiq.de" target="blank" className="text-decoration-none">
+          <div className=" flex-column d-flex  align-items-center">
+            <img src={whatsapp} alt="whatsapp" className=" socialMediaIcons" />
+            <span className="socialMediaIconText">WhatsApp</span>
+          </div>
+          </a>
+          
+          <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.nestiq.de" target="blank" className="text-decoration-none">
+          <div className=" flex-column d-flex  align-items-center">
+            <img src={linkedln} alt="linkedin" className=" socialMediaIcons" />
+            <span className="socialMediaIconText">LinkedIn</span>
+          </div>
+          </a>
+
+          <a href="https://www.nestiq.de" target="blank" className="text-decoration-none">
+          <div className=" flex-column d-flex  align-items-center">
+            <img src={email} alt="email" className=" socialMediaIcons" />
+            <span className="socialMediaIconText">E-mail</span>
+          </div>
+          </a>
+
+        </div>
+        <div className="col-10 mx-auto">
+          <div className=" row align-items-center position-relative">
+            <input
+              ref={urlInputRef}
+              type="text"
+              className="popup_search-input rounded-4 border border-0 "
+              placeholder="Enter link here"
+              value={window.location.href}
+              readOnly
+            />
+            <button
+              onClick={copyToClipboard}
+              className="popupcustom-button border border-0 position-absolute me-2 col-lg-3 col-md-3 col-sm-3 rounded-4 fs-6"
+              type="button"
+              id="button"
+            >
+              <strong>Kopieren</strong>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/index.tsx

@@ -1,3 +1,3 @@
-export { default as Button } from "./components/Button/Button";
-export { default as Popup } from "./components/Popup/Popup";
-export { default as ImageListPopup } from "./components/ImageListPopup/ImageListPopup";
+export { default as Button } from "./components/Button/Button";
+export { default as Popup } from "./components/Popup/Popup";
+export { default as ImageListPopup } from "./components/ImageListPopup/ImageListPopup";

package/dist/assets/images/blackarrow-Right.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
-</svg>

package/dist/assets/images/blckarrow-Left.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/>
-</svg>

package/src/assets/images/blackarrow-Right.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
-</svg>

package/src/assets/images/blckarrow-Left.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/>
-</svg>