horizontal card

client/src/components/AvatarList.tsx

@@ -1,18 +1,16 @@
 import React, { FC } from "react";
-import { Button } from "./Button";
 import { FloatingButton } from "./FloatingButton";
 
-type AvatarListProps = {
+interface AvatarListProps {
   avatars: string[];
-};
+}
 
 export const AvatarList: FC<AvatarListProps> = ({ avatars }) => {
   return (
-    <div className="row valign-wrapper">
+    <>
       {avatars.map((avatar: string) => (
         <img className="circle" src={avatar} width="32vh" height="32vh" />
       ))}
-      <FloatingButton icon="add" color="grey" size="small" />
+    </>
-    </div>
   );
 };

client/src/components/HorizontalCard.tsx

@@ -0,0 +1,41 @@
+import React, { FC } from "react";
+import { AvatarList } from "./AvatarList";
+
+interface IProps {
+  title: string;
+  tasksTotalCount?: number;
+  tasksDone?: number;
+  remainingDays?: number;
+  avatars: string[];
+}
+
+export const HorizontalCard: FC<IProps> = ({
+  title,
+  tasksDone,
+  tasksTotalCount,
+  remainingDays,
+  avatars
+}) => {
+  return (
+    <div className="col s12">
+      <div className="card horizontal">
+        <div className="card-stacked">
+          <div className="card-content">
+            <h6>{title}</h6>
+            <AvatarList avatars={avatars} />
+            <div className="row">
+              <i className="left material-icons">playlist_add_check</i>
+              <span>
+                {tasksDone}/{tasksTotalCount}
+              </span>
+
+              <div className="right">
+                <span>Due {remainingDays} days</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

client/src/components/TabRouter.tsx

@@ -1,22 +1,50 @@
 import React, { FC } from "react";
 import { TabRouterHeader } from "./TabRouterHeader";
+import { TicketList } from "./TicketList";
+import { Ticket } from "../types/Ticket";
+import { Switch, Route, useRouteMatch } from "react-router-dom";
 
-interface IProps {}
+interface IProps {
-export const TabRouter: FC<IProps> = ({ children }) => {
+  tickets: Ticket[];
+  tasksTotalCount?: number;
+  tasksDone?: number;
+  remainingDays?: number;
+  avatars: string[];
+}
+
+export const TabRouter: FC<IProps> = ({
+  tickets,
+  tasksDone,
+  tasksTotalCount,
+  remainingDays,
+  avatars
+}) => {
+  const { url } = useRouteMatch();
   return (
     <>
-      <div className="row">
+      <Switch>
-        <TabRouterHeader />
+        <div className="row">
-        <div id="test1" className="col s12">
+          <TabRouterHeader />
-          Tickets
+
+          <Route path={`${url}/tickets`}>
+            <TicketList
+              tickets={tickets}
+              tasksDone={tasksDone}
+              tasksTotalCount={tasksTotalCount}
+              remainingDays={remainingDays}
+              avatars={avatars}
+            />
+          </Route>
+
+          <Route path={`${url}/files`}>
+            {/* <TicketList tickets={tickets} /> */}
+          </Route>
+
+          <Route path={`${url}/activity`}>
+            {/* <TicketList tickets={tickets} /> */}
+          </Route>
         </div>
-        <div id="test2" className="col s12">
+      </Switch>
-          Files
-        </div>
-        <div id="test3" className="col s12">
-          Activity
-        </div>
-      </div>
     </>
   );
 };

client/src/components/TabRouterHeader.tsx

@@ -1,4 +1,5 @@
 import React, { FC, useState } from "react";
+import { Link, useRouteMatch } from "react-router-dom";
 
 interface TabUnitProps {
   tabClass: string;
@@ -15,16 +16,17 @@ const TabUnit: FC<TabUnitProps> = ({
   text,
   value
 }) => {
+  const { url } = useRouteMatch();
   return (
     <li className={tabClass} key={value}>
-      <a
+      <Link
+        to={`${url}/${text}`}
         id={value}
         className={isActive === parseInt(value) ? "active" : ""}
-        href={`#${text}`}
         onClick={() => setIsActive(parseInt(value))}
       >
         {text}
-      </a>
+      </Link>
     </li>
   );
 };
@@ -47,7 +49,7 @@ export const TabRouterHeader: FC<IProps> = ({
 
   return (
     <>
-      <div className="col s12">
+      <div className="row col s12">
         <ul className="tabs">
           <TabUnit
             text="Tickets"

client/src/components/TicketList.tsx

@@ -1,16 +1,47 @@
 import React, { FC } from "react";
 import { Ticket } from "../types/Ticket";
+import { FloatingButton } from "./FloatingButton";
+import { HorizontalCard } from "./HorizontalCard";
 
 type TicketListProps = {
   tickets: Ticket[];
+  tasksTotalCount?: number;
+  tasksDone?: number;
+  remainingDays?: number;
+  avatars: string[];
 };
 
-export const TicketList: FC<TicketListProps> = ({ tickets }) => {
+export const TicketList: FC<TicketListProps> = ({
+  tickets,
+  tasksDone,
+  tasksTotalCount,
+  remainingDays,
+  avatars
+}) => {
   return (
-    <div className="row">
+    <div className="col s12">
-      {tickets.map((t: Ticket) => (
+      <div className="row valign-wrapper">
-        <li key={t.id}>{t.title}</li>
+        <div className="col s6 m4">
-      ))}
+          <h2>Tickets</h2>
+        </div>
+        <div className="col s6 m8">
+          <FloatingButton color="grey" size="big" />
+        </div>
+      </div>
+
+      <ul>
+        {tickets.map((t: Ticket) => (
+          <li key={t.id}>
+            <HorizontalCard
+              title={t.title}
+              tasksDone={tasksDone}
+              tasksTotalCount={tasksTotalCount}
+              remainingDays={remainingDays}
+              avatars={avatars}
+            />
+          </li>
+        ))}
+      </ul>
     </div>
   );
 };

client/src/pages/ProjectPage.tsx

@@ -2,9 +2,9 @@ import React, { FC } from "react";
 import { Header } from "../components/Header";
 import { AvatarList } from "../components/AvatarList";
 import { ProgressBar } from "../components/ProgressBar";
-import { TicketList } from "../components/TicketList";
 import ProjectVM from "../viewModels/ProjectVM";
 import { TabRouter } from "../components/TabRouter";
+import { FloatingButton } from "../components/FloatingButton";
 
 interface IProps {
   viewModel: ProjectVM;
@@ -24,19 +24,23 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
     <div className="section">
       <div className="container">
         <Header title={title} description={description} />
-        <AvatarList avatars={avatars} />
+        <div className="row valign-wrapper">
+          <AvatarList avatars={avatars} />
+          <FloatingButton icon="add" color="grey" size="small" />
+        </div>
         <ProgressBar
           value={value}
           tasksDone={ticketsDone}
           tasksTotalCount={ticketsTotalCount}
           remainingDays={remainingDays}
         />
-        <TabRouter>
+        <TabRouter
-          {/* <TabRouterSelector/> */}
+          tickets={tickets}
-          <TicketList tickets={tickets} />
+          tasksDone={ticketsDone}
-          {/* <ChildFile />
+          tasksTotalCount={ticketsTotalCount}
-        <ChildActivity /> */}
+          remainingDays={remainingDays}
-        </TabRouter>
+          avatars={avatars}
+        />
       </div>
     </div>
   );