Skip to content

Commit

Permalink
feat: add footer component (#129)
Browse files Browse the repository at this point in the history 
Add footer component with default story
  • Loading branch information
@amalv
amalv authored Dec 14, 2019
1 parent 3b44eaa commit fdccfd9
Show file tree
Hide file tree
Showing 3 changed files with 132 additions and 0 deletions.
8 changes: 8 additions & 0 deletions src/components/Footer.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import * as React from "react";
import { Footer } from "./Footer";

export default {
title: "Footer",
};

export const Default: React.FC = () => <Footer />;
32 changes: 32 additions & 0 deletions src/components/Footer.styles.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import styled from "styled-components";
import Typography from "@material-ui/core/Typography";

export const BaseFooter = styled.div`
padding-top: 39px;
height: 290px;
border-radius: 4px 4px 0 0;
background-color: #6200ee;
`;

export const FooterTitle = styled(Typography)`
color: rgba(255, 255, 255, 0.87);
font-size: 20px;
font-weight: 500;
letter-spacing: 0.15px;
line-height: 24px;
`;

export const FooterElement = styled(Typography)`
color: rgba(255, 255, 255, 0.6);
font-size: 16px;
font-weight: 400;
letter-spacing: 0.15px;
line-height: 24px;
`;

export const Divider = styled.div`
width: 251px;
height: 1px;
background-color: #ffffff;
opacity: 0.12;
`;
92 changes: 92 additions & 0 deletions src/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import * as React from "react";
import Grid from "@material-ui/core/Grid";
import { StylesProvider } from "@material-ui/core/styles";
import {
BaseFooter,
FooterTitle,
FooterElement,
Divider,
} from "./Footer.styles";

export const Footer: React.FC = () => (
<StylesProvider injectFirst>
<BaseFooter>
<Grid container justify="center" alignItems="center">
<Grid item>
<Grid container direction="column" spacing={2}>
<Grid item>
<FooterTitle>Categories</FooterTitle>
</Grid>
<Grid item>
<Grid container spacing={6}>
<Grid item>
<Grid container direction="column">
<Grid item>
<FooterElement>Electronics</FooterElement>
</Grid>
<Grid item>
<FooterElement>Tablets</FooterElement>
</Grid>
<Grid item>
<FooterElement>Displays</FooterElement>
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container direction="column">
<Grid item>
<FooterElement>Games</FooterElement>
</Grid>
<Grid item>
<FooterElement>Hardware</FooterElement>
</Grid>
<Grid item>
<FooterElement>Software</FooterElement>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item>
<Divider />
</Grid>
<Grid item>
<Grid container spacing={5}>
<Grid item>
<FooterTitle>Company</FooterTitle>
</Grid>
<Grid item>
<FooterTitle>Other Links</FooterTitle>
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container spacing={10}>
<Grid item>
<Grid container direction="column">
<Grid item>
<FooterElement>About</FooterElement>
</Grid>
<Grid item>
<FooterElement>Jobs</FooterElement>
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container direction="column">
<Grid item>
<FooterElement>Help</FooterElement>
</Grid>
<Grid item>
<FooterElement>F.A.Q.</FooterElement>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</BaseFooter>
</StylesProvider>
);

1 comment on commit fdccfd9

@vercel
Copy link

@vercel vercel bot commented on fdccfd9 Dec 14, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to following URLs:

Please sign in to comment.