Skip to content

Commit

Permalink
Did exercises
Browse files Browse the repository at this point in the history
  • Loading branch information
@VinnieVoet
VinnieVoet committed Mar 30, 2023
1 parent edfb6ee commit 87d193f
Show file tree
Hide file tree
Showing 8 changed files with 21,326 additions and 95 deletions.
21,213 changes: 21,182 additions & 31 deletions package-lock.json
View file

Large diffs are not rendered by default.

37 changes: 29 additions & 8 deletions src/components/Header/Header.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import styled from 'styled-components/macro';
import React from "react";
import styled from "styled-components/macro";

import { COLORS, WEIGHTS } from '../../constants';
import Logo from '../Logo';
import SuperHeader from '../SuperHeader';
import { COLORS, WEIGHTS } from "../../constants";
import Logo from "../Logo";
import SuperHeader from "../SuperHeader";

const Header = () => {
// Our site features two visual headers, but they should be
Expand All @@ -12,7 +12,9 @@ const Header = () => {
<header>
<SuperHeader />
<MainHeader>
<Logo />
<LogoWrapper>
<Logo />
</LogoWrapper>
<Nav>
<NavLink href="/sale">Sale</NavLink>
<NavLink href="/new">New&nbsp;Releases</NavLink>
Expand All @@ -21,17 +23,36 @@ const Header = () => {
<NavLink href="/kids">Kids</NavLink>
<NavLink href="/collections">Collections</NavLink>
</Nav>
<Spacer></Spacer>
</MainHeader>
</header>
);
};

const Spacer = styled.div`
flex: 1;
flex-shrink: 9999;
`;

const LogoWrapper = styled.div`
flex: 1;
`;

const MainHeader = styled.div`
padding: 0 32px;
padding: 1rem 32px;
border-bottom: 1px solid ${COLORS.gray[300]};
display: flex;
gap: 1rem;
`;

const Nav = styled.nav``;
const Nav = styled.nav`
display: flex;
justify-content: space-between;
align-items: center;
flex: 3;
gap: 1rem;
`;

const NavLink = styled.a`
font-size: 1.125rem;
Expand Down
6 changes: 3 additions & 3 deletions src/components/Logo/Logo.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import styled from 'styled-components/macro';
import React from "react";
import styled from "styled-components/macro";

import { WEIGHTS } from '../../constants';
import { WEIGHTS } from "../../constants";

const Logo = (props) => {
return (
Expand Down
23 changes: 10 additions & 13 deletions src/components/Select/Select.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import React from 'react';
import styled from 'styled-components/macro';
import React from "react";
import styled from "styled-components/macro";

import { COLORS, WEIGHTS } from '../../constants';
import Icon from '../Icon';
import { COLORS, WEIGHTS } from "../../constants";
import Icon from "../Icon";

const Select = ({ label, value, children, ...delegated }) => {
const childArray = React.Children.toArray(children);
const selectedChild = childArray.find(
(child) => child.props.value === value
);
const selectedChild = childArray.find((child) => child.props.value === value);

const displayedValue = selectedChild.props.children;

Expand All @@ -21,18 +19,17 @@ const Select = ({ label, value, children, ...delegated }) => {

<DisplayedBit>
{displayedValue}
<ChevronIcon
id="chevron-down"
size={24}
strokeWidth={1.5}
/>
<ChevronIcon id="chevron-down" size={24} strokeWidth={1.5} />
</DisplayedBit>
</SelectWrapper>
</Wrapper>
);
};

const Wrapper = styled.label``;
const Wrapper = styled.label`
display: flex;
align-items: center;
`;

const VisibleLabel = styled.span`
color: ${COLORS.gray[700]};
Expand Down
70 changes: 56 additions & 14 deletions src/components/ShoeCard/ShoeCard.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,18 @@
import React from 'react';
import styled from 'styled-components/macro';
import React from "react";
import styled from "styled-components/macro";

import { COLORS, WEIGHTS } from '../../constants';
import { formatPrice, pluralize, isNewShoe } from '../../utils';
import Spacer from '../Spacer';
import { COLORS, WEIGHTS } from "../../constants";
import { formatPrice, pluralize, isNewShoe } from "../../utils";
import Spacer from "../Spacer";

const variantMapper = (variant) => {
const map = {
"on-sale": { color: "#C5295D", text: "Sale" },
"new-release": { color: "#6868D9", text: "Just Released!" },
};

return map[variant];
};

const ShoeCard = ({
slug,
Expand Down Expand Up @@ -31,39 +40,69 @@ const ShoeCard = ({
? 'new-release'
: 'default'

const variantInfo = variantMapper(variant);

return (
<Link href={`/shoe/${slug}`}>
<Wrapper>
<Wrapper>
<Link href={`/shoe/${slug}`}>
<ImageWrapper>
<Image alt="" src={imageSrc} />
{variant !== "default" && (
<VariantWrapper color={variantInfo.color}>
{variantInfo.text}
</VariantWrapper>
)}
</ImageWrapper>
<Spacer size={12} />
<Row>
<Name>{name}</Name>
<Price>{formatPrice(price)}</Price>
<Price isOnSale={variant === "on-sale"}>{formatPrice(price)}</Price>
</Row>
<Row>
<ColorInfo>{pluralize('Color', numOfColors)}</ColorInfo>
<ColorInfo>{pluralize("Color", numOfColors)}</ColorInfo>
{variant === "on-sale" && (
<SalePrice>{formatPrice(salePrice)}</SalePrice>
)}
</Row>
</Wrapper>
</Link>
</Link>
</Wrapper>
);
};

const VariantWrapper = styled.span`
background-color: ${({ color }) => color};
color: white;
font-weight: bold;
position: absolute;
top: 12px;
right: -4px;
padding: 0.5rem;
`;

const Link = styled.a`
text-decoration: none;
color: inherit;
`;

const Wrapper = styled.article``;
const Wrapper = styled.article`
display: flex;
flex-direction: column;
flex: 1 0 340px;
`;

const ImageWrapper = styled.div`
position: relative;
`;

const Image = styled.img``;
const Image = styled.img`
width: 100%;
border-radius: 16px 16px 4px 4px;
`;

const Row = styled.div`
display: flex;
justify-content: space-between;
font-size: 1rem;
`;

Expand All @@ -72,7 +111,10 @@ const Name = styled.h3`
color: ${COLORS.gray[900]};
`;

const Price = styled.span``;
const Price = styled.span`
${({ isOnSale }) =>
isOnSale && `text-decoration: line-through; color: #60666C;`}
`;

const ColorInfo = styled.p`
color: ${COLORS.gray[700]};
Expand Down
14 changes: 9 additions & 5 deletions src/components/ShoeGrid/ShoeGrid.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import styled from 'styled-components/macro';
import React from "react";
import styled from "styled-components/macro";

import SHOES from '../../data';
import ShoeCard from '../ShoeCard';
import SHOES from "../../data";
import ShoeCard from "../ShoeCard";

const ShoeGrid = () => {
return (
Expand All @@ -14,6 +14,10 @@ const ShoeGrid = () => {
);
};

const Wrapper = styled.div``;
const Wrapper = styled.div`
display: flex;
flex-wrap: wrap;
gap: 2.25rem;
`;

export default ShoeGrid;
39 changes: 24 additions & 15 deletions src/components/ShoeIndex/ShoeIndex.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React from 'react';
import styled from 'styled-components/macro';
import React from "react";
import styled from "styled-components/macro";

import { WEIGHTS } from '../../constants';
import { WEIGHTS } from "../../constants";

import Breadcrumbs from '../Breadcrumbs';
import Select from '../Select';
import Spacer from '../Spacer';
import ShoeSidebar from '../ShoeSidebar';
import ShoeGrid from '../ShoeGrid';
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 (
Expand All @@ -31,9 +31,7 @@ const ShoeIndex = ({ sortId, setSortId }) => {
<Breadcrumbs>
<Breadcrumbs.Crumb href="/">Home</Breadcrumbs.Crumb>
<Breadcrumbs.Crumb href="/sale">Sale</Breadcrumbs.Crumb>
<Breadcrumbs.Crumb href="/sale/shoes">
Shoes
</Breadcrumbs.Crumb>
<Breadcrumbs.Crumb href="/sale/shoes">Shoes</Breadcrumbs.Crumb>
</Breadcrumbs>
<Spacer size={42} />
<ShoeSidebar />
Expand All @@ -42,17 +40,28 @@ const ShoeIndex = ({ sortId, setSortId }) => {
);
};

const Wrapper = styled.div``;
const Wrapper = styled.div`
display: flex;
flex-direction: row-reverse;
`;

const LeftColumn = styled.div``;
const LeftColumn = styled.div`
flex: 1;
`;

const MainColumn = styled.div``;
const MainColumn = styled.div`
flex: 4;
`;

const Header = styled.header``;
const Header = styled.header`
display: flex;
`;

const Title = styled.h2`
font-size: 1.5rem;
font-weight: ${WEIGHTS.medium};
margin-right: auto;
`;

export default ShoeIndex;
19 changes: 13 additions & 6 deletions src/components/SuperHeader/SuperHeader.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React from 'react';
import styled from 'styled-components';
import React from "react";
import styled from "styled-components";

import { COLORS } from '../../constants';
import { COLORS } from "../../constants";

import SearchInput from '../SearchInput';
import UnstyledButton from '../UnstyledButton';
import Icon from '../Icon';
import SearchInput from "../SearchInput";
import UnstyledButton from "../UnstyledButton";
import Icon from "../Icon";

const SuperHeader = () => {
return (
Expand All @@ -26,10 +26,17 @@ const Wrapper = styled.div`
font-size: 0.875rem;
color: ${COLORS.gray[300]};
background-color: ${COLORS.gray[900]};
display: flex;
gap: 1.5rem;
padding: 0.75rem 1.5rem;
`;

const MarketingMessage = styled.span`
color: ${COLORS.white};
margin-right: auto;
`;

const HelpLink = styled.a`
Expand Down

0 comments on commit 87d193f

Please sign in to comment.