mirror of
https://github.com/BradNut/awesome-uses
synced 2025-09-08 17:40:31 +00:00
Merge pull request #130 from justinjunodev/issue-119-move-to-styled-components
Issue 119 - Move to Styled Components
This commit is contained in:
Wes Bos
GitHub
commit
00d2bf2fda
7 changed files with 205 additions and 227 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import people from './src/data.js';
|
||||
import people from './src/data';
|
||||
import { tags, countries } from './src/util/stats';
|
||||
|
||||
function sourceNodes({ actions, createNodeId, createContentDigest }) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React from 'react';
|
||||
import { name } from 'country-emoji';
|
||||
import styled from 'styled-components';
|
||||
import iphone from '../images/iphone.png';
|
||||
import android from '../images/android.png';
|
||||
import windows from '../images/windows.svg';
|
||||
|
|
@ -10,9 +11,9 @@ export default function Person({ person, currentTag }) {
|
|||
const url = new URL(person.url);
|
||||
const img = `https://logo.clearbit.com/${url.host}`;
|
||||
return (
|
||||
<div className="person">
|
||||
<div className="personInner">
|
||||
<header className="personHeader">
|
||||
<PersonWrapper>
|
||||
<PersonInner>
|
||||
<header>
|
||||
<img width="50" height="50" src={img} alt={person.name} />
|
||||
<h3>
|
||||
<a href={person.url} target="_blank" rel="noopener noreferrer">
|
||||
|
|
@ -25,8 +26,7 @@ export default function Person({ person, currentTag }) {
|
|||
>{`${url.host}${url.pathname}`}</a>
|
||||
</header>
|
||||
<p>{person.description}</p>
|
||||
|
||||
<ul className="tags">
|
||||
<ul>
|
||||
{person.tags.map(tag => (
|
||||
<li
|
||||
key={tag}
|
||||
|
|
@ -36,8 +36,8 @@ export default function Person({ person, currentTag }) {
|
|||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="deets">
|
||||
</PersonInner>
|
||||
<PersonDeets>
|
||||
<span className="country" title={name(person.country)}>
|
||||
{person.country}
|
||||
</span>
|
||||
|
|
@ -69,7 +69,79 @@ export default function Person({ person, currentTag }) {
|
|||
</span>
|
||||
)}
|
||||
{person.github && <span>{person.github}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</PersonDeets>
|
||||
</PersonWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
// Component Styles
|
||||
const PersonWrapper = styled.div`
|
||||
border: 1px solid var(--vape);
|
||||
border-radius: 5.34334px;
|
||||
box-shadow: 10px -10px 0 var(--blue2);
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto auto;
|
||||
`;
|
||||
|
||||
const PersonInner = styled.div`
|
||||
padding: 2rem;
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
ul li {
|
||||
font-size: 1.2rem;
|
||||
&.currentTag {
|
||||
color: var(--yellow);
|
||||
}
|
||||
}
|
||||
header {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-gap: 0 1rem;
|
||||
img {
|
||||
grid-row: 1 / -1;
|
||||
background: var(--lightblue);
|
||||
font-size: 1rem;
|
||||
}
|
||||
.displayLink {
|
||||
text-decoration: none;
|
||||
color: var(--vape);
|
||||
letter-spacing: 1px;
|
||||
font-size: 1.2rem;
|
||||
:hover {
|
||||
color: var(--pink);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const PersonDeets = styled.div`
|
||||
display: flex;
|
||||
border-block-start: 1px solid var(--vape);
|
||||
> * {
|
||||
flex: 1;
|
||||
border-inline-start: 1px solid var(--vape);
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
a {
|
||||
color: var(--vape);
|
||||
}
|
||||
:first-child {
|
||||
border-inline-start: none;
|
||||
}
|
||||
.at {
|
||||
color: var(--yellow);
|
||||
margin-right: 2px;
|
||||
}
|
||||
.country {
|
||||
font-size: 3rem;
|
||||
}
|
||||
.phone {
|
||||
padding: 0;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import React, { useContext } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import FilterContext from '../context/FilterContext';
|
||||
|
||||
export default function Topics() {
|
||||
|
|
@ -7,9 +8,9 @@ export default function Topics() {
|
|||
);
|
||||
console.log(countries);
|
||||
return (
|
||||
<div className="tags">
|
||||
<Tags>
|
||||
{tags.map(tag => (
|
||||
<label
|
||||
<TagLabel
|
||||
className={`tag ${tag.name === currentTag ? 'currentTag' : ''}`}
|
||||
htmlFor={`filter-${tag.name}`}
|
||||
key={`filter-${tag.name}`}
|
||||
|
|
@ -23,12 +24,12 @@ export default function Topics() {
|
|||
onChange={e => setCurrentTag(e.currentTarget.value)}
|
||||
/>
|
||||
{tag.name}
|
||||
<span className="count">{tag.count}</span>
|
||||
</label>
|
||||
<TagCount>{tag.count}</TagCount>
|
||||
</TagLabel>
|
||||
))}
|
||||
|
||||
{countries.map(tag => (
|
||||
<label
|
||||
<TagLabel
|
||||
className={`tag ${tag.emoji === currentTag ? 'currentTag' : ''}`}
|
||||
htmlFor={`filter-${tag.name}`}
|
||||
key={`filter-${tag.name}`}
|
||||
|
|
@ -42,10 +43,53 @@ export default function Topics() {
|
|||
checked={tag.emoji === currentTag}
|
||||
onChange={e => setCurrentTag(e.currentTarget.value)}
|
||||
/>
|
||||
<span className="emoji">{tag.emoji}</span>
|
||||
<span className="count">{tag.count}</span>
|
||||
</label>
|
||||
<TagEmoji>{tag.emoji}</TagEmoji>
|
||||
<TagCount>{tag.count}</TagCount>
|
||||
</TagLabel>
|
||||
))}
|
||||
</div>
|
||||
</Tags>
|
||||
);
|
||||
}
|
||||
|
||||
// Component Styles
|
||||
const Tags = styled.div`
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
`;
|
||||
|
||||
const TagLabel = styled.label`
|
||||
background: var(--pink);
|
||||
margin: 2px;
|
||||
border-radius: 3px;
|
||||
font-size: 1.7rem;
|
||||
padding: 5px;
|
||||
color: hsla(0, 100%, 100%, 0.8);
|
||||
transition: background-color 0.2s;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
&.currentTag {
|
||||
background: var(--yellow);
|
||||
color: hsla(0, 100%, 0%, 0.8);
|
||||
}
|
||||
`;
|
||||
|
||||
const TagEmoji = styled.span`
|
||||
transform: scale(1.45);
|
||||
`;
|
||||
|
||||
const TagCount = styled.span`
|
||||
background: var(--blue);
|
||||
font-size: 1rem;
|
||||
color: white;
|
||||
padding: 2px;
|
||||
border-radius: 2px;
|
||||
margin-left: 5px;
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -2,9 +2,10 @@ import { Link } from 'gatsby';
|
|||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import Helmet from 'react-helmet';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Header = ({ siteTitle }) => (
|
||||
<header className="header">
|
||||
<HeaderWrapper className="header">
|
||||
<Helmet>
|
||||
<title>{siteTitle}</title>
|
||||
</Helmet>
|
||||
|
|
@ -17,7 +18,7 @@ const Header = ({ siteTitle }) => (
|
|||
software and configs.
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
</HeaderWrapper>
|
||||
);
|
||||
|
||||
Header.propTypes = {
|
||||
|
|
@ -29,3 +30,11 @@ Header.defaultProps = {
|
|||
};
|
||||
|
||||
export default Header;
|
||||
|
||||
// Component Styles
|
||||
const HeaderWrapper = styled.header`
|
||||
text-align: center;
|
||||
h1 {
|
||||
font-size: 6rem;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,201 +0,0 @@
|
|||
html {
|
||||
--purple: #1e1f5c;
|
||||
--blue: #203447;
|
||||
--lightblue: #1f4662;
|
||||
--blue2: #1C2F40;
|
||||
--yellow: #ffc600;
|
||||
--pink: #EB4471;
|
||||
--vape: #d7d7d7;
|
||||
background: var(--blue);
|
||||
color: var(--vape);
|
||||
font-family: 'Fira Mono', monospace;
|
||||
font-weight: 100;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--yellow);
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
h1 a {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: var(--yellow);
|
||||
text-decoration-color: var(--pink);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
code {
|
||||
background: var(--lightblue);
|
||||
}
|
||||
|
||||
.site {
|
||||
max-width: 1900px;
|
||||
margin: 5rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 6rem;
|
||||
}
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
grid-gap: 3rem;
|
||||
max-width: 1900px;
|
||||
padding: 0 3rem;
|
||||
margin: 5rem auto;
|
||||
}
|
||||
|
||||
.people {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
grid-gap: 5rem;
|
||||
}
|
||||
|
||||
.person {
|
||||
border: 1px solid var(--vape);
|
||||
border-radius: 5.34334px;
|
||||
box-shadow: 10px -10px 0 var(--blue2);
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto auto;
|
||||
}
|
||||
|
||||
.person h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.personInner {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.person .tag {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.personHeader {
|
||||
display: grid;
|
||||
grid-template-rows:auto auto;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-gap: 0 1rem;
|
||||
}
|
||||
|
||||
.personHeader img {
|
||||
grid-row: 1 / -1;
|
||||
background: var(--lightblue);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.name.last {
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
.deets {
|
||||
display: flex;
|
||||
border-block-start: 1px solid var(--vape);
|
||||
}
|
||||
|
||||
.deets > * {
|
||||
flex: 1;
|
||||
border-inline-start: 1px solid var(--vape);
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
|
||||
.deets a {
|
||||
color: var(--vape);
|
||||
}
|
||||
|
||||
.deets .at {
|
||||
color: var(--yellow);
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.deets :first-child {
|
||||
border-inline-start: none;
|
||||
}
|
||||
|
||||
.deets .country {
|
||||
font-size: 3rem;
|
||||
}
|
||||
.deets .phone {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.displayLink {
|
||||
text-decoration: none;
|
||||
color: var(--vape);
|
||||
letter-spacing: 1px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.displayLink:hover {
|
||||
color: var(--pink);
|
||||
}
|
||||
|
||||
|
||||
.tags {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: var(--pink);
|
||||
margin: 2px;
|
||||
border-radius: 3px;
|
||||
font-size: 1.7rem;
|
||||
padding: 5px;
|
||||
color: hsla(0, 100%, 100%, 0.8);
|
||||
transition: background-color 0.2s;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tag input { display: none; }
|
||||
|
||||
.tag.currentTag {
|
||||
background: var(--yellow);
|
||||
color: hsla(0, 100%, 0%, 0.8);
|
||||
}
|
||||
|
||||
.tag .emoji {
|
||||
transform: scale(1.45);
|
||||
}
|
||||
|
||||
.tag .count {
|
||||
background: var(--blue);
|
||||
font-size: 1rem;
|
||||
color: white;
|
||||
padding: 2px;
|
||||
border-radius: 2px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
|
@ -9,9 +9,9 @@ import React from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import { useStaticQuery, graphql } from 'gatsby';
|
||||
|
||||
import styled, { createGlobalStyle } from 'styled-components';
|
||||
import Header from './header';
|
||||
import 'normalize.css';
|
||||
import './layout.css';
|
||||
|
||||
const Layout = ({ children }) => {
|
||||
const data = useStaticQuery(graphql`
|
||||
|
|
@ -26,15 +26,16 @@ const Layout = ({ children }) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<GlobalStyle />
|
||||
<Header siteTitle={data.site.siteMetadata.title} />
|
||||
<main>
|
||||
<Main>
|
||||
{children}
|
||||
<footer>
|
||||
© {new Date().getFullYear() - Math.floor(Math.random() * 777)} Made by{' '}
|
||||
<a href="https://wesbos.com">Wes Bos</a> with{' '}
|
||||
<a href="https://www.gatsbyjs.org">Gatsby</a>. Icons from icons8.com.
|
||||
</footer>
|
||||
</main>
|
||||
</Main>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -44,3 +45,48 @@ Layout.propTypes = {
|
|||
};
|
||||
|
||||
export default Layout;
|
||||
|
||||
// Global Styles
|
||||
const GlobalStyle = createGlobalStyle`
|
||||
html {
|
||||
--purple: #1e1f5c;
|
||||
--blue: #203447;
|
||||
--lightblue: #1f4662;
|
||||
--blue2: #1C2F40;
|
||||
--yellow: #ffc600;
|
||||
--pink: #EB4471;
|
||||
--vape: #d7d7d7;
|
||||
background: var(--blue);
|
||||
color: var(--vape);
|
||||
font-family: 'Fira Mono', monospace;
|
||||
font-weight: 100;
|
||||
font-size: 10px;
|
||||
}
|
||||
::selection {
|
||||
background: var(--yellow);
|
||||
color: var(--blue);
|
||||
}
|
||||
body {
|
||||
font-size: 2rem;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-weight: 500;
|
||||
}
|
||||
a {
|
||||
color: var(--yellow);
|
||||
text-decoration-color: var(--pink);
|
||||
font-style: italic;
|
||||
}
|
||||
code {
|
||||
background: var(--lightblue);
|
||||
}
|
||||
`;
|
||||
|
||||
// Component Styles
|
||||
const Main = styled.main`
|
||||
display: grid;
|
||||
grid-gap: 3rem;
|
||||
max-width: 1900px;
|
||||
padding: 0 3rem;
|
||||
margin: 5rem auto;
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React, { useContext } from 'react';
|
||||
import { useStaticQuery, graphql } from 'gatsby';
|
||||
import styled from 'styled-components';
|
||||
import FilterContext from '../context/FilterContext';
|
||||
|
||||
import Layout from '../components/layout';
|
||||
|
|
@ -35,13 +36,20 @@ function IndexPage() {
|
|||
return (
|
||||
<Layout>
|
||||
<Topics />
|
||||
<div className="people">
|
||||
<People>
|
||||
{people.map(person => (
|
||||
<Person key={person.name} person={person} currentTag={currentTag} />
|
||||
))}
|
||||
</div>
|
||||
</People>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default IndexPage;
|
||||
|
||||
// Component Styles
|
||||
const People = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
grid-gap: 5rem;
|
||||
`;
|
||||
|
|
|
|||
Loading…
Reference in a new issue