feat: Add Family Link List on Header (#1572)

Author: DiegoMCMartins

directory/src/App.css

@@ -92,6 +92,10 @@ body {
   background-color: #f66;
 }
 
+.Result-Title > a, .Result-Title > a:link {
+  color: #fff;
+}
+
 .Result-List {
   display: flex;
   flex-wrap: wrap;
@@ -139,3 +143,31 @@ body {
   opacity: 0.8;
   margin: 10px 0 0 0;
 }
+
+
+.Family-Links-Container {
+  padding: 10px 20px 20px 20px;
+  background-color: #23527c;
+}
+
+.Family-Links-Content {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.Family-Links-Title {
+  color: #FFF;
+  font-size: 18px;
+  margin-top: 0;
+}
+
+.Family-Links-Link, .Family-Links-Link:link {
+  color: #FFF;
+  font-size: 16px;
+}
+
+.Family-Links-List {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}

directory/src/App.js

@@ -13,6 +13,23 @@ const Icon = React.memo(({ family, name, ...props }) => (
   </span>
 ));
 
+const FamiliesLinks = ({matches = []}) => {
+  return (
+    <div className="Family-Links-Container">
+      <div className="Family-Links-Content">
+        <h2 className="Family-Links-Title">Icon Families:</h2>
+        <div className="Family-Links-List">
+          {matches.map(match => {
+            const { family } = match;
+
+            return <a className="Family-Links-Link" href={`#${family}`}>{family}</a>;
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
 const HeaderBar = () => {
   return (
     <div className="Header-Container">
@@ -80,7 +97,7 @@ const renderMatch = match => {
   const { family, names } = match;
   return (
     <div className="Result-Row" key={family}>
-      <h2 className="Result-Title">{family}</h2>
+      <h2 className="Result-Title" id={family}>{family}</h2>
 
       <div className="Result-List">
         {names.map(name => renderIcon(family, name))}
@@ -117,6 +134,7 @@ const App = () => {
     <div className="App">
       <HeaderBar />
       <SearchBar onSubmit={handleSubmit} />
+      <FamiliesLinks matches={matches} />
       <div className="Container">
         {matches.length === 0 ? renderNotFound() : matches.map(renderMatch)}
       </div>