Skip to content

Commit 55cab1b

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

21 files changed

+3668
-1923
lines changed

‎client/.env.development

+2-1
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

+2-1
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

+3,422-1,766
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json

+11-6
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

+8
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

-45
This file was deleted.

‎client/src/App.jsx

+11-22
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

+9
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

+23
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

+55
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+
// }

‎client/src/components/sidebar/sidebar.jsx

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import Select from "react-select";
2+
import { useState } from "react";
3+
4+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
5+
import { faCheck } from '@fortawesome/free-solid-svg-icons'
6+
7+
const options = [
8+
{ value: 'chocolate', label: 'Chocolate' },
9+
{ value: 'strawberry', label: 'Strawberry' },
10+
{ value: 'vanilla', label: 'Vanilla' }
11+
]
12+
13+
export default function Sidebar() {
14+
const [selectedOption, setSelectedOption] = useState("");
15+
16+
const handlePredictorTypeSelect = (e) => {
17+
console.log(e.value)
18+
setSelectedOption(e.value);
19+
};
20+
21+
const handleResponseTypeSelect = (e) => {
22+
console.log(e.value)
23+
setSelectedOption(e.value);
24+
};
25+
26+
return (
27+
<div id="sidebar" className="flex flex-col w-1/4 shadow-md ml-1 p-6">
28+
29+
<div id="header-wrapper flex flex-col">
30+
<h1 className="text-2xl mb-5">Visualise</h1>
31+
</div>
32+
33+
<div id="select-wrapper flex flex-col">
34+
<Select
35+
id="select-predictor"
36+
placeholder="Predictor"
37+
className="w-full max-w-sm m-2.5"
38+
options={options}
39+
onChange={handlePredictorTypeSelect}
40+
value={options.find(function (option) {
41+
return option.value === selectedOption;
42+
})}
43+
/>
44+
45+
<Select
46+
id="select-response"
47+
placeholder="Response"
48+
className="w-full max-w-sm m-2.5"
49+
options={options}
50+
onChange={handleResponseTypeSelect}
51+
value={options.find(function (option) {
52+
return option.value === selectedOption;
53+
})}
54+
/>
55+
</div>
56+
57+
<div id="confirm-wrapper flex flex-col">
58+
<button className="btn w-1/4 bg-base-100 shadow-md mt-5 rounded-2xl">
59+
<FontAwesomeIcon
60+
icon={faCheck}
61+
size="2x"
62+
/>
63+
</button>
64+
</div>
65+
</div >
66+
);
67+
}

‎client/src/config/config.js

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ class Config {
33
this.APP_NAME = import.meta.env.VITE_APP_NAME;
44
this.APP_VERSION = import.meta.env.VITE_APP_VERSION;
55
this.GRAPHQL_URL = import.meta.env.VITE_GRAPHQL_URL;
6+
this.REDIS_URL = import.meta.env.VITE_REDIS_URL;
67
}
78
};
89

‎client/src/error-page.jsx renamed to ‎client/src/features/error/error-page.jsx

File renamed without changes.

‎client/src/features/iris/iris-page.jsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default function IrisPage() {
2+
return (
3+
<div id="iris-page">
4+
<h1>Iris</h1>
5+
</div>
6+
);
7+
}

‎client/src/features/predictions/predictions-page.jsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default function PredictionsPage() {
2+
return (
3+
<div id="predictions-page">
4+
<h1>Predictions</h1>
5+
</div>
6+
);
7+
}

0 commit comments

Comments
 (0)