Created search input component.

src/components/search.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import '../styles/components/search.css'
+
+const Search = ({ posts, filterHandler }) => {
+
+  const onChangeHandler = event => {
+    const value = event.target.value.toUpperCase()
+    const filtered = posts.filter(({ node }) => {
+      const title = node.frontmatter.title || node.fields.slug
+      return title.toUpperCase().includes(value)
+    })
+    filterHandler(filtered)
+  }
+
+  return (
+    <input
+      className="search"
+      placeholder="Encuentra un artículo..."
+      onChange={onChangeHandler}
+    />
+  );
+}
+
+export default Search;

src/pages/index.js

@@ -1,18 +1,24 @@
-import React from "react"
+import React, { useState } from "react"
 import { Link, graphql } from "gatsby"
 
 import Layout from "../components/layout"
+import Search from "../components/search"
 import SEO from "../components/seo"
 import { rhythm } from "../utils/typography"
 
 const BlogIndex = ({ data, location }) => {
   const siteTitle = data.site.siteMetadata.title
   const posts = data.allMarkdownRemark.edges
+  const [filteredPosts, setFilteredPosts] = useState(posts)
 
   return (
     <Layout location={location} title={siteTitle}>
       <SEO title="All posts" />
-      {posts.map(({ node }) => {
+      <Search
+        posts={posts}
+        filterHandler={setFilteredPosts}
+      />
+      {filteredPosts.map(({ node }) => {
         const title = node.frontmatter.title || node.fields.slug
         return (
           <article key={node.fields.slug}>

src/styles/components/search.css

@@ -0,0 +1,14 @@
+.search {
+    border: none;
+    border-radius: 5px;
+    outline: none;
+    width: 100%;
+    background-color: #eaeaea;
+    font-weight: 500;
+    padding: 8px 16px;
+    margin-top: 2em;
+}
+
+.search, .search::placeholder {
+    color: #444444;
+}