diff --git a/package-lock.json b/package-lock.json index 3aa8396..8d1f677 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,17 +1,17 @@ { "name": "react-techs-logos", - "version": "0.1.10", + "version": "0.1.12", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "react-techs-logos", - "version": "0.1.10", + "version": "0.1.12", "dependencies": { "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", @@ -4379,14 +4379,14 @@ } }, "node_modules/react-techs-logos": { - "version": "0.1.10", - "resolved": "https://registry.npmjs.org/react-techs-logos/-/react-techs-logos-0.1.10.tgz", - "integrity": "sha512-ibGGStmhROR5Vg3cziyLHYa/YZoM0Zr+3g7zW7+mcoywu1egOOEhZygo9HHn0MLZa6n40PPRU3mVmuD5LZYAig==", + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/react-techs-logos/-/react-techs-logos-0.1.12.tgz", + "integrity": "sha512-1MyzRXE285s2n5ETKjIRHogHJpqDydMstlnLjqfqd4ATP48UYG7FEua/OC2jIN0/aYfoym9KF2i2b1yI2TObIA==", "dependencies": { "darkmode-react-component": "^0.1.7", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-techs-logos": "^0.1.9" + "react-techs-logos": "^0.1.11" } }, "node_modules/readdirp": { diff --git a/package.json b/package.json index 0eb0d8a..57f9814 100644 --- a/package.json +++ b/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", diff --git a/src/App.css b/src/App.css index 901e12f..003f24c 100644 --- a/src/App.css +++ b/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,6 +59,21 @@ 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; @@ -65,7 +81,7 @@ code { .input-search { padding: 1rem; - margin-bottom: 1rem; + margin: 1rem 0; border-radius: 10px; background: var(--vtl-background); border: 2px solid var(--vtl-background); diff --git a/src/App.tsx b/src/App.tsx index 06cc703..08bfcda 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,13 +3,15 @@ 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(); @@ -17,6 +19,14 @@ function App() { }) .map((item) => item.name); + useLayoutEffect(() => { + if (modalInstall) { + document.body.classList.add("modal-active"); + } else { + document.body.classList.remove("modal-active"); + } + }, [modalInstall]); + return (
npm install --save react-techs-logos
- import ReactTechsLogs from 'react-techs-logos'
- {` `}
- {` `}
-
- {` `}
-
-
- {` `}
-
- {` `}
- npm install --save react-techs-logos
+ import ReactTechsLogs from 'react-techs-logos'
+ {` `}
+ {` `}
+
+ {` `}
+
+
+ {` `}
+
+