Skip to content

Commit 55cab1b

Browse files
JBrisJBris
committed
Adding tailwind
1 parent 3610b87 commit 55cab1b

File tree

21 files changed

+3668
-1923
lines changed

21 files changed

+3668
-1923
lines changed

‎client/.env.development‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
VITE_APP_NAME=fastapi-react-graphql
22
VITE_APP_VERSION=1.0.0
3-
VITE_GRAPHQL_URL=http://localhost:3000
3+
VITE_GRAPHQL_URL=http://localhost:3000
4+
VITE_REDIS_URL=redis://localhost:6379

‎client/.env.production‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
VITE_APP_NAME=fastapi-react-graphql
22
VITE_APP_VERSION=1.0.0
3-
VITE_GRAPHQL_URL=http://server:3000
3+
VITE_GRAPHQL_URL=http://server:3000
4+
VITE_REDIS_URL=redis://redis:6379

‎client/package-lock.json‎

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

‎client/package.json‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,27 +12,32 @@
1212
},
1313
"dependencies": {
1414
"@apollo/client": "^3.9.5",
15-
"@chakra-ui/react": "^2.8.2",
16-
"@emotion/react": "^11.11.4",
17-
"@emotion/styled": "^11.11.0",
15+
"@fortawesome/fontawesome-svg-core": "^6.5.1",
16+
"@fortawesome/free-solid-svg-icons": "^6.5.1",
17+
"@fortawesome/react-fontawesome": "^0.2.0",
1818
"@reduxjs/toolkit": "^2.2.1",
19-
"framer-motion": "^11.0.8",
2019
"graphql": "^16.8.1",
2120
"localforage": "^1.10.0",
2221
"match-sorter": "^6.3.4",
22+
"plotly.js": "^2.29.1",
2323
"react": "^18.2.0",
2424
"react-dom": "^18.2.0",
25+
"react-plotly.js": "^2.6.0",
2526
"react-router-dom": "^6.22.2",
26-
"sort-by": "^1.2.0"
27+
"react-select": "^5.8.0"
2728
},
2829
"devDependencies": {
2930
"@types/react": "^18.2.56",
3031
"@types/react-dom": "^18.2.19",
3132
"@vitejs/plugin-react": "^4.2.1",
33+
"autoprefixer": "^10.4.18",
34+
"daisyui": "^4.7.2",
3235
"eslint": "^8.56.0",
3336
"eslint-plugin-react": "^7.33.2",
3437
"eslint-plugin-react-hooks": "^4.6.0",
3538
"eslint-plugin-react-refresh": "^0.4.5",
39+
"postcss": "^8.4.35",
40+
"tailwindcss": "^3.4.1",
3641
"vite": "^5.1.4"
3742
}
38-
}
43+
}

‎client/postcss.config.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}
7+
8+

‎client/src/App.css‎

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

‎client/src/App.jsx‎

Lines changed: 11 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,22 @@
11
import { useState } from 'react'
2-
import reactLogo from './assets/react.svg'
3-
import viteLogo from '/vite.svg'
4-
import './App.css'
2+
import Header from './components/header/header';
3+
import Sidebar from './components/sidebar/sidebar';
4+
import Contents from './components/contents/contents';
55

66
function App() {
77
const [count, setCount] = useState(0)
88

99
return (
1010
<>
11-
<div>
12-
<a href="https://vitejs.dev" target="_blank">
13-
<img src={viteLogo} className="logo" alt="Vite logo" />
14-
</a>
15-
<a href="https://react.dev" target="_blank">
16-
<img src={reactLogo} className="logo react" alt="React logo" />
17-
</a>
11+
<div id="app" className="flex-row w-screen h-screen mx-auto my-auto">
12+
<div id="header-wrapper" className="flex flex-row w-full mx-auto">
13+
<Header></Header>
14+
</div>
15+
<div id="body-wrapper" className="flex flex-row w-full h-full mx-auto">
16+
<Sidebar></Sidebar>
17+
<Contents></Contents>
18+
</div>
1819
</div>
19-
<h1>Vite + React</h1>
20-
<div className="card">
21-
<button onClick={() => setCount((count) => count + 1)}>
22-
count is {count}
23-
</button>
24-
<p>
25-
Edit <code>src/App.jsx</code> and save to test HMR
26-
</p>
27-
</div>
28-
<p className="read-the-docs">
29-
Click on the Vite and React logos to learn more
30-
</p>
3120
</>
3221
)
3322
}

‎client/src/components/contents/contents.jsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Outlet } from "react-router-dom";
2+
3+
export default function Contents() {
4+
return (
5+
<div id="contents">
6+
<Outlet />
7+
</div>
8+
);
9+
}

‎client/src/components/header/header.jsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Link } from 'react-router-dom';
2+
3+
export default function Header() {
4+
return (
5+
<div id="header" className="flex flex-row w-full shadow-md mb-0.5">
6+
<div className="navbar bg-base-100 rounded-box">
7+
<div className="navbar-start pl-20 text-2xl">
8+
<h1>FastAPI React GraphQL</h1>
9+
</div>
10+
<div className="navbar hidden lg:flex">
11+
<ul className="menu menu-horizontal text-2xl">
12+
<li>
13+
<Link to="/iris">Iris</Link>
14+
</li>
15+
<li>
16+
<Link to="/predictions">Predictions</Link>
17+
</li>
18+
</ul>
19+
</div>
20+
</div>
21+
</div >
22+
);
23+
}

‎client/src/components/scatterplot/ScatterPlot2D.jsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
2+
3+
4+
5+
6+
// import React from 'react';
7+
8+
// import Plot from 'react-plotly.js';
9+
10+
// export default function Scatterplot2D() {
11+
// return (
12+
// <div id="main">
13+
// <Outlet />
14+
// </div>
15+
// );
16+
// }
17+
18+
19+
// class App extends React.Component {
20+
21+
// render() {
22+
23+
// return (
24+
25+
// <Plot
26+
27+
// data={[
28+
29+
// {
30+
31+
// x: [1, 2, 3],
32+
33+
// y: [2, 6, 3],
34+
35+
// type: 'scatter',
36+
37+
// mode: 'lines+markers',
38+
39+
// marker: { color: 'red' },
40+
41+
// },
42+
43+
// { type: 'bar', x: [1, 2, 3], y: [2, 5, 3] },
44+
45+
// ]}
46+
47+
// layout={{ width: 320, height: 240, title: 'A Fancy Plot' }}
48+
49+
// />
50+
51+
// );
52+
53+
// }
54+
55+
// }

0 commit comments

Comments
 (0)