+
![]()
+
-
-
+
+
+
);
}
Person.propTypes = {
- currentTag: PropTypes.string,
person: PropTypes.shape({
github: PropTypes.string,
name: PropTypes.string,
@@ -112,7 +93,7 @@ Person.propTypes = {
tags: PropTypes.arrayOf(PropTypes.string),
country: PropTypes.string,
computer: PropTypes.oneOf(['apple', 'windows', 'linux']),
- phone: PropTypes.oneOf(['iphone', 'android', 'windowsphone']),
+ phone: PropTypes.oneOf(['iphone', 'android', 'windowsphone', 'flipphone']),
twitter(props, propName, componentName) {
if (!/^@?(\w){1,15}$/.test(props[propName])) {
return new Error(
@@ -124,96 +105,3 @@ Person.propTypes = {
}),
};
-// 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;
- a:visited {
- color: var(--purple);
- }
- }
- header {
- display: grid;
- grid-template-rows: auto auto;
- grid-template-columns: auto 1fr;
- grid-gap: 0 1rem;
- @media all and (max-width: 400px) {
- grid-template-columns: 1fr;
- }
- img {
- grid-row: 1 / -1;
- background: var(--lightblue);
- font-size: 1rem;
- }
- .displayLink {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- text-decoration: none;
- color: var(--vape);
- letter-spacing: 1px;
- font-size: 1.2rem;
- text-overflow: ellipsis;
- max-width: 100%;
- overflow: hidden;
- :hover,
- :visited {
- color: var(--pink);
- }
- }
- }
-`;
-
-const PersonDeets = styled.div`
- display: flex;
- border-top: 1px solid var(--vape);
- > * {
- flex: 1;
- border-left: 1px solid var(--vape);
- text-align: center;
- padding: 1rem;
- display: grid;
- align-items: center;
- justify-content: center;
- grid-template-columns: auto auto;
- &:first-child {
- border-left: 0;
- }
- }
- a {
- color: var(--vape);
- }
- .country {
- font-size: 3rem;
- padding-top: 2rem;
- }
- .phone {
- padding: 0;
- }
- @media all and (max-width: 400px) {
- display: grid;
- grid-template-columns: 1fr 1fr;
- > *:nth-child(1),
- > *:nth-child(2) {
- /* lol */
- border-bottom: 1px solid var(--vape);
- }
- }
-`;
-
-const TwitterHandle = styled.span`
- font-size: 1.24323423426928098420394802rem;
- .at {
- color: var(--yellow);
- margin-right: 2px;
- }
-`;
diff --git a/src/components/Topics.js b/src/components/Topics.js
index 2d8e42ee..5bab9f08 100644
--- a/src/components/Topics.js
+++ b/src/components/Topics.js
@@ -1,138 +1,52 @@
-import React, { useCallback, useContext } from 'react';
-import styled from 'styled-components';
-import FilterContext from '../context/FilterContext';
+import { Link, useParams, useRouteLoaderData } from '@remix-run/react';
import * as icons from '../util/icons';
export default function Topics() {
- const { countries, tags, devices, currentTag, setCurrentTag } = useContext(
- FilterContext
- );
-
- const handleKeyDown = useCallback(
- tagName => e => {
- if (e.keyCode === 13) {
- setCurrentTag(tagName);
- }
- },
- [setCurrentTag]
- );
+ const { tags, countries, devices } = useRouteLoaderData("root");
+ const params = useParams();
+ const currentTag = params.tag || 'all';
return (
- {person.description}
--
{person.tags.map(tag => (
-
- {tag} -
{person.country}
@@ -85,7 +67,7 @@ export default function Person({ person, currentTag }) {
)}
{person.twitter && (
-
+
)}
-
-
+
+ - /uses + /uses
A list of /uses pages detailing developer setups, gear,
software and configs.
+ {people.map(person => (
+
+