tailwind and auth tweaks

7 files changed, 89 insertions, 45 deletions

diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss
deleted file mode 100644
index 5f82ae5..0000000
--- a/app/assets/stylesheets/application.bootstrap.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-@import 'bootstrap/scss/bootstrap';
-@import 'bootstrap-icons/font/bootstrap-icons';
-
-.bg_primary-color {
-  background-color: #FFFFFF;
-}
-.primary-color {
-  background-color: #FFFFFF;
-}
-.bg_secondary-color {
-  background-color: #293241;
-}
-.secondary-color {
-  color: #293241;
-}
-.custom-button.btn {
-  background-color: #293241;
-  color: #FFF;
-  border: none;
-}
-.hero {
-  width: 100vw;
-  height: 50vh;
-}
-.hero img {
-  object-fit: cover;
-  object-position: top;
-  height: 100%;
-  width: 100%;
-}
-.overlay {
-  height: 100%;
-  width: 100%;
-  opacity: 0.4;
-}
diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
new file mode 100644
index 0000000..8666d2f
--- /dev/null
+++ b/app/assets/stylesheets/application.tailwind.css
@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+
+@layer components {
+  .btn-primary {
+    @apply py-2 px-4 bg-blue-200;
+  }
+}
+
+*/
diff --git a/app/javascript/application.js b/app/javascript/application.js
index 85b9adf..d635261 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -1,5 +1,5 @@
 // Entry point for the build script in your package.json
 import "@hotwired/turbo-rails"
 import "./controllers"
-import * as bootstrap from "bootstrap"
+//import * as bootstrap from "bootstrap"
 import "./components"
diff --git a/app/javascript/components/Home.jsx b/app/javascript/components/Home.jsx
index 563ec88..efe3cd5 100644
--- a/app/javascript/components/Home.jsx
+++ b/app/javascript/components/Home.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Link } from "react-router-dom";
 
 export default () => (
-  <div className="vw-100 vh-100 primary-color d-flex align-items-center justify-content-center">
+  <div className="vh-100 primary-color d-flex align-items-center justify-content-center">
     <div className="jumbotron jumbotron-fluid bg-transparent">
       <div className="container secondary-color">
         <h1 className="display-4">Games!</h1>
diff --git a/app/javascript/components/Layout.jsx b/app/javascript/components/Layout.jsx
new file mode 100644
index 0000000..74568cd
--- /dev/null
+++ b/app/javascript/components/Layout.jsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { Outlet, Link } from "react-router-dom";
+
+export default function Layout ({userData}) 
+{
+	//console.log(userData);
+	//const [userData, setUserData] = useState({ login: "" });
+	return (
+	<>
+		<div className="flex flex-row h-screen bg-slate-800 text-slate-100">
+		<nav className="flex flex-row h-full w-64 p-4 gap-4 items-center">
+			<div className="h-full flex flex-col">
+				<div>Logged in as: {userData.login}</div>
+				<div className="text-4xl py-12">Adam Malczewski</div>
+				<div className="flex flex-row justify-center w-full block grow">
+				<div className="block grow">	
+               	 <ul className="navbar-nav">
+						<li className="text-center">
+							<Link
+							to="/"
+							className="hover:text-slate-100/50 underline"
+							role="button"
+							>
+								Home
+							</Link>
+						</li>
+						<li className="text-center">
+							<Link
+							to="/blogs"
+							className="hover:text-slate-100/50 underline"
+							role="button"
+							>
+								Blog
+							</Link>
+						</li>
+						<li className="text-center">
+							<Link
+							to="/games"
+							className="hover:text-slate-100/50 underline"
+							role="button"
+							>
+								Games
+							</Link>
+						</li>
+					</ul>
+				</div>
+			</div>
+			</div>
+			<div className="h-3/4 w-0.5 bg-slate-500 block rounded-full">
+			</div>
+		</nav>
+	<Outlet />
+		</div>
+</>
+	)
+};
diff --git a/app/javascript/routes/index.jsx b/app/javascript/routes/index.jsx
index be928fc..bc5d541 100644
--- a/app/javascript/routes/index.jsx
+++ b/app/javascript/routes/index.jsx
@@ -1,26 +1,30 @@
 import React, { useState, useEffect } from "react";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
 import Home from "../components/Home";
 import Blogs from "../components/Blogs";
+import Layout from "../components/Layout";
 
 export default function index()
 {
 	const [userData, setUserData] = useState({ login: "" });
 	const url = "/api/v1/auth/data";
-	fetch(url).then((response) => {
+	useEffect(() => {
+		fetch(url).then((response) => {
 		if(response.ok) {
 			return response.json();
 		}
 		throw new Error("Network response was not ok.");
-	}).then((response) => setUserData(response));
+	}).then((response) => setUserData(response));}, []);
 		// get user data here
 		// then pass it in as 'props' into the components
 	return (<>
-	    <h1>{userData.login}</h1>
+		{/*<h1>{userData.login}</h1>*/}
 		<Router>
 			<Routes>
-				<Route path="/" element = {<Home />} />
-				<Route path="/blogs" element={<Blogs />} />
+				<Route path="/" element = {<Layout userData={userData}/>}>
+					<Route index element={<Home />} />
+					<Route path="/blogs" element={<Blogs />} />
+				</Route>
 			</Routes>
 		</Router>
 	</>);
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 8cc5cad..7ed5167 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -1,16 +1,22 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>GamesHost</title>
+    <title>Adam</title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
+    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
 
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
+
+    <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
+    <!-- Google fonts-->
+    <!--link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700" rel="stylesheet" type="text/css" /-->
+    <!--link href="https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i" rel="stylesheet" type="text/css" /-->
   </head>
 
-  <body>
+  <body if="page-top">
     <%= yield %>
   </body>
 </html>