Search logos

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);

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 (
     <div data-testid="app-container">
@@ -28,40 +37,31 @@ function App() {
       <div className="content">
         <h2>Usage</h2>
         <code>import ReactTechsLogs from 'react-techs-logos'</code>
-        <br/>
+        <br />
         <code>{`<ReactTechsLogos name="facebook" />`}</code>
-        <ReactTechsLogos name="facebook" />
-      </div>
-      <div className="content">
-        <h2 className="title">Single tech hiddenLabel</h2>
+        <h2 className="title">Hidden Label</h2>
         <code>{`<ReactTechsLogos name="facebook" hiddenLabel />`}</code>
-        <ReactTechsLogos name="facebook" hiddenLabel />
-      </div>
-      <div className="content limited">
-        <h2 className="title">List of techs limited</h2>
+        <h2 className="title">List of techs filtered</h2>
         <code>
           {`<ReactTechsLogos list={['vue', 'react', 'angular', 'ember']} />`}
         </code>
-        <ReactTechsLogos list={["vue", "react", "angular", "ember"]} />
-      </div>
-      <div className="content">
-        <h2 className="title">List of techs</h2>
-        <code>{`<ReactTechsLogos />`}</code>
-        <ReactTechsLogos />
-      </div>
-      <div className="content">
-        <h2 className="title">List of techs hiddenLogos items</h2>
+        <h2 className="title">List of techs hiddenLogos</h2>
         <code>
           {`<ReactTechsLogos hiddenLogos={['android', 'apple', 'vue', 'react', 'angular', 'ember']} />`}
         </code>
-        <ReactTechsLogos
-          hiddenLogos={["android", "apple", "vue", "react", "angular", "ember"]}
-        />
       </div>
       <div className="content">
-        <h2 className="title">List of techs with hiddenLabel</h2>
-        <code>{`<ReactTechsLogos hiddenLabel />`}</code>
-        <ReactTechsLogos hiddenLabel />
+        <h2 className="title">Full list of techs {search}</h2>
+        <code>{`<ReactTechsLogos />`}</code>
+        <br/>
+        <input
+          className="input-search"
+          type="text"
+          value={search}
+          onChange={(e: any) => setSearch(e.target.value)}
+          placeholder="Search logo name..."
+        />
+        <ReactTechsLogos list={filteredArray} />
       </div>
     </div>
   );

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;

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 {

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: <IconAndroid />,        url: 'https://www.android.com' },
   { name: 'Apple',          icon: <IconApple />,          url: 'https://www.apple.com' },
   { name: 'Linux',          icon: <IconLinux />,          url: 'https://ubuntu.com' },

src/components/ReactTechsLogos/types.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react'
+
+export interface Tech {
+  name: string;
+  icon: ReactElement;
+  url: string;
+}