Merge pull request magrathealabs#8 from peterbrendel/front-main

Front main

Author: Peter Brendel

frontend/src/App.css

@@ -13,11 +13,6 @@
   }
 }
 
-.teste {
-    font-size: 120px;
-    background-color: aqua;
-}
-
 .App-header {
   background-color: #282c34;
   min-height: 100vh;
@@ -41,3 +36,9 @@
     transform: rotate(360deg);
   }
 }
+
+.Card-folder {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+}

frontend/src/App.js

@@ -1,12 +1,71 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './App.css';
-import Navbar from './components/navbar';
+import Navbar from './components/navbar/Navbar';
+import CardDeck from 'react-bootstrap/CardDeck';
+import Card from './components/card/Card';
+
 
 function App() {
 
+    const [tags, setTags] = useState(
+        [
+            {
+                variant:'secondary', 
+                text: 'Javascript'
+            },
+            {
+                variant:'success',
+                text: 'C++'
+            },
+            {
+                variant:'secondary',
+                text: "Ana"
+            },
+            {
+                variant:'light',
+                text: "ovo"
+            },
+            {
+                variant:'light',
+                text: "ovo"
+            }
+        ]
+    );
+
     return (
         <div className="App">
             <Navbar/>
+            <CardDeck className="Card-folder">
+                <Card
+                repository="Test Repo"
+                author="unkown"
+                readme="Little experimental text to check if card is doing ok"
+                tags={tags}/>
+
+                <Card
+                repository="Test Repo"
+                author="unkown"
+                readme="Little experimental text to check if card is doing ok"
+                tags={tags}/>
+
+                <Card
+                repository="Test Repo"
+                author="unkown"
+                readme="Little experimental text to check if card is doing ok"
+                tags={tags}/>
+
+                <Card
+                repository="Test Repo"
+                author="unkown"
+                readme="Little experimental text to check if card is doing ok"
+                tags={tags}/>
+
+                <Card
+                repository="Test Repo"
+                author="unkown"
+                readme="Little experimental text to check if card is doing ok"
+                tags={tags}/>
+            </CardDeck>
         </div>
     );
 }

frontend/src/components/navbar/Navbar.js

@@ -0,0 +1,31 @@
+import { Navbar, Form, InputGroup, FormControl, Button } from 'react-bootstrap';
+import React from 'react';
+import Image from './github';
+
+export default () => { 
+    return (
+    <>
+        <Navbar className="bg-dark justify-content-between">
+                <Form inline>
+                    <Navbar.Brand href="#home">
+                        <Image/>
+                    </Navbar.Brand>
+                    <InputGroup>
+                    <InputGroup.Prepend>
+                        <InputGroup.Text id="basic-addon1">/</InputGroup.Text>
+                    </InputGroup.Prepend>
+                    <FormControl
+                        placeholder="Username"
+                        aria-label="Username"
+                        aria-describedby="basic-addon1"
+                    />
+                    <Button type="search" style={{ "border-radius": "0px 5px 5px 0px"}}>Search Repos</Button>
+                    </InputGroup>
+                </Form>
+                <Form inline>
+                    <Button type="login">Login with Github</Button>
+                </Form>
+        </Navbar>
+    </>
+    );
+}

frontend/src/components/navbar/index.js

@@ -5,25 +5,25 @@ import Image from './github';
 export default () => { return (
     <>
         <Navbar className="bg-dark justify-content-between">
-                <Form inline>
-                    <Navbar.Brand href="#home">
-                        <Image/>
-                    </Navbar.Brand>
-                    <InputGroup>
-                    <InputGroup.Prepend>
-                        <InputGroup.Text id="basic-addon1">/</InputGroup.Text>
-                    </InputGroup.Prepend>
-                    <FormControl
-                        placeholder="Username"
-                        aria-label="Username"
-                        aria-describedby="basic-addon1"
-                    />
-                    <Button type="search" style={{ "border-radius": "0px 5px 5px 0px"}}>Search Repos</Button>
-                    </InputGroup>
-                </Form>
-                <Form inline>
-                    <Button type="login">Login with Github</Button>
-                </Form>
+            <Form inline>
+                <Navbar.Brand href="#home">
+                    <Image/>
+                </Navbar.Brand>
+                <InputGroup>
+                <InputGroup.Prepend>
+                    <InputGroup.Text id="basic-addon1">/</InputGroup.Text>
+                </InputGroup.Prepend>
+                <FormControl
+                    placeholder="Username"
+                    aria-label="Username"
+                    aria-describedby="basic-addon1"
+                />
+                <Button type="search" style={{ "border-radius": "0px 5px 5px 0px"}}>Search</Button>
+                </InputGroup>
+            </Form>
+            <Form inline>
+                <Button type="login">Login with Github</Button>
+            </Form>
         </Navbar>
     </>
 );}