Skip to content

Commit 1d9acd8

Browse files
matthewxing1matthewxing1
committed
Template for ksqlight
1 parent d3beefd commit 1d9acd8

File tree

14 files changed

+420
-41
lines changed

14 files changed

+420
-41
lines changed

‎ksqLight/package-lock.json

Lines changed: 63 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ksqLight/package.json

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"ksqldb-js": "^1.1.0",
1414
"react": "^18.2.0",
1515
"react-dom": "^18.2.0",
16+
"react-router-dom": "^6.3.0",
1617
"react-scripts": "5.0.1",
1718
"wait-on": "^6.0.1",
1819
"web-vitals": "^2.1.4"
@@ -45,5 +46,10 @@
4546
"last 1 firefox version",
4647
"last 1 safari version"
4748
]
49+
},
50+
"devDependencies": {
51+
"autoprefixer": "^10.4.7",
52+
"postcss": "^8.4.14",
53+
"tailwindcss": "^3.1.4"
4854
}
49-
}
55+
}

‎ksqLight/postcss.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎ksqLight/public/favicon.ico

-3.78 KB
Binary file not shown.

‎ksqLight/public/index.html

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<meta name="theme-color" content="#000000" />
85
<meta
96
name="description"
10-
content="Web site created using create-react-app"
7+
content="ksqLight"
118
/>
12-
<title>React App</title>
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Oswald:wght@200;300;400;500;600;700&family=Raleway:wght@500&display=swap" rel="stylesheet">
12+
<meta name="viewport" content="width=device-width, initial-scale=1" />
13+
<meta name="theme-color" content="#000000" />
1314
</head>
1415
<body>
1516
<div id="root"></div>

‎ksqLight/public/logo192.png

-5.22 KB
Binary file not shown.

‎ksqLight/public/logo512.png

-9.44 KB
Binary file not shown.

‎ksqLight/src/App.css

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎ksqLight/src/App.js

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
1-
2-
import './App.css';
1+
import React from "react";
2+
import { useState } from "react";
3+
import { BrowserRouter, Routes, Route } from "react-router-dom";
4+
import { Header } from "./components/Header.js";
5+
import { Homepage } from "./components/Homepage.js";
6+
import { Settings } from "./components/Settings.js";
37

48
function App() {
9+
const [fetchMetrics, setFetchMetrics] = useState(true);
10+
511
return (
6-
<div className="App">
7-
<header className="App-header">
8-
<p>
9-
Edit <code>src/App.js</code> and save to reload.
10-
</p>
11-
<a
12-
className="github-link"
13-
href="https://github.com/oslabs-beta/ksqljs/"
14-
target="_blank"
15-
rel="noopener noreferrer"
16-
>
17-
Check our Github!
18-
</a>
19-
</header>
20-
</div>
12+
<BrowserRouter>
13+
<Header fetchMetrics={fetchMetrics} setFetchMetrics={setFetchMetrics}/>
14+
<Routes>
15+
<Route path="/" element={<Homepage/>}/>
16+
<Route path="/settings" element={<Settings/>}/>
17+
</Routes>
18+
</BrowserRouter>
19+
2120
);
2221
}
2322

‎ksqLight/src/components/Header.js

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import React from "react";
2+
import { useNavigate } from "react-router-dom";
3+
4+
export const Header = ({ fetchMetrics, setFetchMetrics }) => {
5+
let navigate = useNavigate();
6+
7+
const toggle = () => {
8+
setFetchMetrics(!fetchMetrics);
9+
}
10+
const navGithub = () => {
11+
window.open(
12+
"https://github.com/oslabs-beta/ksqljs/", "_blank");
13+
}
14+
const navHomepage = () => {
15+
navigate("/")
16+
}
17+
const navSettings = () => {
18+
navigate("/settings")
19+
}
20+
21+
const playButtonSVG = () => {
22+
return(<svg className="h-5 w-5" viewBox="0 0 18 18" fill="currentColor"><path fillRule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM9.555 7.168A1 1 0 0 0 8 8v4a1 1 0 0 0 1.555.832l3-2a1 1 0 0 0 0-1.664l-3-2z" clipRule="evenodd"/></svg>)
23+
}
24+
const pauseButtonSVG = () => {
25+
return(<svg className="h-5 w-5" viewBox="0 0 18 18" fill="currentColor"><path fillRule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zM7 8a1 1 0 0 1 2 0v4a1 1 0 1 1-2 0V8zm5-1a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0V8a1 1 0 0 0-1-1z" clipRule="evenodd"/></svg>)
26+
}
27+
28+
return (
29+
//background color of header
30+
//ksqLight text styling
31+
//empty fill box
32+
//documentation
33+
//refresh
34+
//duration
35+
//play&stop
36+
//charts
37+
//settings
38+
<nav className="flex items-center justify-between flex-wrap bg-gradient-to-r h-16 from-cyan-700 to-sky-700 background-animate p-3">
39+
<div className="flex items-center flex-shrink-0 text-white mr-6">
40+
<button onClick={() => {navHomepage()}} className="font-raleway font-bold text-3xl tracking-tight">ksqLight</button>
41+
</div>
42+
<div className="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
43+
<div className="lg:flex-grow"></div>
44+
<button onClick={() => {navGithub()}} className="flex items-center px-2 py-2 text-teal-200 hover:text-white hover:border-white">
45+
<svg className="h-5 w-5" viewBox="0 0 18 18" fill="currentColor"><path fillRule="evenodd" d="M4 4a2 2 0 0 1 2-2h4.586A2 2 0 0 1 12 2.586L15.414 6A2 2 0 0 1 16 7.414V16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4zm2 6a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1zm1 3a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2H7z" clipRule="evenodd"/></svg>
46+
</button>
47+
<button className="flex items-center px-2 py-2 text-teal-200 hover:text-white hover:border-white">
48+
<svg className="h-5 w-5" viewBox="0 0 18 18" fill="currentColor"><path fillRule="evenodd" d="M4 2a1 1 0 0 1 1 1v2.101a7.002 7.002 0 0 1 11.601 2.566 1 1 0 1 1-1.885.666A5.002 5.002 0 0 0 5.999 7H9a1 1 0 0 1 0 2H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm.008 9.057a1 1 0 0 1 1.276.61A5.002 5.002 0 0 0 14.001 13H11a1 1 0 1 1 0-2h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0v-2.101a7.002 7.002 0 0 1-11.601-2.566 1 1 0 0 1 .61-1.276z" clipRule="evenodd"/></svg>
49+
</button>
50+
<button className="flex items-center px-2 py-2 text-teal-200 hover:text-white hover:border-white">
51+
<svg className="h-5 w-5" viewBox="0 0 18 18" fill="currentColor"><path fillRule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm1-12a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l2.828 2.829a1 1 0 1 0 1.415-1.415L11 9.586V6z" clipRule="evenodd"/></svg>
52+
</button>
53+
<button onClick={() => toggle()} className="flex items-center px-2 py-2 text-teal-200 hover:text-white hover:border-white">
54+
{fetchMetrics ? pauseButtonSVG() : playButtonSVG()}
55+
</button>
56+
<button className="flex items-center px-2 py-2 text-teal-200 hover:text-white hover:border-white">
57+
<svg className="h-5 w-5" viewBox="0 0 18 18" fill="currentColor"><path d="M2 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-5zm6-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V7zm6-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V4z"/></svg>
58+
</button>
59+
<button onClick={() => navSettings()} className="flex items-center px-2 py-2 text-teal-200 hover:text-white hover:border-white">
60+
<svg className="h-5 w-5" viewBox="0 0 18 18" fill="currentColor"><path fillRule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 0 1-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 0 1 .947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 0 1 2.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 0 1 2.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 0 1 .947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 0 1-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 0 1-2.287-.947zM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" clipRule="evenodd"/></svg>
61+
</button>
62+
</div>
63+
</nav>
64+
)
65+
}
66+

0 commit comments

Comments
 (0)