#13 grid list表示 close

mismith0227 · Dec 11, 2019 · 96ac926 · 96ac926
1 parent dbb1dac
commit 96ac926
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 9 deletions.
diff --git a/src/components/atoms/Icon/Grid/index.js b/src/components/atoms/Icon/Grid/index.js
@@ -0,0 +1,12 @@
+import * as React from 'react'
+import Icon from '..'
+
+const Grid = props => {
+  return (
+    <Icon viewBox="0 0 24 24" {...props}>
+      <path d="M16,5V11H21V5M10,11H15V5H10M16,18H21V12H16M10,18H15V12H10M4,18H9V12H4M4,11H9V5H4V11Z" />
+    </Icon>
+  )
+}
+
+export default Grid
diff --git a/src/components/atoms/Icon/List/index.js b/src/components/atoms/Icon/List/index.js
@@ -0,0 +1,12 @@
+import * as React from 'react'
+import Icon from '..'
+
+const List = props => {
+  return (
+    <Icon viewBox="0 0 24 24" {...props}>
+      <path d="M9,5V9H21V5M9,19H21V15H9M9,14H21V10H9M4,9H8V5H4M4,19H8V15H4M4,14H8V10H4V14Z" />
+    </Icon>
+  )
+}
+
+export default List
diff --git a/src/components/organisms/ArticlePreview/index.js b/src/components/organisms/ArticlePreview/index.js
@@ -11,11 +11,11 @@ import {
   StyledLink,
 } from './styles'
 
-const ArticlePreview = ({ article }) => {
+const ArticlePreview = ({ article, display }) => {
   return (
     <Wrap>
-      <StyledLink to={`/work/${article.slug}`}>
-        <StyledImg alt="" fluid={article.heroImage.fluid} />
+      <StyledLink to={`/work/${article.slug}`} display={display}>
+        <StyledImg alt="" fluid={article.heroImage.fluid} display={display} />
 
         <Content>
           <PreviewTitle>{article.title}</PreviewTitle>

diff --git a/src/components/organisms/ArticlePreview/styles.js b/src/components/organisms/ArticlePreview/styles.js
@@ -1,10 +1,13 @@
 import styled from 'styled-components'
+import media from '~/styles/media'
 import Img from 'gatsby-image'
 import { Link } from 'gatsby'
 
 export const Wrap = styled.div``
 
 export const StyledImg = styled(Img)`
+  width: ${props => (props.display === 'grid' ? '100%' : '40%')};
+  margin-right: ${props => (props.display === 'grid' ? '0' : '1.6rem')};
   border: 0.1rem solid #ccc;
 `
 
@@ -15,7 +18,7 @@ export const Content = styled.div`
 `
 
 export const StyledLink = styled(Link)`
-  display: block;
+  display: ${props => (props.display === 'grid' ? 'block' : 'flex')};
   text-decoration: none;
   box-sizing: border-box;
   padding: 0.4rem;
@@ -24,6 +27,10 @@ export const StyledLink = styled(Link)`
 export const PreviewTitle = styled.h3`
   margin: 0;
   font-size: 2.4rem;
+
+  ${media.small} {
+    font-size: 1.8rem;
+  }
 `
 
 export const Date = styled.div``

diff --git a/src/components/organisms/WorkContent/index.js b/src/components/organisms/WorkContent/index.js
@@ -1,20 +1,39 @@
 import * as React from 'react'
-import get from 'lodash/get'
 import ArticlePreview from '~/components/organisms/ArticlePreview'
+import GridIcon from '~/components/atoms/Icon/Grid'
+import ListIcon from '~/components/atoms/Icon/List'
 
-import { Wrap, Title, LeadText, List, Item } from './styles'
+import {
+  Wrap,
+  Title,
+  LeadText,
+  List,
+  Item,
+  DisplayList,
+  DisplayItem,
+} from './styles'
 
 const WorkContent = ({ posts }) => {
+  const [display, setdisplay] = React.useState('grid')
+  console.log(display)
   return (
     <Wrap>
       <Title>Works</Title>
       <LeadText>制作した一部です。非公開のものもあります。</LeadText>
+      <DisplayList>
+        <DisplayItem onClick={() => setdisplay('grid')}>
+          <GridIcon />
+        </DisplayItem>
+        <DisplayItem onClick={() => setdisplay('list')}>
+          <ListIcon />
+        </DisplayItem>
+      </DisplayList>
       {posts && (
         <List>
           {posts.map(({ node }) => {
             return (
-              <Item key={node.slug}>
-                <ArticlePreview article={node} />
+              <Item key={node.slug} display={display}>
+                <ArticlePreview article={node} display={display} />
               </Item>
             )
           })}

diff --git a/src/components/organisms/WorkContent/styles.js b/src/components/organisms/WorkContent/styles.js
@@ -25,7 +25,6 @@ export const List = styled.ul`
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
-  margin: 8rem 0 0;
   padding: 0;
 `
 
@@ -34,11 +33,32 @@ export const Item = styled.li`
   padding: 0;
   list-style: none;
   width: 48%;
+  width: ${props => (props.display === 'grid' ? '48%' : '100%')};
   margin: 0 0 5.6rem 0;
 
   ${media.small} {
     width: 100%;
     margin: 0 0 4.8rem 0;
   }
+`
+
+export const DisplayList = styled.ul`
+  display: flex;
+  justify-content: flex-end;
+  margin: 8rem 0 0;
+  padding: 0;
+`
+
+export const DisplayItem = styled.li`
+  list-style: none;
+  width: 34px;
+  height: 34px;
+  margin: 0 0 0 1.6rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    cursor: pointer;
   }
 `