add base UI with library and renters pages fleshed out

2020-05-28 00:18:43 -04:00
parent 6fc929e38b
commit b644567f71
32 changed files with 1007 additions and 151 deletions
@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Route } from 'react-router';
+
+import Header from './Header/Header';
+import Library from './Library/Library';
+import Renters from './Renters/Renters';
+
+const ContentContainer = styled.div`
+    width: 100%;
+    flex: 4;
+`
+
+const Content: React.FC = () => (
+    <ContentContainer>
+        <Header />
+        <Route path="/" exact component={Library} />
+        <Route path="/library" component={Library} />
+        <Route path="/renters" component={Renters} />
+        <Route path="/return" component={Renters} />
+    </ContentContainer>
+)
+
+export default Content;
@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Link } from 'react-router-dom';
+
+const StyledButton = styled(Link)`
+    border: 2px solid #13334A;
+    color: #13334A;
+    text-decoration: none;
+    font-family: 'Helvetica';
+    font-size: 13px;
+    text-align: center;
+    line-height: 38px;
+    border-radius: 28px;
+    box-shadow: 10px 5px 15px rgba(0,0,0,50);
+    background-color: #B4D6E9;
+    display: block;
+    width: 150px;
+    height: 38px;
+`
+
+type Props = {
+    text: string;
+    destination: string;
+}
+
+const Button: React.FC<Props> = ({ text, destination }) => (
+    <StyledButton to={destination}>
+        {text}
+    </StyledButton>
+)
+
+export default Button;
@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import Button from './Button/Button';
+
+const ButtonBayContainer = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-left: 7.5px;
+    width: 320px;
+    height: 100%;
+`
+
+const ButtonBay: React.FC = () => (
+    <ButtonBayContainer>
+        <Button
+            text="Register new renter"
+            destination="/renters"
+            />
+       <Button
+            text="Checkout"
+            destination="/checkout"
+            />
+    </ButtonBayContainer>
+)
+
+export default ButtonBay;
@@ -0,0 +1,20 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import ButtonBay from './ButtonBay/ButtonBay';
+import Search from './Search/Search';
+
+const HeaderContainer = styled.div`
+    height: 60px;
+    display: flex;
+    justify-content: space-between;
+`
+
+const Header: React.FC = () => (
+    <HeaderContainer>
+        <ButtonBay />
+        <Search />
+    </HeaderContainer>
+)
+
+export default Header;
@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+
+const SearchContainer = styled.div`
+    width: 250px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`
+
+const StyledInput = styled.input`
+    background-color: #ECECEC;
+    border: 2px solid #13334A;
+    border-radius: 25px;
+    width: 210px;
+    height: 38px;
+    color: #13334A;
+    font-size: 1.25rem;
+    outline: none;
+    padding-left: 20px;
+    box-shadow: 10px 5px 15px rgba(0,0,0,50)
+`
+
+const StyledIcon = styled(FontAwesomeIcon)`
+    color: #D97925;
+    position: absolute;
+    right: 25px;
+    font-size: 20px;
+`
+
+const Search: React.FC = () => (
+    <SearchContainer>
+        <StyledInput />
+        <StyledIcon icon={faSearch} />
+    </SearchContainer>
+)
+
+export default Search;
@@ -0,0 +1,73 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCartPlus } from '@fortawesome/free-solid-svg-icons';
+
+const BookContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    margin: 20px;
+    padding: 10px;
+    background-color: #fff;
+    border: 0.1px solid #8C8C8C;
+    box-shadow: 10px 5px 15px rgba(0,0,0,50);
+    width: 200px;
+    height: 350px;
+`
+
+const IconContainer = styled.div`
+    display: block;
+    position: absolute;
+`
+
+const StyledIcon = styled(FontAwesomeIcon)`
+    color: #D97925;
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(220px, -15px);
+    font-size: 38px;
+`
+
+const CoverImage = styled.img`
+    max-width: 90%;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    margin: 0 auto;
+`
+
+const Title = styled.div`
+    text-align: center;
+    font-family: 'Helvetica';
+    font-size: 1.25rem;
+    margin-bottom: 5px;
+`
+
+const Author = styled.div`
+    text-align: center;
+    font-family: 'Helvetica';
+    font-size: 0.85rem;
+`
+
+type Props = {
+    title: string;
+    author: string;
+    imageLink: string;
+}
+
+const Book: React.FC<Props> = ({ title, author, imageLink }) => (
+    <BookContainer>
+        <IconContainer>
+            <StyledIcon icon={faCartPlus} />
+        </IconContainer>
+        <CoverImage
+            src={imageLink}
+            />
+        <Title>{title}</Title>
+        <Author>{author}</Author>
+    </BookContainer>
+)
+
+export default Book;
@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import Book from './Book/Book';
+
+const LibraryContainer = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+`
+
+const books = [
+    {title: "To Kill a Mockingbird", author: "Harper Lee", imageLink: "http://www.prepressure.com/images/book-cover-to-kill-a-mocking-bird.jpg"},
+    {title: "To Kill a Mockingbird", author: "Harper Lee", imageLink: "http://www.prepressure.com/images/book-cover-to-kill-a-mocking-bird.jpg"},
+    {title: "To Kill a Mockingbird", author: "Harper Lee", imageLink: "http://www.prepressure.com/images/book-cover-to-kill-a-mocking-bird.jpg"},
+    {title: "To Kill a Mockingbird", author: "Harper Lee", imageLink: "http://www.prepressure.com/images/book-cover-to-kill-a-mocking-bird.jpg"},
+    {title: "To Kill a Mockingbird", author: "Harper Lee", imageLink: "http://www.prepressure.com/images/book-cover-to-kill-a-mocking-bird.jpg"},
+    {title: "To Kill a Mockingbird", author: "Harper Lee", imageLink: "http://www.prepressure.com/images/book-cover-to-kill-a-mocking-bird.jpg"},
+    {title: "To Kill a Mockingbird", author: "Harper Lee", imageLink: "http://www.prepressure.com/images/book-cover-to-kill-a-mocking-bird.jpg"},
+    {title: "To Kill a Mockingbird", author: "Harper Lee", imageLink: "http://www.prepressure.com/images/book-cover-to-kill-a-mocking-bird.jpg"},
+    {title: "To Kill a Mockingbird", author: "Harper Lee", imageLink: "http://www.prepressure.com/images/book-cover-to-kill-a-mocking-bird.jpg"},
+    {title: "To Kill a Mockingbird", author: "Harper Lee", imageLink: "http://www.prepressure.com/images/book-cover-to-kill-a-mocking-bird.jpg"},
+    {title: "To Kill a Mockingbird", author: "Harper Lee", imageLink: "http://www.prepressure.com/images/book-cover-to-kill-a-mocking-bird.jpg"},
+    {title: "To Kill a Mockingbird", author: "Harper Lee", imageLink: "http://www.prepressure.com/images/book-cover-to-kill-a-mocking-bird.jpg"},
+    {title: "To Kill a Mockingbird", author: "Harper Lee", imageLink: "http://www.prepressure.com/images/book-cover-to-kill-a-mocking-bird.jpg"},
+    {title: "To Kill a Mockingbird", author: "Harper Lee", imageLink: "http://www.prepressure.com/images/book-cover-to-kill-a-mocking-bird.jpg"},
+    {title: "To Kill a Mockingbird", author: "Harper Lee", imageLink: "http://www.prepressure.com/images/book-cover-to-kill-a-mocking-bird.jpg"}
+]
+
+const Library: React.FC = () => (
+    <LibraryContainer>
+        {books.map(book => (
+                <Book
+                    title={book.title}
+                    author={book.author}
+                    imageLink={book.imageLink}
+                    />
+         ))}
+    </LibraryContainer>
+)
+
+export default Library;
@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const BookReturnContainer = styled.div`
+    display: inline-flex;
+    height: 135px;
+    float: right;
+`
+
+const CoverImage = styled.img`
+    height: 100px;
+    object-fit: contain;
+    margin: auto 15px;
+`
+
+type Props = {
+    imageLink: string;
+}
+
+const BookReturn: React.FC<Props> = ({ imageLink }) => (
+    <BookReturnContainer>
+        <CoverImage src={imageLink} />
+    </BookReturnContainer>
+);
+
+export default BookReturn;
@@ -0,0 +1,95 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import BookReturn from './BookReturn/BookReturn';
+
+const RenterCardContainer = styled.div`
+    background-color: #fff;
+    display: flex;
+    border: 0.1px solid #f0f0f0;
+    box-shadow: 10px 5px 15px rgba(175,175,175,50);
+    height: 135px;
+    margin: 10px 0;
+`
+
+const RenterImageContainer = styled.div`
+    width: 135px;
+    height: 135px;
+    border: 0.1px solid #f0f0f0;
+`
+
+const RenterImagePlaceholder = styled.img`
+    display: block;
+    object-fit: contain;
+    width: 135px;
+    margin: auto auto;
+`
+
+const RenterInfoContainer = styled.div`
+    min-width: 300px;
+    font-family: 'Helvetica';
+    color: #13334A;
+    font-weight: 100;
+`
+
+const RenterName = styled.div`
+    height: 2.25rem;
+    font-size: 31px;
+    margin: 25px 0 0 10px;
+`
+
+const RenterPhone = styled.div`
+    height: 1.5rem;
+    font-size: 18px;
+    margin: 0 0 0 10px;
+`
+
+const RenterEmail = styled.div`
+    font-size: 18px;
+    margin: 0 0 0 10px;
+`
+
+const RenterReturnContainer = styled.div`
+    width: 100%;
+    height: 135px;
+`
+
+type Props = {
+    name: string;
+    phone: string;
+    email: string;
+}
+
+const books = [
+    {title: "To Kill a Mockingbird", author: "Harper Lee", imageLink: "http://www.prepressure.com/images/book-cover-to-kill-a-mocking-bird.jpg"},
+    {title: "To Kill a Mockingbird", author: "Harper Lee", imageLink: "http://www.prepressure.com/images/book-cover-to-kill-a-mocking-bird.jpg"}
+]
+
+const RenterCard: React.FC<Props> = ({ name, phone, email }) => (
+    <RenterCardContainer>
+        <RenterImageContainer>
+            <RenterImagePlaceholder
+                src="https://avatars3.githubusercontent.com/u/47925772?s=400&v=4" />
+        </RenterImageContainer>
+        <RenterInfoContainer>
+            <RenterName>
+                {name}
+            </RenterName>
+            <RenterPhone>
+                {phone}
+            </RenterPhone>
+            <RenterEmail>
+                {email}
+            </RenterEmail>
+        </RenterInfoContainer>
+        <RenterReturnContainer>
+            {books.map(book => (
+                <BookReturn
+                    imageLink={book.imageLink}
+                />
+            ))}
+        </RenterReturnContainer>
+    </RenterCardContainer>
+)
+
+export default RenterCard;
@@ -0,0 +1,37 @@
+import React from 'react';
+// import styled from 'styled-components';
+
+import Panel from '../../UIKit/Panel/Panel';
+import RenterCard from './RenterCard/RenterCard';
+
+const renters = [
+    {name: 'John Doe', phone: '555-555-5555', email: 'john@doe.com'},
+    {name: 'John Doe', phone: '555-555-5555', email: 'john@doe.com'},
+    {name: 'John Doe', phone: '555-555-5555', email: 'john@doe.com'},
+    {name: 'John Doe', phone: '555-555-5555', email: 'john@doe.com'},
+    {name: 'John Doe', phone: '555-555-5555', email: 'john@doe.com'},
+    {name: 'John Doe', phone: '555-555-5555', email: 'john@doe.com'},
+    {name: 'John Doe', phone: '555-555-5555', email: 'john@doe.com'},
+    {name: 'John Doe', phone: '555-555-5555', email: 'john@doe.com'},
+    {name: 'John Doe', phone: '555-555-5555', email: 'john@doe.com'},
+    {name: 'John Doe', phone: '555-555-5555', email: 'john@doe.com'}
+]
+
+const Renters: React.FC = () => (
+    <Panel style={{
+        display: 'flex',
+        flexDirection: 'column',
+        flexWrap: 'wrap',
+        justifyContent: 'center'
+    }}>
+        {renters.map(renter => (
+            <RenterCard
+                name={renter.name}
+                phone={renter.phone}
+                email={renter.email}
+                />
+        ))}
+    </Panel>
+)
+
+export default Renters;
@@ -0,0 +1,20 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+const StyledLink = styled(Link)`
+    color: #D97925;
+    font-size: 3rem;
+    font-family: 'Dancing Script', cursive;
+    text-decoration: none;
+`
+
+const Logo: React.FC = () => (
+    <StyledLink
+        to="/"
+        >
+        bookish
+    </StyledLink>
+)
+
+export default Logo;
@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import MenuItem from './MenuItem/MenuItem';
+import { faBookReader, faUser, faShoppingCart, faReply } from '@fortawesome/free-solid-svg-icons';
+
+const MenuContainer = styled.div`
+    margin-top: 1rem;
+    display: flex;
+    flex-flow: column nowrap;
+    width: 275px;
+`
+
+export default () => (
+    <MenuContainer>
+        <MenuItem
+            title="Library"
+            destination="/library"
+            icon={faBookReader}
+            />
+        <MenuItem
+            title="Renters"
+            destination="/renters"
+            icon={faUser}
+            />
+        <MenuItem
+            title="Checkout"
+            destination="/checkout"
+            icon={faShoppingCart}
+            />
+        <MenuItem
+            title="Return"
+            destination="/return"
+            icon={faReply}
+            />
+    </MenuContainer>
+)
@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+import Icon from '../../../../hocs/Icon/Icon';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+const MenuItemContainer = styled.div`
+    margin-top: 20px;
+    margin-left: 25px;
+`
+
+const MenuLink = styled(Link)`
+    color: #7C7C7C;
+    font-family: 'Helvetica';
+    font-size: 28px;
+    font-weight: 100;
+    text-decoration: none;
+`
+
+type OtherProps = {
+    title: string;
+    destination: string;
+    icon: IconDefinition;
+}
+
+const MenuItem: React.FC<OtherProps> = ({ title, destination, icon }) => (
+    <MenuItemContainer>
+        <MenuLink to={destination}>
+            <Icon
+                icon={icon}
+                />{title}
+        </MenuLink>
+    </MenuItemContainer>
+
+)
+
+export default MenuItem;
@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import Logo from './Logo/Logo'
+import Menu from './Menu/Menu'
+
+const SidebarContainer = styled.div`
+    background: #011126;
+    box-shadow: 0px 0px 5px rgba(0,0,0,50);
+    padding-top: 2.5%;
+    min-width: 275px;
+    flex: 1;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    float: left;
+`
+
+const Sidebar: React.FC = () => (
+        <SidebarContainer>
+            <Logo />
+            <Menu />
+        </SidebarContainer>
+);
+
+export default Sidebar;
@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+import CSS from 'csstype';
+
+const PanelContainer = styled.div`
+    background-color: #ECECEC;
+    border: 2px solid #13334A;
+    box-shadow: 10px 5px 15px rgba(0,0,0,50);
+    width: 90%;
+    margin: 10px auto;
+    padding: 20px;
+`
+
+type Props = {
+    children: React.ReactNode;
+    style: CSS.Properties;
+}
+
+const Panel: React.FC<Props> = ({ children, style }) => (
+    <PanelContainer style={style}>
+        {children}
+    </PanelContainer>
+)
+
+export default Panel;