feature/add-search-component

src/components/Header.tsx

@@ -5,6 +5,7 @@ import { Link } from 'gatsby';
 
 import { colors, heights, widths } from 'styles/variables';
 import Container from 'components/Container';
+import IconSearch from 'components/icons/IconSearch';
 import logo from 'images/logo.svg';
 import getEmSize from 'styles/getEmSize';
 
@@ -31,6 +32,10 @@ const HomepageLink = styled(Link)({
   },
 });
 
+const SearchLink = styled(Link)({
+  justifyContent: 'flex-end',
+});
+
 const Logo = styled.img({
   width: 45,
 });
@@ -41,6 +46,9 @@ const Header: React.FC = () => (
       <HomepageLink to="/">
         <Logo src={logo} alt="Zap" />
       </HomepageLink>
+      <SearchLink to="/search">
+        <IconSearch />
+      </SearchLink>
     </HeaderInner>
   </StyledHeader>
 );

src/components/Container.tsx → src/components/containers/PostsContainer.tsx

@@ -17,8 +17,8 @@ interface ContainerProps {
   children?: ReactNode;
 }
 
-const Container: React.FC<ContainerProps> = ({ children, className }) => (
+const PostsContainer: React.FC<ContainerProps> = ({ children, className }) => (
   <StyledContainer className={className}>{children}</StyledContainer>
 );
 
-export default Container;
+export default PostsContainer;

src/components/containers/SearchContainer.tsx

@@ -0,0 +1,24 @@
+import React, { ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+import { widths } from 'styles/variables';
+import getEmSize from 'styles/getEmSize';
+
+const StyledContainer = styled.div({
+  position: 'relative',
+  marginLeft: 'auto',
+  marginRight: 'auto',
+  width: 'auto',
+  maxWidth: `${getEmSize(widths.md)}em`,
+});
+
+interface ContainerProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const SearchContainer: React.FC<ContainerProps> = ({ children, className }) => (
+  <StyledContainer className={className}>{children}</StyledContainer>
+);
+
+export default SearchContainer;

src/components/icons/SearchIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import { colors } from 'styles/variables';
+
+const Container = styled.svg({
+  width: 28,
+  height: 28,
+})
+
+const Icon = styled.path({
+  color: colors.light.fg.primary,
+})
+
+const IconSearch: React.FC = () => (
+  <Container>
+    <Icon
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M18.4475 17.3825H19.6325L27.1175 24.8825L24.8825 27.1175L17.3825 19.6325V18.4475L16.9775 18.0275C15.2675 19.4975 13.0475 20.3825 10.6325 20.3825C5.24751 20.3825 0.882507 16.0175 0.882507 10.6325C0.882507 5.24751 5.24751 0.882507 10.6325 0.882507C16.0175 0.882507 20.3825 5.24751 20.3825 10.6325C20.3825 13.0475 19.4975 15.2675 18.0275 16.9775L18.4475 17.3825ZM3.88251 10.6325C3.88251 14.3675 6.89751 17.3825 10.6325 17.3825C14.3675 17.3825 17.3825 14.3675 17.3825 10.6325C17.3825 6.89751 14.3675 3.88251 10.6325 3.88251C6.89751 3.88251 3.88251 6.89751 3.88251 10.6325Z" />
+  </Container>
+);
+
+export default IconSearch;

src/components/search/SearchPanel.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { colors, dimensions } from 'styles/variables';
+
+const Container = styled.div({
+  borderBottomWidth: 2,
+  borderBottomColor: colors.light.fg.primary,
+});
+
+const SearchInput = styled.input({
+  height: 48,
+  color: colors.light.fg.primary,
+  fontSize: dimensions.headingSizes.h3,
+  fontWeight: 600,
+  padding: 4,
+  lineHeight: 48,
+  outline: 'none',
+  boxSizing: 'border-box',
+});
+
+const SearchPanel: React.FC = () => (
+  <Container>
+    <SearchInput />
+  </Container>
+);
+
+export default SearchPanel;

src/pages/search.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import Page from 'components/Page';
+import IndexLayout from 'layouts/IndexLayout';
+import Article from 'components/articles/Article';
+import { graphql, useStaticQuery } from 'gatsby';
+import SearchContainer from 'components/containers/SearchContainer';
+import SearchPanel from 'components/search/SearchPanel';
+
+const SearchPage: React.FC = () => {
+  const data = useStaticQuery<GatsbyTypes.Query>(graphql`
+    query {
+      allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
+        edges {
+          node {
+            id
+            excerpt(pruneLength: 120)
+            frontmatter {
+              date(formatString: "YYYY-MM-DD")
+              title
+              image {
+                src {
+                  publicURL
+                  childImageSharp {
+                    fluid(maxWidth: 320) {
+                      ...GatsbyImageSharpFluid
+                    }
+                  }
+                }
+                alt
+              }
+            }
+            fields {
+              slug
+            }
+          }
+        }
+      }
+    }
+  `);
+  const Posts = data.allMarkdownRemark.edges.map(({ node }) => (
+    <Article key={node.id} post={node} />
+  ));
+  return (
+    <IndexLayout>
+      <Page>
+        <SearchPanel />
+        <SearchContainer>{Posts}</SearchContainer>
+      </Page>
+    </IndexLayout>
+  );
+};
+
+export default SearchPage;