From f89201dbddfbb429bb5ea0058ee1379c2bdb6fe9 Mon Sep 17 00:00:00 2001
From: sehilyi <sehilyi@gmail.com>
Date: Mon, 29 Apr 2024 21:41:17 -0400
Subject: [PATCH] sketching layout

---
 src/App.tsx   | 34 ++++++++++++++++++++++++++++++++--
 src/index.css |  3 +++
 2 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 src/index.css

diff --git a/src/App.tsx b/src/App.tsx
index e53b82f..f0cacf3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,9 +1,39 @@
 import React from 'react';
+import './index.css';
+import _data from './data.json';
+
+type Datum = {
+  id: number;
+  name: string;
+  title: string;
+  authors: string[];
+  venue: string;
+  index: string;
+  year: number;
+  url: string;
+  abstract: string;
+}
+
+const Data = _data as Datum[];
 
 function App() {
 	return (
-		<div>
-			<h1>App</h1>
+		<div className="h-full">
+			<nav className="h-10 font-bold bg-black/10">
+				<h1>Multimodal Visualization Authoring</h1>
+			</nav>
+			<div className="flex flex-rows outline outline-1 outline-black/20">
+				<div className="flex-none w-[200px] outline outline-1 outline-black/20"></div>
+				<div className="flex-1 outline outline-1 outline-black/20">
+					{Data.map((datum) => (
+						<div key={datum.id}>
+							<h2>{datum.title}</h2>
+						</div>
+					))}
+				</div>
+			</div>
+      <footer className="h-10 font-bold bg-black/10">
+      </footer>
 		</div>
 	);
 }
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..7cc411c
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,3 @@
+html, body, #root {
+  height: 100%;
+}