BradNut/awesome-uses
1
0
Fork 0
mirror of https://github.com/BradNut/awesome-uses synced 2025-09-08 17:40:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor some styled components details

Browse source
This commit is contained in:
Wes Bos 2020-01-08 10:21:46 -05:00
parent 00d2bf2fda
commit 58d31e2df3
2 changed files with 33 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/components/Person.js
View file

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { name } from 'country-emoji'; import { name } from 'country-emoji';
import styled from 'styled-components'; import styled from 'styled-components';
import { Tag, Tags } from './Topics';
import iphone from '../images/iphone.png'; import iphone from '../images/iphone.png';
import android from '../images/android.png'; import android from '../images/android.png';
import windows from '../images/windows.svg'; import windows from '../images/windows.svg';
@ -26,16 +27,13 @@ export default function Person({ person, currentTag }) {
>{`${url.host}${url.pathname}`}</a> >{`${url.host}${url.pathname}`}</a>
</header> </header>
<p>{person.description}</p> <p>{person.description}</p>
<ul> <Tags>
{person.tags.map(tag => ( {person.tags.map(tag => (
<li <Tag key={tag} as="li" currentTag={tag === currentTag} small>
key={tag}
className={`tag ${tag === currentTag ? 'currentTag' : ''}`}
>
{tag} {tag}
</li> </Tag>
))} ))}
</ul> </Tags>
</PersonInner> </PersonInner>
<PersonDeets> <PersonDeets>
<span className="country" title={name(person.country)}> <span className="country" title={name(person.country)}>
@ -88,29 +86,24 @@ const PersonInner = styled.div`
h3 { h3 {
margin: 0; margin: 0;
} }
ul li {
font-size: 1.2rem;
&.currentTag {
color: var(--yellow);
}
}
header { header {
display: grid; display: grid;
grid-template-rows: auto auto; grid-template-rows: auto auto;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
grid-gap: 0 1rem; grid-gap: 0 1rem;
img { img {
grid-row: 1 / -1; grid-row: 1 / -1;
background: var(--lightblue); background: var(--lightblue);
font-size: 1rem; font-size: 1rem;
} }
.displayLink { .displayLink {
text-decoration: none; text-decoration: none;
color: var(--vape); color: var(--vape);
letter-spacing: 1px; letter-spacing: 1px;
font-size: 1.2rem; font-size: 1.2rem;
:hover { :hover {
color: var(--pink); color: var(--pink);
}
} }
} }
`; `;

25
src/components/Topics.js
View file

@ -10,8 +10,8 @@ export default function Topics() {
return ( return (
<Tags> <Tags>
{tags.map(tag => ( {tags.map(tag => (
<TagLabel <Tag
className={`tag ${tag.name === currentTag ? 'currentTag' : ''}`} currentTag={tag.name === currentTag}
htmlFor={`filter-${tag.name}`} htmlFor={`filter-${tag.name}`}
key={`filter-${tag.name}`} key={`filter-${tag.name}`}
> >
@ -25,12 +25,12 @@ export default function Topics() {
/> />
{tag.name} {tag.name}
<TagCount>{tag.count}</TagCount> <TagCount>{tag.count}</TagCount>
</TagLabel> </Tag>
))} ))}
{countries.map(tag => ( {countries.map(tag => (
<TagLabel <Tag
className={`tag ${tag.emoji === currentTag ? 'currentTag' : ''}`} currentTag={tag.emoji === currentTag}
htmlFor={`filter-${tag.name}`} htmlFor={`filter-${tag.name}`}
key={`filter-${tag.name}`} key={`filter-${tag.name}`}
title={tag.name} title={tag.name}
@ -45,7 +45,7 @@ export default function Topics() {
/> />
<TagEmoji>{tag.emoji}</TagEmoji> <TagEmoji>{tag.emoji}</TagEmoji>
<TagCount>{tag.count}</TagCount> <TagCount>{tag.count}</TagCount>
</TagLabel> </Tag>
))} ))}
</Tags> </Tags>
); );
@ -60,11 +60,12 @@ const Tags = styled.div`
flex-wrap: wrap; flex-wrap: wrap;
`; `;
const TagLabel = styled.label` const Tag = styled.label`
background: var(--pink); background: var(--pink);
margin: 2px; margin: 2px;
border-radius: 3px; border-radius: 3px;
font-size: 1.7rem; font-size: ${props => (props.small ? `1.2rem;` : `1.7rem;`)}
padding: 5px; padding: 5px;
color: hsla(0, 100%, 100%, 0.8); color: hsla(0, 100%, 100%, 0.8);
transition: background-color 0.2s; transition: background-color 0.2s;
@ -75,10 +76,12 @@ const TagLabel = styled.label`
input { input {
display: none; display: none;
} }
&.currentTag { ${props =>
props.currentTag &&
`
background: var(--yellow); background: var(--yellow);
color: hsla(0, 100%, 0%, 0.8); color: hsla(0, 100%, 0%, 0.8);
} `}
`; `;
const TagEmoji = styled.span` const TagEmoji = styled.span`
@ -93,3 +96,5 @@ const TagCount = styled.span`
border-radius: 2px; border-radius: 2px;
margin-left: 5px; margin-left: 5px;
`; `;
export { Tag, Tags };