Modal install

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-techs-logos",
   "private": false,
-  "version": "0.1.10",
+  "version": "0.1.12",
   "type": "module",
   "files": [
     "dist"
@@ -33,7 +33,7 @@
     "darkmode-react-component": "^0.1.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-techs-logos": "^0.1.10"
+    "react-techs-logos": "^0.1.12"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.2.0",

src/App.css

@@ -42,6 +42,7 @@ code {
   border-radius: 10px;
   display: inline-block;
   margin-bottom: 1rem;
+  border: 1px solid rgba(255,255,255,.2)
 }
 
 .content {
@@ -58,14 +59,29 @@ code {
   margin-top: 0;
 }
 
+.content button {
+  background: var(--vtl-background-gradient);
+  color: var(--vtl-text);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  border: 1px solid var(--vtl-background);
+  padding: .5rem 1rem .5rem .5rem;
+  cursor: pointer;
+}
+.content button svg {
+  margin-right: 1rem;
+}
+
 .limited .techs {
   align-items: flex-start !important;
   justify-content: flex-start !important;
 }
 
 .input-search {
   padding: 1rem;
-  margin-bottom: 1rem;
+  margin: 1rem 0;
   border-radius: 10px;
   background: var(--vtl-background);
   border: 2px solid var(--vtl-background);

src/App.tsx

@@ -3,20 +3,30 @@ import "./App.css";
 import pkg from "../package.json";
 import DarkModeReact from "darkmode-react-component";
 import ReactTechsLogos from "./components/ReactTechsLogos";
-import { useState } from "react";
+import ModalInstall from "./components/ModalInstall";
+import { useLayoutEffect, useState } from "react";
 import techs from "./components/ReactTechsLogos/techs";
 // import ReactTechsLogos from 'react-techs-logos'
 
 function App() {
   const version: string = pkg.version;
   const [search, setSearch] = useState("");
+  const [modalInstall, setModalInstall] = useState(false);
   const filteredArray = techs
     .filter((item: any) => {
       const nameItem = item.name.toLowerCase();
       return nameItem.includes(search.trim().toLowerCase());
     })
     .map((item) => item.name);
 
+  useLayoutEffect(() => {
+    if (modalInstall) {
+      document.body.classList.add("modal-active");
+    } else {
+      document.body.classList.remove("modal-active");
+    }
+  }, [modalInstall]);
+
   return (
     <div data-testid="app-container">
       <div>
@@ -30,30 +40,27 @@ function App() {
         </a>
         <DarkModeReact hiddenLabel />
       </div>
+      <ModalInstall
+        active={modalInstall}
+        closeModal={() => setModalInstall(false)}
+      />
       <div className="content">
-        <h2>Install</h2>
-        <code>npm install --save react-techs-logos</code>
-      </div>
-      <div className="content">
-        <h2>Usage</h2>
-        <code>import ReactTechsLogs from 'react-techs-logos'</code>
-        <br />
-        <code>{`<ReactTechsLogos name="facebook" />`}</code>
-        <h2 className="title">Hidden Label</h2>
-        <code>{`<ReactTechsLogos name="facebook" hiddenLabel />`}</code>
-        <h2 className="title">List of techs filtered</h2>
-        <code>
-          {`<ReactTechsLogos list={['vue', 'react', 'angular', 'ember']} />`}
-        </code>
-        <h2 className="title">List of techs hiddenLogos</h2>
-        <code>
-          {`<ReactTechsLogos hiddenLogos={['android', 'apple', 'vue', 'react', 'angular', 'ember']} />`}
-        </code>
-      </div>
-      <div className="content">
-        <h2 className="title">Full list of techs {search}</h2>
+        <h2 className="title">Full list of techs</h2>
         <code>{`<ReactTechsLogos />`}</code>
-        <br/>
+        <button type="button" onClick={() => setModalInstall(true)}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            version="1.1"
+            width={40}
+            height={40}
+            viewBox="0 0 512 512"
+            fill="var(--vtl-background-svg)"
+          >
+            <path d="m499.139 318.571-37.178-5.407a6.15 6.15 0 0 1-5.228-3.8l-12.054-29.086a6.116 6.116 0 0 1 1-6.379l22.243-29.88c3.533-4.141 3.301-10.314-.554-14.168l-17.602-17.594c-3.846-3.854-10.029-4.104-14.159-.553l-29.889 22.233a6.159 6.159 0 0 1-6.38 1.018l-29.094-12.062a6.213 6.213 0 0 1-3.81-5.228l-5.389-37.169c-.428-5.442-4.96-9.635-10.402-9.635H325.75c-5.45 0-9.983 4.193-10.402 9.635l-5.407 37.169a6.142 6.142 0 0 1-3.792 5.228l-29.103 12.062a6.176 6.176 0 0 1-6.388-1.018l-29.872-22.233c-4.13-3.542-10.304-3.302-14.167.553l-17.594 17.594c-3.854 3.854-4.086 10.028-.554 14.168l22.234 29.888a6.143 6.143 0 0 1 1.009 6.371l-12.054 29.086c-.874 2.159-2.908 3.622-5.219 3.81l-37.195 5.398a10.445 10.445 0 0 0-9.618 10.412v24.883c0 5.442 4.194 9.993 9.618 10.403l37.195 5.398a6.177 6.177 0 0 1 5.219 3.81l12.054 29.086c.901 2.159.5 4.63-1.009 6.388l-22.234 29.889a10.45 10.45 0 0 0 .554 14.168l17.594 17.594c3.863 3.854 10.037 4.086 14.167.544l29.872-22.243a6.191 6.191 0 0 1 6.388-.998l29.103 12.044a6.208 6.208 0 0 1 3.802 5.246l5.398 37.169c.428 5.433 4.952 9.636 10.402 9.636h24.893c5.451 0 9.974-4.203 10.402-9.636l5.389-37.169a6.23 6.23 0 0 1 3.81-5.246l29.103-12.044a6.173 6.173 0 0 1 6.379.998l29.881 22.243c4.13 3.542 10.314 3.31 14.159-.544l17.602-17.594a10.441 10.441 0 0 0 .554-14.168l-22.243-29.889a6.186 6.186 0 0 1-1-6.388l12.054-29.086a6.19 6.19 0 0 1 5.228-3.81l37.178-5.398c5.434-.41 9.627-4.961 9.627-10.403v-24.883a10.448 10.448 0 0 0-9.628-10.413zm-120.046 63.757c-10.93 10.912-25.445 16.926-40.898 16.926-15.444 0-29.978-6.014-40.898-16.926-10.92-10.938-16.943-25.454-16.943-40.907 0-15.444 6.022-29.969 16.943-40.89 10.92-10.939 25.454-16.934 40.898-16.934 15.454 0 29.969 5.995 40.898 16.934 10.92 10.92 16.934 25.446 16.934 40.89 0 15.453-6.013 29.969-16.934 40.907z" />
+            <path d="M187.351 252.156a8.174 8.174 0 0 0 5.122-9.868l-5.898-28.854a4.896 4.896 0 0 1 1.419-4.88l18.263-16.621a4.855 4.855 0 0 1 4.97-.946l27.961 8.466c3.989 1.508 8.485-.294 10.306-4.166l8.297-17.656a8.15 8.15 0 0 0-3.346-10.591l-24.339-16.14c-1.58-.91-2.535-2.632-2.436-4.452l1.16-24.66a4.873 4.873 0 0 1 2.838-4.194l26.008-13.874c3.898-1.74 5.781-6.218 4.336-10.215l-6.603-18.371a8.194 8.194 0 0 0-9.876-5.121l-28.863 5.879c-1.767.5-3.632-.053-4.871-1.41L195.185 56.23a4.795 4.795 0 0 1-.955-4.978l8.468-27.944c1.507-4.006-.294-8.494-4.175-10.306l-17.648-8.306c-3.872-1.821-8.494-.366-10.608 3.354l-16.131 24.34a4.86 4.86 0 0 1-4.444 2.445l-24.66-1.169a4.878 4.878 0 0 1-4.202-2.847L106.974 4.821A8.186 8.186 0 0 0 96.74.485L78.379 7.096a8.158 8.158 0 0 0-5.112 9.859l5.888 28.872a4.83 4.83 0 0 1-1.418 4.862l-18.264 16.63a4.884 4.884 0 0 1-4.987.955l-27.944-8.476c-3.988-1.516-8.476.304-10.305 4.175L7.939 81.622c-1.82 3.872-.366 8.494 3.346 10.599l24.339 16.14a4.806 4.806 0 0 1 2.436 4.435l-1.16 24.66a4.814 4.814 0 0 1-2.837 4.193L8.055 155.522a8.167 8.167 0 0 0-4.336 10.216l6.611 18.37a8.19 8.19 0 0 0 9.859 5.131l28.881-5.906a4.835 4.835 0 0 1 4.862 1.427l16.612 18.255a4.845 4.845 0 0 1 .954 4.987l-8.466 27.944c-1.499 3.997.304 8.485 4.175 10.305l17.648 8.297a8.19 8.19 0 0 0 10.608-3.346l16.122-24.348c.91-1.57 2.623-2.534 4.452-2.428l24.661 1.16a4.873 4.873 0 0 1 4.211 2.846l13.847 25.989c1.767 3.9 6.219 5.8 10.233 4.354l18.362-6.619zm-39.122-79.86c-11.394 4.095-23.714 3.524-34.68-1.633-10.965-5.157-19.245-14.275-23.358-25.678-4.095-11.402-3.524-23.714 1.634-34.67 5.156-10.974 14.283-19.254 25.677-23.357 11.402-4.105 23.714-3.534 34.67 1.641 10.956 5.139 19.254 14.258 23.366 25.66 4.096 11.403 3.516 23.706-1.632 34.672-5.175 10.955-14.285 19.252-25.677 23.365z" />
+          </svg>
+          Learn install
+        </button>
         <input
           className="input-search"
           type="text"

src/components/ModalInstall/index.tsx

@@ -0,0 +1,42 @@
+import "./style.scss";
+
+function ModalInstall(props: any) {
+  return (
+    <div className={`modal ${props.active && "active"}`}>
+      <button className="modal-button" onClick={props.closeModal}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="#f00"
+            d="M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2Zm3.36 12.3c.29.29.29.77 0 1.06-.15.15-.34.22-.53.22s-.38-.07-.53-.22l-2.3-2.3-2.3 2.3c-.15.15-.34.22-.53.22s-.38-.07-.53-.22a.754.754 0 0 1 0-1.06l2.3-2.3-2.3-2.3a.754.754 0 0 1 0-1.06c.29-.29.77-.29 1.06 0l2.3 2.3 2.3-2.3c.29-.29.77-.29 1.06 0 .29.29.29.77 0 1.06l-2.3 2.3 2.3 2.3Z"
+          />
+        </svg>
+      </button>
+      <div className="modal-content">
+        <h2>Install</h2>
+        <code>npm install --save react-techs-logos</code>
+        <h2>Usage</h2>
+        <code>import ReactTechsLogs from 'react-techs-logos'</code>
+        <br />
+        <code>{`<ReactTechsLogos name="facebook" />`}</code>
+        <h2 className="title">Hidden Label</h2>
+        <code>{`<ReactTechsLogos name="facebook" hiddenLabel />`}</code>
+        <h2 className="title">List of techs filtered</h2>
+        <code>
+          {`<ReactTechsLogos list={['vue', 'react', 'angular', 'ember']} />`}
+        </code>
+        <h2 className="title">List of techs hiddenLogos</h2>
+        <code>
+          {`<ReactTechsLogos hiddenLogos={['android', 'apple', 'vue', 'react', 'angular', 'ember']} />`}
+        </code>
+      </div>
+    </div>
+  );
+}
+
+export default ModalInstall;

src/components/ModalInstall/style.scss

@@ -0,0 +1,48 @@
+.modal {
+  background: var(--vtl-background);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 11;
+  backdrop-filter: blur(20px);
+  opacity: 0;
+  pointer-events: none;
+  transition: .5s all;
+  &.active {
+    opacity: 1;
+    pointer-events: all;
+  }
+}
+
+.modal-content {
+  background: var(--vtl-background);
+  overflow: auto;
+  border-radius: 20px;
+  margin: 3rem;
+  padding: 2rem;
+  height: calc(100% - 10rem);
+  h2:first-of-type {
+    margin-top: 0;
+  }
+  code:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
+.modal-button {
+  position: absolute;
+  top: 2.5rem;
+  right: 2.5rem;
+  z-index: 11;
+  cursor: pointer;
+  background-color: #fff;
+  border: 0;
+  border-radius: 100px;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: scale(2);
+}

src/index.css

@@ -32,3 +32,7 @@ body.darkmode {
   color: rgba(255, 255, 255, 0.87);
   background-color: #242424;
 }
+
+body.modal-active {
+  overflow: hidden;
+}