Merge pull request #44 from Priyami/tableview

Toggle between Card/Table View

Author: princiya

src/assets/images/card.svg

@@ -34,3 +34,4 @@
 .resourceLink:hover {
   background-color: rgba(0, 122, 124, 0.8);
 }
+

src/assets/images/table.svg

@@ -3,12 +3,17 @@ import '../../assets/css/App.css';
 import './Resources.css';
 import ResourcesList from '../data/data.json';
 import { Link } from "react-router-dom";
+import Toggle from "../Toggle"
+
+
+
 
 export default function Resources() {
-  return (
+return (
     <>
-      <div className="grid">
-          {
+        <Toggle />
+       <div className="grid">
+        {
             ResourcesList.map(resource => 
               <article key={resource.id}> 
                 <div className="text">{resource.name}

src/components/Resources/Resources.css

@@ -0,0 +1,27 @@
+.table {
+    text-align: center;
+    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
+    border-collapse: collapse;
+    border: 0px solid #ddd;
+    width: 100%;
+    padding: 40px 0px 0px 500px;
+  }
+  
+ .table td, .table th {
+    border: 1px solid #ddd;
+    padding: 40px;
+    padding-right: 78px;
+  }
+  
+  .table tr:nth-child(even){background-color: #f2f2f2;}
+  
+  .table tr:hover {background-color: #ddd;}
+  
+  .table th {
+    padding-top: 12px;
+    padding-bottom: 12px;
+    text-align: center;
+    background-color: #4CAF50;
+    color: white;
+  }
+  

src/components/Resources/Resources.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import ResourcesList from '../data/data.json';
+import { Link } from "react-router-dom";
+import './TableView.css';
+import Toggle from "../Toggle";
+
+export default function TableView() {
+    
+return (
+  <>
+  <Toggle />
+  <div className="table">
+        <th>ID</th>
+        <th>Name</th>
+        <th>URL</th>
+        {
+          ResourcesList.map(resource =>
+          
+          <tr key={resource.id}>
+            <td>{resource.id}</td>
+            <td>{resource.name}</td>
+            <td>{<Link className="resourceLink" to={`/resources/${resource.id}`}><span>More info</span></Link>}</td>  
+         </tr>
+         
+          )
+        }
+  
+  </div>
+   </>
+  );
+}

src/components/Resources/TableView.css

@@ -6,18 +6,22 @@ import Resources from "./Resources/Resources";
 import Footer from "./Footer/Footer";
 import SingleResource from "./SingleResource/SingleResource";
 import Contact from "./ContactUs/Contact";
+import TableView from  "./Resources/TableView";
+
 
 const Router = () => (
+
   <BrowserRouter>
     <Header />
+    
     <Switch>
       <Route exact path="/" component={App} />
       <Route exact path="/resources" component={Resources} />
       <Route path="/resources/:id" component={SingleResource} />
       <Route exact path="/contact" component={Contact} />
+      <Route exact path="/TableView" component={TableView} />
     </Switch>
     <Footer/>
   </BrowserRouter>
 );
-
-export default Router;
+export default Router;

src/components/Resources/TableView.js

@@ -0,0 +1,11 @@
+.flex-container {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.flex-container > button{
+  background-color: white;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+}

src/components/Router.js

@@ -0,0 +1,22 @@
+import card from '../assets/images/card.svg';
+import table from '../assets/images/table.svg';
+import React from "react";
+import { useHistory } from 'react-router-dom';
+import './Toggle.css';
+
+
+export default function Toggle(){
+    const history = useHistory();
+    return (
+        <>
+            <div className="flex-container">
+                
+                    <button  onClick={() => history.push('/TableView')}><img alt ="table" src={table}></img></button>
+                    <button  onClick={() => history.push('/resources')}><img alt ="card" src={card}></img></button>
+                 
+            </div>
+        </>
+
+    );
+
+}