diff --git a/src/components/atoms/Icon/Grid/index.js b/src/components/atoms/Icon/Grid/index.js
new file mode 100644
index 00000000..1f9226b7
--- /dev/null
+++ b/src/components/atoms/Icon/Grid/index.js
@@ -0,0 +1,12 @@
+import * as React from 'react'
+import Icon from '..'
+
+const Grid = props => {
+ return (
+
+
+
+ )
+}
+
+export default Grid
diff --git a/src/components/atoms/Icon/List/index.js b/src/components/atoms/Icon/List/index.js
new file mode 100644
index 00000000..fa084982
--- /dev/null
+++ b/src/components/atoms/Icon/List/index.js
@@ -0,0 +1,12 @@
+import * as React from 'react'
+import Icon from '..'
+
+const List = props => {
+ return (
+
+
+
+ )
+}
+
+export default List
diff --git a/src/components/organisms/ArticlePreview/index.js b/src/components/organisms/ArticlePreview/index.js
index 9db6460e..be356685 100644
--- 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 (
-
-
+
+
{article.title}
diff --git a/src/components/organisms/ArticlePreview/styles.js b/src/components/organisms/ArticlePreview/styles.js
index 53c6ecb0..e47a72b9 100644
--- 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
index 0443d193..a86d22f1 100644
--- 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 (
Works
制作した一部です。非公開のものもあります。
+
+ setdisplay('grid')}>
+
+
+ setdisplay('list')}>
+
+
+
{posts && (
{posts.map(({ node }) => {
return (
- -
-
+
-
+
)
})}
diff --git a/src/components/organisms/WorkContent/styles.js b/src/components/organisms/WorkContent/styles.js
index ce87af30..bc11c464 100644
--- 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;
}
`