Work on shoegrid stuff

src/components/ShoeCard/ShoeCard.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const ShoeCard = ({
+  slug,
+  name,
+  imageSrc,
+  price,
+  salePrice,
+  releaseDate,
+  numOfColors,
+}) => {
+  // There are 3 variants possible, based on the props:
+  //   - new-release
+  //   - on-sale
+  //   - default
+  //
+  // Any shoe released in the last month will be considered
+  // `new-release`. Any shoe with a `salePrice` will be
+  // on-sale. In theory, it is possible for a shoe to be
+  // both on-sale and new-release, but in this case, `on-sale`
+  // will triumph and be the variant used.
+
+  return (
+    <Wrapper>
+      <ImageWrapper>
+        <Image alt="" src={imageSrc} />
+        <ImageSizer />
+      </ImageWrapper>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.article`
+  flex: 1;
+  min-width: 325px;
+  max-width: 550px;
+`;
+
+const ImageWrapper = styled.div`
+  position: relative;
+`;
+
+const Image = styled.img`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+
+const ImageSizer = styled.div`
+  width: 100%;
+  height: 0;
+  padding-bottom: 90%;
+`;
+
+export default ShoeCard;

src/components/ShoeCard/index.js

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

src/components/ShoeGrid/ShoeGrid.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import SHOES from '../../data';
+import ShoeCard from '../ShoeCard';
+
+const ShoeGrid = () => {
+  return (
+    <Wrapper>
+      {SHOES.map((shoe) => (
+        <ShoeCard key={shoe.slug} {...shoe} />
+      ))}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  gap: 36px;
+  flex-wrap: wrap;
+`;
+
+export default ShoeGrid;

src/components/ShoeGrid/index.js

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

src/components/ShoeIndex/ShoeIndex.js

@@ -7,23 +7,13 @@ import Breadcrumbs from '../Breadcrumbs';
 import Select from '../Select';
 import Spacer from '../Spacer';
 import ShoeSidebar from '../ShoeSidebar';
+import ShoeGrid from '../ShoeGrid';
 
 const ShoeIndex = ({ sortId, setSortId }) => {
   return (
-    <>
-      <Header>
-        <LeftColumn>
-          <Breadcrumbs>
-            <Breadcrumbs.Crumb href="/">Home</Breadcrumbs.Crumb>
-            <Breadcrumbs.Crumb href="/sale">Sale</Breadcrumbs.Crumb>
-            <Breadcrumbs.Crumb href="/sale/shoes">
-              Shoes
-            </Breadcrumbs.Crumb>
-          </Breadcrumbs>
-          <Spacer size={36} />
-          <ShoeSidebar />
-        </LeftColumn>
-        <HeaderMainColumn>
+    <Wrapper>
+      <MainColumn>
+        <Header>
           <Title>Running</Title>
           <Select
             label="Sort"
@@ -33,23 +23,40 @@ const ShoeIndex = ({ sortId, setSortId }) => {
             <option value="newest">Newest Releases</option>
             <option value="price">Price</option>
           </Select>
-        </HeaderMainColumn>
-      </Header>
-    </>
+        </Header>
+        <Spacer size={28} />
+        <ShoeGrid />
+      </MainColumn>
+      <LeftColumn>
+        <Breadcrumbs>
+          <Breadcrumbs.Crumb href="/">Home</Breadcrumbs.Crumb>
+          <Breadcrumbs.Crumb href="/sale">Sale</Breadcrumbs.Crumb>
+          <Breadcrumbs.Crumb href="/sale/shoes">
+            Shoes
+          </Breadcrumbs.Crumb>
+        </Breadcrumbs>
+        <Spacer size={36} />
+        <ShoeSidebar />
+      </LeftColumn>
+    </Wrapper>
   );
 };
 
-const Header = styled.header`
+const Wrapper = styled.header`
   display: flex;
   align-items: baseline;
+  flex-direction: row-reverse;
 `;
 
 const LeftColumn = styled.div`
   width: 248px;
 `;
 
-const HeaderMainColumn = styled.div`
+const MainColumn = styled.div`
   flex: 1;
+`;
+
+const Header = styled.header`
   display: flex;
   justify-content: space-between;
   align-items: baseline;

src/data.js

@@ -0,0 +1,97 @@
+/**
+ * In a real app, this data would likely live in a database,
+ * and be fetched from an API, either at runtime or at
+ * compile-time.
+ *
+ * Keep in mind, this workshop is focused on CSS. In order
+ * to make it easy to focus on the styling, we're cutting
+ * some corners when it comes to our data management, and
+ * our JavaScript in general. Please don't try to glean
+ * any best-practices from stuff like this data file!
+ */
+
+const SHOES = [
+  {
+    slug: 'tech-challenge',
+    name: 'NikeCourt Tech Challenge 20',
+    imageSrc: '/assets/tech-challenge.jpg',
+    price: 16500,
+    salePrice: null,
+    releaseDate: '2021-03-01T09:30:00-0400',
+    numOfColors: 2,
+  },
+  {
+    slug: 'metcon-5',
+    name: 'Nike Metcon 5 AMP',
+    imageSrc: '/assets/metcon-5.jpg',
+    price: 16500,
+    salePrice: null,
+    releaseDate: '2021-02-27T09:30:00-0400',
+    numOfColors: 1,
+  },
+  {
+    slug: 'phantom',
+    name: 'Nike Phantom Vision Elite Dynamic Fit FG',
+    imageSrc: '/assets/phantom.jpg',
+    price: 16500,
+    salePrice: null,
+    releaseDate: '2021-02-21T09:30:00-0400',
+    numOfColors: 4,
+  },
+  {
+    slug: 'pegasus',
+    name: 'Nike Air Zoom Pegasus 36 Trail',
+    imageSrc: '/assets/pegasus.jpg',
+    price: 16500,
+    salePrice: null,
+    releaseDate: '2021-02-16T09:30:00-0400',
+    numOfColors: 1,
+  },
+  {
+    slug: 'joyride',
+    name: 'Nike Joyride Dual Run',
+    imageSrc: '/assets/joyride.jpg',
+    price: 17000,
+    salePrice: null,
+    releaseDate: '2021-01-30T09:30:00-0400',
+    numOfColors: 2,
+  },
+  {
+    slug: 'legend-academy',
+    name: 'Nike Tiempo Legend 8 Academy TF',
+    imageSrc: '/assets/legend-academy.jpg',
+    price: 16500,
+    salePrice: 12500,
+    releaseDate: '2021-01-24T09:30:00-0400',
+    numOfColors: 8,
+  },
+  {
+    slug: 'react-infinity',
+    name: 'Nike React Infinity Pro',
+    imageSrc: '/assets/react-infinity.jpg',
+    price: 16000,
+    salePrice: 14500,
+    releaseDate: '2021-01-14T09:30:00-0400',
+    numOfColors: 1,
+  },
+  {
+    slug: 'phantom-flyknit',
+    name: 'Nike React Phantom Run Flyknit 2',
+    imageSrc: '/assets/phantom-flyknit.jpg',
+    price: 18500,
+    salePrice: 16000,
+    releaseDate: '2021-01-02T09:30:00-0400',
+    numOfColors: 4,
+  },
+  {
+    slug: 'lebron',
+    name: 'LeBron 17',
+    imageSrc: '/assets/lebron.jpg',
+    price: 26000,
+    salePrice: null,
+    releaseDate: '2020-12-25T09:30:00-0400',
+    numOfColors: 1,
+  },
+];
+
+export default SHOES;