diff --git a/src/App.css b/src/App.css
index bdb9ff0..901e12f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,6 @@
#root {
max-width: 1280px;
+ width: 100%;
margin: 0 auto;
}
@@ -62,6 +63,16 @@ code {
justify-content: flex-start !important;
}
+.input-search {
+ padding: 1rem;
+ margin-bottom: 1rem;
+ border-radius: 10px;
+ background: var(--vtl-background);
+ border: 2px solid var(--vtl-background);
+ color: var(--vtl-text);
+ width: calc(100% - 2rem);
+}
+
@keyframes logo-spin {
from {
transform: rotate(0deg);
diff --git a/src/App.tsx b/src/App.tsx
index 3049eee..06cc703 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,12 +1,21 @@
import reactLogo from "./assets/techs/react.svg";
import "./App.css";
import pkg from "../package.json";
-import DarkModeReact from 'darkmode-react-component';
+import DarkModeReact from "darkmode-react-component";
import ReactTechsLogos from "./components/ReactTechsLogos";
+import { 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 filteredArray = techs
+ .filter((item: any) => {
+ const nameItem = item.name.toLowerCase();
+ return nameItem.includes(search.trim().toLowerCase());
+ })
+ .map((item) => item.name);
return (
@@ -28,40 +37,31 @@ function App() {
Usage
import ReactTechsLogs from 'react-techs-logos'
-
+
{``}
-
-
-
-
Single tech hiddenLabel
+ Hidden Label
{``}
-
-
-
-
List of techs limited
+ List of techs filtered
{``}
-
-
-
-
List of techs
- {``}
-
-
-
-
List of techs hiddenLogos items
+ List of techs hiddenLogos
{``}
-
-
List of techs with hiddenLabel
- {``}
-
+ Full list of techs {search}
+ {``}
+
+ setSearch(e.target.value)}
+ placeholder="Search logo name..."
+ />
+
);
diff --git a/src/components/ReactTechsLogos/index.tsx b/src/components/ReactTechsLogos/index.tsx
index a79be0b..bc1aba9 100644
--- a/src/components/ReactTechsLogos/index.tsx
+++ b/src/components/ReactTechsLogos/index.tsx
@@ -1,26 +1,33 @@
-import "./style.scss"
-import techs from "./techs"
+import "./style.scss";
+import { Tech } from "./types";
+import techs from "./techs";
const getTech: any = (name: string) => {
- return techs.find((item) => item.name.toLowerCase() == name.toLowerCase())
+ return techs.find((item) => item.name.toLowerCase() == name.toLowerCase());
};
-const getTechs = (items: any) =>
- techs.filter((tech) =>
- items.find((item: any) => {
- return tech.name.toLowerCase() == item.toLowerCase()
+const getTechs = (items: string[]) => {
+ const lowercasedArray = items.map((item: string) => item.toLowerCase());
+ return techs.filter((tech: Tech) =>
+ lowercasedArray.find((item: string) => {
+ return tech.name.toLowerCase() == item.toLowerCase();
})
- )
+ );
+};
-const hiddenTechs = (items: any) =>
- techs.filter((item) => !items.includes(item.name.toLocaleLowerCase()))
+const hiddenTechs = (items: string[]) => {
+ const lowercasedArray = items.map((item: string) => item.toLowerCase());
+ return techs.filter(
+ (item: Tech) => !lowercasedArray.includes(item.name.toLocaleLowerCase())
+ );
+};
function ReactTechsLogos(props: any) {
const listTechs = props.list
? getTechs(props.list)
: props.hiddenLogos
? hiddenTechs(props.hiddenLogos)
- : techs
+ : techs;
return (
<>
@@ -64,4 +71,4 @@ function ReactTechsLogos(props: any) {
);
}
-export default ReactTechsLogos
+export default ReactTechsLogos;
diff --git a/src/components/ReactTechsLogos/style.scss b/src/components/ReactTechsLogos/style.scss
index 56f77f6..6b4817b 100644
--- a/src/components/ReactTechsLogos/style.scss
+++ b/src/components/ReactTechsLogos/style.scss
@@ -11,7 +11,8 @@
}
figure.tech-container {
- background: var(--vtl-background);
+ background: transparent;
+ border: 1px solid var(--vtl-background);
border-radius: 100px;
width: 120px !important;
height: 120px;
@@ -20,7 +21,10 @@ figure.tech-container {
align-items: center;
justify-content: center;
flex-direction: column;
+ transition: .3s all;
&:hover {
+ background: var(--vtl-background);
+ border-color: var(--vtl-background);
transform: scale(1.1);
}
svg {
diff --git a/src/components/ReactTechsLogos/techs.tsx b/src/components/ReactTechsLogos/techs.tsx
index c6142d7..4637a3d 100644
--- a/src/components/ReactTechsLogos/techs.tsx
+++ b/src/components/ReactTechsLogos/techs.tsx
@@ -87,7 +87,9 @@ import IconGemini from '../../assets/techs/gemini.svg?react'
import IconShopify from '../../assets/techs/shopify.svg?react'
import IconSteam from '../../assets/techs/steam.svg?react'
-const techs = [
+import { Tech } from './types'
+
+const techs: Tech[] = [
{ name: 'Android', icon: , url: 'https://www.android.com' },
{ name: 'Apple', icon: , url: 'https://www.apple.com' },
{ name: 'Linux', icon: , url: 'https://ubuntu.com' },
diff --git a/src/components/ReactTechsLogos/types.ts b/src/components/ReactTechsLogos/types.ts
new file mode 100644
index 0000000..de404a6
--- /dev/null
+++ b/src/components/ReactTechsLogos/types.ts
@@ -0,0 +1,7 @@
+import { ReactElement } from 'react'
+
+export interface Tech {
+ name: string;
+ icon: ReactElement;
+ url: string;
+}