From f1b8e3cb04e9f274e8008881bdc2edc910123046 Mon Sep 17 00:00:00 2001
From: Jan Tuomi <jans.tuomi@gmail.com>
Date: Fri, 2 Jul 2021 10:02:03 +0300
Subject: Add marquees for research papers

---
 frontend/pages/index.tsx        | 14 ++++++++++++++
 frontend/styles/Home.module.css |  1 -
 2 files changed, 14 insertions(+), 1 deletion(-)

(limited to 'frontend')

diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
index 16d413d..58b3b56 100644
--- a/frontend/pages/index.tsx
+++ b/frontend/pages/index.tsx
@@ -1,11 +1,23 @@
 import Head from "next/head";
 import { ReactElement, useEffect, useState } from "react";
 import { io } from "socket.io-client";
+import Marquees, { MarqueeLink } from "../components/Marquees/Marquees";
 import * as config from "../config";
 import styles from "../styles/Home.module.css";
 
 const socket = io(config.backendUrl);
 
+const mockData: MarqueeLink[] = [
+    { title: "Foobar of Foos and Bars", url: "https://example.com" },
+    { title: "Foobar of Foos and Bars", url: "https://example.com" },
+    { title: "Foobar of Foos and Bars", url: "https://example.com" },
+    { title: "Foobar of Foos and Bars", url: "https://example.com" },
+    { title: "Foobar of Foos and Bars", url: "https://example.com" },
+    { title: "Foobar of Foos and Bars", url: "https://example.com" },
+    { title: "Foobar of Foos and Bars", url: "https://example.com" },
+    { title: "Foobar of Foos and Bars", url: "https://example.com" },
+];
+
 const Home = (): ReactElement => {
     const [value, setValue] = useState<number | undefined>(undefined);
 
@@ -37,6 +49,7 @@ const Home = (): ReactElement => {
             </Head>
             <button onClick={increment} className={styles.tomiBtn} style={{
                 transform: `rotate(${rotateDeg}deg)`,
+                display: value === undefined ? "none" : "inherit",
             }}>
                 <div className={styles.btnInner}>
                     <span className={styles.counter}>{value}</span>
@@ -44,6 +57,7 @@ const Home = (): ReactElement => {
                     <img src="/tomi_sq.png" alt="" />
                 </div>
             </button>
+            <Marquees links={mockData} />
         </div>
     );
 };
diff --git a/frontend/styles/Home.module.css b/frontend/styles/Home.module.css
index 1b82f36..6f43b54 100644
--- a/frontend/styles/Home.module.css
+++ b/frontend/styles/Home.module.css
@@ -2,7 +2,6 @@
   min-height: 100vh;
   height: 100vh;
   width: 100vw;
-  padding: 0 0.5rem;
   overflow: hidden;
   position: relative;
 }
-- 
cgit v1.3