Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(shoes): add shoes grid using flex-box (module 4) #5

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat(shoes): add shoes grid using flex-box (module 4) #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
166ed71
feat(shoes): add shoes grid using flex-box (module 4)
Jan 7, 2022
19341c6
fix(header): fix header to fit design
Jan 7, 2022
254ac67
fix(header): fix shoe grid
Jan 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21,204 changes: 21,173 additions & 31 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

55 changes: 35 additions & 20 deletions src/components/Header/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,32 +6,43 @@ import Logo from '../Logo';
import SuperHeader from '../SuperHeader';

const Header = () => {
// Our site features two visual headers, but they should be
// grouped semantically as a single header.
return (
<header>
<SuperHeader />
<MainHeader>
<Logo />
<Nav>
<NavLink href="/sale">Sale</NavLink>
<NavLink href="/new">New&nbsp;Releases</NavLink>
<NavLink href="/men">Men</NavLink>
<NavLink href="/women">Women</NavLink>
<NavLink href="/kids">Kids</NavLink>
<NavLink href="/collections">Collections</NavLink>
</Nav>
</MainHeader>
</header>
);
// Our site features two visual headers, but they should be
// grouped semantically as a single header.
return (
<header>
<SuperHeader />
<MainHeader>
<Side>
<Logo />
</Side>
<Nav>
<NavLink href="/sale">Sale</NavLink>
<NavLink href="/new">New&nbsp;Releases</NavLink>
<NavLink href="/men">Men</NavLink>
<NavLink href="/women">Women</NavLink>
<NavLink href="/kids">Kids</NavLink>
<NavLink href="/collections">Collections</NavLink>
</Nav>
<Side />
</MainHeader>
</header>
);
};

const MainHeader = styled.div`
padding: 0 32px;
padding: 18px 32px;
border-bottom: 1px solid ${COLORS.gray[300]};
display: flex;
align-items: baseline;
justify-content: space-between;
height: 72px;
`;

const Nav = styled.nav``;
const Nav = styled.nav`
display: flex;
gap: 48px;
margin: 0 48px;
`;

const NavLink = styled.a`
font-size: 1.125rem;
Expand All @@ -45,4 +56,8 @@ const NavLink = styled.a`
}
`;

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

export default Header;
1 change: 1 addition & 0 deletions src/components/Logo/Logo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const Logo = (props) => {
const Link = styled.a`
text-decoration: none;
color: inherit;
min-width: 200px;
`;

const Wrapper = styled.h1`
Expand Down
1 change: 1 addition & 0 deletions src/components/SearchInput/SearchInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const SearchInput = ({ label, ...delegated }) => {

const Label = styled.label`
position: relative;
margin-left: auto;
`;

const Input = styled.input`
Expand Down
47 changes: 25 additions & 22 deletions src/components/Select/Select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,34 +5,37 @@ 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 childArray = React.Children.toArray(children);
const selectedChild = childArray.find(
(child) => child.props.value === value
);

const displayedValue = selectedChild.props.children;
const displayedValue = selectedChild.props.children;

return (
<Wrapper>
<VisibleLabel>{label}</VisibleLabel>
return (
<Wrapper>
<VisibleLabel>{label}</VisibleLabel>

<SelectWrapper>
<NativeSelect {...delegated}>{children}</NativeSelect>
<SelectWrapper>
<NativeSelect {...delegated}>{children}</NativeSelect>

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

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

const VisibleLabel = styled.span`
color: ${COLORS.gray[700]};
Expand Down
132 changes: 87 additions & 45 deletions src/components/ShoeCard/ShoeCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,73 +6,93 @@ import { formatPrice, pluralize, isNewShoe } from '../../utils';
import Spacer from '../Spacer';

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.
// prettier-ignore
const variant = typeof salePrice === 'number'
? 'on-sale'
: isNewShoe(releaseDate)
? 'new-release'
: 'default'

return (
<Link href={`/shoe/${slug}`}>
<Wrapper>
<ImageWrapper>
<Image alt="" src={imageSrc} />
</ImageWrapper>
<Spacer size={12} />
<Row>
<Name>{name}</Name>
<Price>{formatPrice(price)}</Price>
</Row>
<Row>
<ColorInfo>{pluralize('Color', numOfColors)}</ColorInfo>
</Row>
</Wrapper>
</Link>
);
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.
// prettier-ignore
const variant = typeof salePrice === 'number'
? 'on-sale'
: isNewShoe(releaseDate)
? 'new-release'
: 'default';

return (
<Link href={`/shoe/${slug}`}>
<Wrapper>
<ImageWrapper>
<Image alt="" src={imageSrc} />
</ImageWrapper>
{variant === 'on-sale' && <SaleFlag>On Sale</SaleFlag>}
{variant === 'new-release' && <NewFlag>Just Released</NewFlag>}
<Spacer size={12} />
<Row>
<Name>{name}</Name>
<Price style={{
'--color': variant === 'on-sale' ? COLORS.gray[700] : undefined,
'--decoration': variant === 'on-sale' ? 'line-through' : undefined,
}}>{formatPrice(price)}</Price>
</Row>
<Row>
<ColorInfo>{pluralize('Color', numOfColors)}</ColorInfo>
{variant === 'on-sale' && <SalePrice>{formatPrice(salePrice)}</SalePrice>}
</Row>
</Wrapper>
</Link>
);
};

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

const Wrapper = styled.article``;
const Wrapper = styled.article`
position: relative;
`;

const ImageWrapper = styled.div`
position: relative;
border-radius: 16px 16px 4px 4px;
`;

const Image = styled.img``;
const Image = styled.img`
width: 100%;
height: auto;
object-fit: cover;
border-radius: 4px;
`;

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

const Name = styled.h3`
font-weight: ${WEIGHTS.medium};
color: ${COLORS.gray[900]};
`;

const Price = styled.span``;
const Price = styled.span`
color: var(--color);
text-decoration: var(--decoration);
`;

const ColorInfo = styled.p`
color: ${COLORS.gray[700]};
Expand All @@ -83,4 +103,26 @@ const SalePrice = styled.span`
color: ${COLORS.primary};
`;

const Flag = styled.div`
position: absolute;
top: 12px;
right: -4px;
background-color: ${COLORS.primary};
color: ${COLORS.white};
height: 32px;
line-height: 32px;
padding: 0 10px;
font-size: 14 / 18 rem;
font-weight: ${WEIGHTS.bold};
border-radius: 2px;
`;

const SaleFlag = styled(Flag)`
background-color: ${COLORS.primary};
`;

const NewFlag = styled(Flag)`
background-color: ${COLORS.secondary};
`;

export default ShoeCard;
27 changes: 19 additions & 8 deletions src/components/ShoeGrid/ShoeGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,26 @@ import SHOES from '../../data';
import ShoeCard from '../ShoeCard';

const ShoeGrid = () => {
return (
<Wrapper>
{SHOES.map((shoe) => (
<ShoeCard key={shoe.slug} {...shoe} />
))}
</Wrapper>
);
return (
<Wrapper>
{SHOES.map((shoe) => (
<ShoeWrapper key={shoe.id}>
<ShoeCard {...shoe} />
</ShoeWrapper>
))}
</Wrapper>
);
};

const Wrapper = styled.div``;
const Wrapper = styled.div`
display: flex;
flex-wrap: wrap;
gap: 32px;
`;

const ShoeWrapper = styled.div`
min-width: 275px;
flex: 1;
`;

export default ShoeGrid;
Loading