Work on initial stab at solution

.eslintcache

@@ -0,0 +1 @@
+[{"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/index.js":"1","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/GlobalStyles/index.js":"2","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/App/index.js":"3","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/GlobalStyles/GlobalStyles.js":"4","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/App/App.js":"5","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Header/index.js":"6","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Header/Header.js":"7","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/constants.js":"8","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/SearchInput/index.js":"9","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/SearchInput/SearchInput.js":"10","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/VisuallyHidden/index.js":"11","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/VisuallyHidden/VisuallyHidden.js":"12","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/UnstyledButton/index.js":"13","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/UnstyledButton/UnstyledButton.js":"14","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Icon/index.js":"15","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Icon/Icon.js":"16","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Logo/index.js":"17","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Logo/Logo.js":"18","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Breadcrumbs/index.js":"19","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Breadcrumbs/Breadcrumbs.js":"20","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/ShoeIndex/index.js":"21","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/ShoeIndex/ShoeIndex.js":"22","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Select/index.js":"23","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Select/Select.js":"24","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/ShoeSidebar/index.js":"25","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/ShoeSidebar/ShoeSidebar.js":"26","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Spacer/index.js":"27","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Spacer/Spacer.js":"28"},{"size":284,"mtime":1610198851033,"results":"29","hashOfConfig":"30"},{"size":42,"mtime":1610198753919,"results":"31","hashOfConfig":"30"},{"size":33,"mtime":1610197732524,"results":"32","hashOfConfig":"30"},{"size":1606,"mtime":1610199532638,"results":"33","hashOfConfig":"30"},{"size":456,"mtime":1610208525780,"results":"34","hashOfConfig":"30"},{"size":36,"mtime":1610198168530,"results":"35","hashOfConfig":"30"},{"size":2217,"mtime":1610208525780,"results":"36","hashOfConfig":"30"},{"size":385,"mtime":1610204914556,"results":"37","hashOfConfig":"30"},{"size":41,"mtime":1610199634866,"results":"38","hashOfConfig":"30"},{"size":992,"mtime":1610208525780,"results":"39","hashOfConfig":"30"},{"size":44,"mtime":1610199826658,"results":"40","hashOfConfig":"30"},{"size":1043,"mtime":1610208525827,"results":"41","hashOfConfig":"30"},{"size":44,"mtime":1610200177243,"results":"42","hashOfConfig":"30"},{"size":373,"mtime":1610208525780,"results":"43","hashOfConfig":"30"},{"size":34,"mtime":1610200791134,"results":"44","hashOfConfig":"30"},{"size":715,"mtime":1610208525827,"results":"45","hashOfConfig":"30"},{"size":34,"mtime":1610204428694,"results":"46","hashOfConfig":"30"},{"size":308,"mtime":1610208525780,"results":"47","hashOfConfig":"30"},{"size":41,"mtime":1610205618937,"results":"48","hashOfConfig":"30"},{"size":820,"mtime":1610208740005,"results":"49","hashOfConfig":"30"},{"size":39,"mtime":1610206381586,"results":"50","hashOfConfig":"30"},{"size":1491,"mtime":1610209159112,"results":"51","hashOfConfig":"30"},{"size":36,"mtime":1610206889900,"results":"52","hashOfConfig":"30"},{"size":1776,"mtime":1610208650648,"results":"53","hashOfConfig":"30"},{"size":41,"mtime":1610208844815,"results":"54","hashOfConfig":"30"},{"size":1084,"mtime":1610209179865,"results":"55","hashOfConfig":"30"},{"size":36,"mtime":1610209049792,"results":"56","hashOfConfig":"30"},{"size":391,"mtime":1610209143553,"results":"57","hashOfConfig":"30"},{"filePath":"58","messages":"59","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},"d0tfeb",{"filePath":"61","messages":"62","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"63","messages":"64","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"65","messages":"66","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"67","messages":"68","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"69","messages":"70","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"71","messages":"72","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"73","messages":"74","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"75","messages":"76","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"77","messages":"78","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"79","messages":"80","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"81","messages":"82","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"83","messages":"84","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"85","messages":"86","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"87","messages":"88","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"89","messages":"90","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"91","messages":"92","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"93","messages":"94","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"95","messages":"96","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"97","messages":"98","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"99","messages":"100","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"101","messages":"102","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"103","messages":"104","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"105","messages":"106","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"107","messages":"108","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"109","messages":"110","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"111","messages":"112","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"113","messages":"114","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/index.js",[],["115","116"],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/GlobalStyles/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/App/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/GlobalStyles/GlobalStyles.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/App/App.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Header/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Header/Header.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/constants.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/SearchInput/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/SearchInput/SearchInput.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/VisuallyHidden/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/VisuallyHidden/VisuallyHidden.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/UnstyledButton/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/UnstyledButton/UnstyledButton.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Icon/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Icon/Icon.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Logo/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Logo/Logo.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Breadcrumbs/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Breadcrumbs/Breadcrumbs.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/ShoeIndex/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/ShoeIndex/ShoeIndex.js",["117"],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Select/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Select/Select.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/ShoeSidebar/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/ShoeSidebar/ShoeSidebar.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Spacer/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Spacer/Spacer.js",[],{"ruleId":"118","replacedBy":"119"},{"ruleId":"120","replacedBy":"121"},{"ruleId":"122","severity":1,"message":"123","line":4,"column":19,"nodeType":"124","messageId":"125","endLine":4,"endColumn":25},"no-native-reassign",["126"],"no-negated-in-lhs",["127"],"no-unused-vars","'COLORS' is defined but never used.","Identifier","unusedVar","no-global-assign","no-unsafe-negation"]

.new-component-config.json

@@ -0,0 +1,8 @@
+{
+  "type": "functional",
+  "prettierConfig": {
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  }
+}

package.json

@@ -8,7 +8,9 @@
     "@testing-library/user-event": "^12.1.10",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-feather": "^2.0.9",
     "react-scripts": "4.0.1",
+    "styled-components": "^5.2.1",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

public/index.html

@@ -3,31 +3,30 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1"
+    />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Raleway:wght@500;600;800&display=swap"
+      rel="stylesheet"
+    />
+
+    <title>Sole&Ankle — CSS for JavaScript Developers</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <noscript
+      >You need to enable JavaScript to run this app.</noscript
+    >
     <div id="root"></div>
     <!--
       This HTML file is a template.

src/components/App/App.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components/macro';
+
+import Header from '../Header';
+import ShoeIndex from '../ShoeIndex';
+
+const App = () => {
+  const [sortId, setSortId] = React.useState('newest');
+
+  console.log(sortId);
+  return (
+    <>
+      <Header />
+      <Main>
+        <ShoeIndex sortId={sortId} setSortId={setSortId} />
+      </Main>
+    </>
+  );
+};
+
+const Main = styled.main`
+  padding: 64px 32px;
+`;
+
+export default App;

src/components/App/index.js

@@ -0,0 +1 @@
+export { default } from './App';

src/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { COLORS } from '../../constants';
+
+const Breadcrumbs = ({ children }) => {
+  return <Wrapper>{children}</Wrapper>;
+};
+
+Breadcrumbs.Crumb = ({ href, children, delegated }) => {
+  return (
+    <CrumbWrapper>
+      <CrumbLink href={href} {...delegated}>
+        {children}
+      </CrumbLink>
+    </CrumbWrapper>
+  );
+};
+
+const CrumbWrapper = styled.div`
+  &:not(:first-of-type) {
+    margin-left: 8px;
+
+    &::before {
+      content: '/';
+      margin-right: 8px;
+      color: ${COLORS.gray[300]};
+    }
+  }
+`;
+
+const CrumbLink = styled.a`
+  color: ${COLORS.gray[700]};
+  text-decoration: none;
+
+  &:hover {
+    color: ${COLORS.gray[900]};
+  }
+`;
+
+const Wrapper = styled.nav`
+  display: flex;
+  font-size: 0.875rem;
+`;
+export default Breadcrumbs;

src/components/Breadcrumbs/index.js

@@ -0,0 +1 @@
+export { default } from './Breadcrumbs';

src/components/GlobalStyles/GlobalStyles.js

@@ -0,0 +1,75 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyles = createGlobalStyle`
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+  font-size: 100%;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+
+/* GLOBAL STYLES */
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+  line-height: 1.45;
+  font-family: 'Raleway', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: auto;
+}
+
+#root {
+  /*
+    Create a stacking context, without a z-index.
+    This ensures that all portal content (modals and tooltips) will
+    float above the app.
+  */
+  isolation: isolate;
+}
+
+
+html, body, #root {
+  height: 100%;
+}
+`;
+
+export default GlobalStyles;

src/components/GlobalStyles/index.js

@@ -0,0 +1 @@
+export { default } from './GlobalStyles';