nestiq-component-library 1.0.25 → 1.0.27

package/src/components/SharePopup/PopUp.css

@@ -0,0 +1,359 @@
+.popup-overlay {
+  position: fixed; /* Fixed position to cover the whole screen */
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color:  rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+  display: flex; /* Flexbox to center the popup */
+  justify-content: center; /* Center horizontally */
+  align-items: center; /* Center vertically */
+  z-index: 2000; /* Ensure it's above other content */
+ 
+}
+
+.shareSection {
+  height: 340px;
+  padding: 40px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  border: solid 1px #d7d9e3;
+  background-color: #fff;
+  
+}
+.popUpHeader {
+  height: 48px;
+  font-size: 32px;
+  font-weight: 600;
+  color: #1b1b1b;
+}
+
+.closeIcon {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.socialMediaIconsSection {
+  gap: 60px !important;
+}
+
+.socialMediaIcons {
+  width: 28px !important;
+  height: 28px !important;
+  cursor: pointer;
+}
+
+.socialMediaIconText {
+  height: 36px;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 3;
+  color: #344041;
+  cursor: pointer;
+}
+
+.popup_search-input {
+  height: 60px;
+  padding-inline-end: 190px;
+  font-size: 20px;
+  box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.popup_search-input::placeholder {
+  font-size: 20px;
+  color: rgba(140, 140, 140, 0.5);
+}
+
+.popup_search-input:focus {
+  outline: none;
+}
+
+.popupcustom-button {
+  height: 35px;
+  color: #000;
+  cursor: pointer;
+  border-color: #ffb525;
+  right: 0;
+  z-index: 1;
+  background-color: #ffb525;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+}
+.button-text {
+  width: 115px;
+  height: 19px;
+  flex-grow: 0;
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: center;
+}
+.button_success-right {
+  width: 184px;
+  height: 43px;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border-radius: 16px;
+  border-color: #000;
+  background-color: transparent;
+}
+.button_success-left {
+  width: 200px;
+  height: 43px;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  background-color: #ffb525;
+}
+.shareSection-Success {
+  height: 510px;
+  padding: 40px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  border: solid 1px #d7d9e3;
+  background-color: #fff;
+}
+.shareSection-Error {
+  height: 400px;
+  padding:10px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  border: solid 1px #d7d9e3;
+  background-color: #fff;
+}
+.MessageShareSection {
+  height: 513px;
+  padding: 14px 14px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  border: solid 1px #d7d9e3;
+  background-color: #fff;
+}
+
+.popup-tags {
+  font-size: large;
+  font-weight: bold;
+}
+.button_icon-left {
+  width: 184px;
+  height: 43px;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  background-color: #ffb525;
+}
+.button-text {
+  width: 85px;
+  height: 19px;
+  flex-grow: 0;
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: center;
+}
+.button_icon-right {
+  width: 184px;
+  height: 43px;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border-radius: 16px;
+  border-color: #000;
+  background-color: transparent;
+}
+.circle {
+  height: 55px;
+  width: 55px;
+  background-color: transparent;
+  border-radius: 50%;
+  border-style: solid;
+  border-color: #000;
+  border-width: 2px;
+}
+.Line-9, .Line-10 {
+  height: 1px;
+  flex-grow: 1;
+  background-color: rgba(140, 140, 140, 0.5);
+  max-width:23rem;
+  align-self: center;
+  align-content: center;
+ 
+}
+
+.middle-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.middle-text {
+  margin: 25px 25px;
+}
+.google-button{
+  width: 260px;
+  height: 45px;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border-radius: 4px;
+  background-color: #000000;
+  background: linear-gradient(to top, #000 , #666 );
+  
+  
+}
+.Account-popup{
+   
+    height: 713px;
+    padding: 10px;
+    border-radius: 16px;
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+    border: solid 1px #d7d9e3;
+    background-color: #fff;
+    max-width: 1000px;
+  
+}
+.lightertxt{
+  color: #797979;
+}
+
+.filter {
+  height: 343px;
+  align-self: stretch;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 32px;
+  border-radius: 32px;
+  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);
+  background-color: #f2f2f2;
+}
+.loginFilter {
+  height: 280px;
+  align-self: stretch;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 32px;
+  border-radius: 32px;
+  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);
+  background-color: #f2f2f2;
+}
+.radioLabel {
+  width: 176px;
+  height: 19px;
+  flex-grow: 0;
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: left;
+  color: #1b1b1b;
+}
+.goButton-text {
+  width: 78px;
+  height: 19px;
+  flex-grow: 0;
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: center;
+  color: #1b1b1b;
+}
+.placeholders {
+  width: 232px;
+  height: 45px;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border-radius: 4px;
+  background-image: linear-gradient(to top, #000 100%, #666 0%);
+}
+.TagW.active {
+  height: 40px;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  padding: 0 24px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  background-image: linear-gradient(to top, #000 , #666);
+  color: white;
+}
+.Tag {
+  height: 40px;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  padding: 0 24px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+background-image: linear-gradient(to top, rgba(255, 0, 0, 0), rgba(255,0,0,1));}
+.TagW {
+  height: 40px;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  padding: 0 24px;
+  border-radius: 16px;
+  border: solid 1px #000;
+  background-color: #fff;
+    color: #000;
+
+}
+/* */

package/src/components/SharePopup/PopUp.tsx

@@ -0,0 +1,130 @@
+import React, { useRef } from "react";
+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";
+
+interface Popupprops {
+  onClick: () => void;
+}
+export default function PopUp(props: Popupprops) {
+  const handleClose = () => {
+    props.onClick();
+  };
+  const urlInputRef = useRef<HTMLInputElement | null>(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/tsconfig.json

@@ -11,6 +11,8 @@
     "forceConsistentCasingInFileNames": true,
     "moduleResolution": "node",
     "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
     "baseUrl": ".",
     "paths": {
       "*": ["node_modules/*", "src/types/*"]