diff --git a/src/components/atoms/Icons.js b/src/components/atoms/Icons.js index 1fd0ca3..8199a85 100644 --- a/src/components/atoms/Icons.js +++ b/src/components/atoms/Icons.js @@ -15,8 +15,7 @@ export const GitHub = props => ( ) -export const Twitter = props => ( - +export const Twitter = props => + + +export const Dribbble = props => + + -) + +export const Chain = props => + + diff --git a/src/components/molecules/ProjectLinks.js b/src/components/molecules/ProjectLinks.js new file mode 100644 index 0000000..b044724 --- /dev/null +++ b/src/components/molecules/ProjectLinks.js @@ -0,0 +1,38 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { Chain, GitHub, Dribbble } from '../atoms/Icons' +import './ProjectLinks.scss' + +const LinkIcon = ({ title }) => { + if (title === 'Link') { + return + } else if (title === 'GitHub') { + return + } else if (title === 'Dribbble') { + return + } else { + return null + } +} + +const ProjectLinks = ({ links }) => ( + +) + +ProjectLinks.propTypes = { + links: PropTypes.object, +} + +export default ProjectLinks diff --git a/src/components/molecules/ProjectLinks.scss b/src/components/molecules/ProjectLinks.scss new file mode 100644 index 0000000..ee0fc95 --- /dev/null +++ b/src/components/molecules/ProjectLinks.scss @@ -0,0 +1,27 @@ +@import 'variables'; + +.projectlinks { + padding: 0; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + width: 100%; + + li { + display: block; + flex: 0 0 48%; + margin-bottom: 2%; + } + + a { + display: block; + background: darken($brand-light, 5%); + text-align: center; + border-radius: .25rem; + padding: $spacer / 4; + } + + .icon { + margin-right: $spacer / 3; + } +} diff --git a/src/components/organisms/Project.js b/src/components/organisms/Project.js index b351659..75ae1ec 100644 --- a/src/components/organisms/Project.js +++ b/src/components/organisms/Project.js @@ -4,6 +4,7 @@ import Helmet from 'react-helmet' import ReactMarkdown from 'react-markdown' import Content from '../atoms/Content' import FullWidth from '../atoms/FullWidth' +import ProjectLinks from '../molecules/ProjectLinks' import images from '../../images' import './Project.scss' @@ -16,8 +17,7 @@ const Project = props => { const links = project.links const techstack = project.techstack - return ( - + return {title} @@ -27,11 +27,7 @@ const Project = props => {

{title}

- + {title} @@ -52,7 +48,9 @@ const Project = props => {
- ) } Project.propTypes = { diff --git a/src/components/organisms/Project.scss b/src/components/organisms/Project.scss index 7ba6469..c9a2ef2 100644 --- a/src/components/organisms/Project.scss +++ b/src/components/organisms/Project.scss @@ -42,11 +42,9 @@ li { display: inline-block; - padding: $spacer / 4; - background: darken($brand-light, 3%); - flex: 0 0 28%; - margin-bottom: 4%; - text-align: center; + padding: 0; + flex: 0 0 (100% / 3); + margin-bottom: $spacer; border-radius: 4rem; font-size: $font-size-small; }