Add Search

package.json

@@ -9,6 +9,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.2",
+    "remixicon": "^2.5.0",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

src/App.js

@@ -1,15 +1,18 @@
 import React from "react";
 import Header from "./components/Header";
 import Link from "./components/Link";
+import SearchBar from "./components/SearchBar";
 /* import Main from "./components/Main"; */
 
 const App = () => {
   return (
     <>
       <Header className="header" >
-        <Link/>
-        <p>Search</p>
-        <Link/>
+        <Link>Inicio</Link>
+        <Link>Hoy</Link>
+        <Link>Siguiendo</Link>
+        <SearchBar/>
+
       </Header>
       {/* <Main /> */}
     </>

src/components/Header.js

@@ -1,4 +1,5 @@
 import "../stylesheets/Header.css";
+import 'remixicon/fonts/remixicon.css';
 
 const Header = ({className,children}) => {
   return (

src/components/Link.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "./Link.css"
+import "../stylesheets/Link.css"
 
 export default function Link({href, children, ...props}) {
   return (

src/components/SearchBar.js

@@ -0,0 +1,12 @@
+import "../stylesheets/SearchBar.css";
+
+const SearchBar = () => {
+  return (
+    <div className="searchbar">
+      <i className="ri-search-line"></i>
+      <input placeholder="Buscar" />
+    </div>
+  );
+};
+
+export default SearchBar;

src/stylesheets/SearchBar.css

@@ -0,0 +1,26 @@
+.searchbar {
+  max-width: 944px;
+  padding: 16px;
+  background: var(--background-search);
+  border-radius: 24px;
+  display: flex;
+  gap: 8px;
+}
+
+.searchbar i {
+  color: var(--font-dark-gray);
+  font-weight: bold;
+}
+
+.searchbar input {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: var(--background-search);
+  color: var(--font-dark-gray);
+  font-size: 16px;
+}
+
+.searchbar input:focus{
+  outline: none;
+}