create lib grid component

- added row component - added col component - available lg, md, sm, and xs
enabledao · Jun 20, 2019 · 8750289 · 8750289
1 parent 58f4dc3
commit 8750289
Show file tree

Hide file tree

Showing 10 changed files with 143 additions and 30 deletions.
diff --git a/public/index.html b/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Enable - Stablecoin Loans</title>
+    <title>Enable - Ines Fund</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.tsx b/src/App.tsx
@@ -3,15 +3,13 @@ import React from "react";
 import { BrowserRouter as Router, Route } from "react-router-dom";
 import { NormalizeStyle } from "./styles/bases";
 import Home from "./components/pages/home";
-import Loan from "./components/pages/loan";
 
 const App: React.FC = () => {
   return (
     <React.Fragment>
       <NormalizeStyle />
       <Router>
         <Route exact={true} path="/" component={Home} />
-        <Route exact={true} path="/loan/1" component={Loan} />
       </Router>
     </React.Fragment>
   );

diff --git a/src/components/lib/grid/Styled.tsx b/src/components/lib/grid/Styled.tsx
@@ -0,0 +1,89 @@
+// Style utils of grid, row and col
+import styled, { css } from "styled-components";
+import { MaxWidth } from "../../../styles/utils";
+import { RowProps, ColProps } from "./interface";
+
+const GridWrapper = styled.div<RowProps>`
+  display: flex;
+  justify-content: left;
+  flex-wrap: wrap;
+  margin-left: -16px;
+  margin-right: -16px;
+  ${props =>
+    props.align &&
+    css`
+      align-items: ${props.align};
+    `};
+
+  ${props =>
+    props.justify &&
+    css`
+      justify-content: ${props.justify};
+    `};
+
+  ${props =>
+    props.text &&
+    css`
+      text-align: ${props.text};
+    `};
+`;
+
+const ColWrapper = styled.div<ColProps>`
+  padding: 8px 16px;
+  ${props =>
+    props.lg &&
+    css`
+      display: inline-block;
+      flex-basis: unset;
+      width: ${props.lg ? `${(props.lg / 12) * 100}%` : null};
+      ${props.lg === "hidden" &&
+        css`
+          display: none;
+        `};
+    };
+  `};
+
+  ${props =>
+    props.md &&
+    css`
+      ${MaxWidth.md`
+        display: inline-block;
+        flex-basis: unset;
+        width: ${props.md ? `${(props.md / 12) * 100}%` : null};
+        ${props.md === "hidden" &&
+          css`
+            display: none;
+          `};
+      `};
+    `};
+
+  ${props =>
+    props.sm &&
+    css`
+      ${MaxWidth.sm`
+        display: inline-block;
+        flex-basis: unset;
+        width: ${props.sm ? `${(props.sm / 12) * 100}%` : null};
+        ${props.sm === "hidden" &&
+          css`
+            display: none;
+          `};
+      `};
+    `};
+
+  ${props =>
+    props.xs &&
+    css`
+      ${MaxWidth.xs`
+        display: inline-block;
+        flex-basis: unset;
+        width: ${props.xs ? `${(props.xs / 12) * 100}%` : null};
+        ${props.xs === "hidden" &&
+          css`
+            display: none;
+          `};
+      `};
+    `};
+`;
+
+export { GridWrapper, ColWrapper };
diff --git a/src/components/lib/grid/index.tsx b/src/components/lib/grid/index.tsx
@@ -0,0 +1,20 @@
+// Lib grid component
+import React from "react";
+import { RowProps, ColProps } from "./interface";
+import { GridWrapper, ColWrapper } from "./Styled";
+
+const Row: React.FC<RowProps> = ({ justify, align, text, children }) => {
+  return (
+    <GridWrapper justify={justify} align={align} text={text}>
+      {children}
+    </GridWrapper>
+  );
+};
+
+const Col: React.FC<ColProps> = ({ lg, md, sm, xs, children }) => (
+  <ColWrapper lg={lg} md={md} sm={sm} xs={xs}>
+    {children}
+  </ColWrapper>
+);
+
+export { Row, Col };
diff --git a/src/components/lib/grid/interface.tsx b/src/components/lib/grid/interface.tsx
@@ -0,0 +1,13 @@
+// interface of grid for row and col utils
+export interface RowProps {
+  justify?: string;
+  align?: string;
+  text?: string;
+}
+
+export interface ColProps {
+  lg?: any;
+  md?: any;
+  sm?: any;
+  xs?: any;
+}
diff --git a/src/components/pages/home/index.tsx b/src/components/pages/home/index.tsx
@@ -3,13 +3,24 @@ import React from "react";
 import { Container } from "../../../styles/bases";
 import { withNavbarAndFooter } from "../../hoc";
 import { Padding } from "../../../styles/utils";
+import { Row, Col } from "../../lib/grid";
 
 const Home: React.FC = () => {
   return (
     <Container>
       <Padding vertical={48}>
         <h1>Stablecoin Loans</h1>
         <p>Enabling opportunity through borderless credit</p>
+        <Row>
+          <Col lg={6}>
+            <p>
+              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam
+              voluptatibus, corrupti atque doloremque nemo sunt ea sit
+              reiciendis in. Doloremque laboriosam optio animi voluptatem
+              distinctio dolorum amet vel consequatur similique.
+            </p>
+          </Col>
+        </Row>
       </Padding>
     </Container>
   );

diff --git a/src/components/pages/loan/index.tsx b/src/components/pages/loan/index.tsx
diff --git a/src/components/shared/navbar/index.tsx b/src/components/shared/navbar/index.tsx
@@ -25,8 +25,13 @@ const Navbar: React.FC = () => {
           </NavbarBrand>
           <NavbarMenu>
             <NavbarItems>
-              <NavLink to="/loan/1" activeStyle={NavbarItemActive}>
-                Loan
+              <NavLink to="/" activeStyle={NavbarItemActive}>
+                About
+              </NavLink>
+            </NavbarItems>
+            <NavbarItems>
+              <NavLink to="/" activeStyle={NavbarItemActive}>
+                My Loan
               </NavLink>
             </NavbarItems>
           </NavbarMenu>

diff --git a/src/styles/utils/space/Styled.tsx b/src/styles/utils/space/Styled.tsx
@@ -1,7 +1,7 @@
+// Style utils of margin
 import styled, { css } from "styled-components";
 import { SizeProps } from "./interface";
 
-// Style utils of margin
 const MarginWrapper = styled.div<SizeProps>`
   ${props =>
     props.all &&

diff --git a/src/styles/utils/space/index.tsx b/src/styles/utils/space/index.tsx
@@ -1,8 +1,8 @@
+// Margin utils
 import React from "react";
 import { SizeProps } from "./interface";
 import { MarginWrapper, PaddingWrapper } from "./Styled";
 
-// Margin utils
 const Margin: React.FC<SizeProps> = ({
   all,
   top,