Merge pull request #13 from Midna3/develop

Release v0.0.1

Author: MarioLeandro

package.json

@@ -11,12 +11,15 @@
     "@types/node": "^16.7.13",
     "@types/react": "^17.0.20",
     "@types/react-dom": "^17.0.9",
+    "axios": "^0.27.2",
     "chart.js": "^3.7.1",
     "react": "^18.0.0",
     "react-chartjs-2": "^4.1.0",
     "react-circular-progressbar": "^2.0.4",
     "react-dom": "^18.0.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.0",
+    "react-select": "^5.3.2",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"
   },

public/index.html

@@ -12,7 +12,6 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
   <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -44,4 +43,4 @@
     -->
 </body>
 
-</html>
+</html>

src/App.css

@@ -1,9 +1,20 @@
-import React from 'react';
-import Home from './pages/Home';
+import { Routes, Route } from 'react-router-dom';
+import { globalStyles } from './stitches.config';
+import { Header } from './components/Header/Header';
+import { SchoolPage } from './pages/SchoolPage/SchoolPage';
+import { HomePage } from './pages/HomePage/HomePage';
 
 function App() {
+  globalStyles();
+
   return (
-    <Home/>
+    <div>
+      <Header />
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/school/:schoolId" element={<SchoolPage />} />
+      </Routes>
+    </div>
   );
 }
 

src/App.tsx

@@ -0,0 +1,55 @@
+import { CircularProgressbarWithChildren } from 'react-circular-progressbar';
+import 'react-circular-progressbar/dist/styles.css';
+
+import { circleGraph, graphBox, percent } from './style';
+
+export type DataProp = {
+  value: number;
+  maxValue: number;
+  fillColor: string;
+  circleText: string;
+  title: string;
+  numericalData: number | null;
+};
+
+export const CircleGraphBox = (props: DataProp) => {
+  const { value, maxValue, fillColor, circleText, title, numericalData } =
+    props;
+
+  return (
+    <div className={graphBox()}>
+      <div className={circleGraph()}>
+        <CircularProgressbarWithChildren
+          value={value}
+          maxValue={maxValue}
+          strokeWidth={5}
+          styles={{
+            text: {
+              fontFamily: 'sans-serif',
+              fill: `${fillColor}`,
+              fontWeight: 500,
+            },
+            trail: { stroke: '#DBDFF1' },
+            path: {
+              stroke: `${fillColor}`,
+            },
+          }}
+        >
+          <div className={percent()}>
+            <span>{circleText}</span>
+          </div>
+        </CircularProgressbarWithChildren>
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+        }}
+      >
+        <span>{numericalData ? numericalData : '--'}</span>
+        <p>{title}</p>
+      </div>
+    </div>
+  );
+};

src/assets/icons/dashboard.png

@@ -0,0 +1,18 @@
+import { css } from '../../stitches.config';
+
+export const graphBox = css({
+  display: 'flex',
+  gap: 18,
+  flexDirection: 'row',
+});
+
+export const circleGraph = css({
+  width: '90px',
+});
+
+export const percent = css({
+  fontSize: '25px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});

public/Location.png renamed to src/assets/icons/location.png

@@ -0,0 +1,28 @@
+import React from 'react';
+import { dataCard, icon } from './style';
+
+export type DataProp = {
+  background: string;
+  title: string;
+  data: string;
+};
+
+export const DataCard = (props: DataProp) => {
+  const { background, title, data } = props;
+
+  return (
+    <div className={dataCard()}>
+      <div className={icon()} style={{ backgroundColor: `${background}` }} />
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+        }}
+      >
+        <p style={{ fontWeight: 'bold' }}>{title}</p>
+        <p>{data}</p>
+      </div>
+    </div>
+  );
+};

src/components/CircleGraphBox/CircleGraphBox.tsx

@@ -0,0 +1,32 @@
+import { css } from '../../stitches.config';
+
+export const container = css({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 47,
+  padding: '50px',
+  backgroundColor: '#F1F4FA',
+  fontSize: '20px',
+  color: '#383874',
+  height: '800px',
+});
+
+export const enrolledStudents = css({
+  h1: {
+    fontSize: '70px',
+  },
+});
+
+export const dataCard = css({
+  display: 'flex',
+  gap: 26,
+  flexDirection: 'row',
+  padding: '15px',
+  paddingLeft: '0px',
+});
+
+export const icon = css({
+  width: '70px',
+  height: '70px',
+  borderRadius: '20px',
+});

src/components/CircleGraphBox/style.ts

@@ -0,0 +1,4 @@
+import { styled } from '../../stitches.config';
+import { FlexCSS } from './style';
+
+export const Flex = styled('div', FlexCSS);

src/components/DataCard/DataCard.tsx

@@ -0,0 +1,97 @@
+import { css } from '../../stitches.config';
+
+export const FlexCSS = css({
+  boxSizing: 'border-box',
+  display: 'flex',
+
+  variants: {
+    direction: {
+      row: {
+        flexDirection: 'row',
+      },
+      column: {
+        flexDirection: 'column',
+      },
+      rowReverse: {
+        flexDirection: 'row-reverse',
+      },
+      columnReverse: {
+        flexDirection: 'column-reverse',
+      },
+    },
+    align: {
+      start: {
+        alignItems: 'flex-start',
+      },
+      center: {
+        alignItems: 'center',
+      },
+      end: {
+        alignItems: 'flex-end',
+      },
+      stretch: {
+        alignItems: 'stretch',
+      },
+      baseline: {
+        alignItems: 'baseline',
+      },
+    },
+    justify: {
+      start: {
+        justifyContent: 'flex-start',
+      },
+      center: {
+        justifyContent: 'center',
+      },
+      end: {
+        justifyContent: 'flex-end',
+      },
+      between: {
+        justifyContent: 'space-between',
+      },
+    },
+    wrap: {
+      noWrap: {
+        flexWrap: 'nowrap',
+      },
+      wrap: {
+        flexWrap: 'wrap',
+      },
+      wrapReverse: {
+        flexWrap: 'wrap-reverse',
+      },
+    },
+    gap: {
+      1: {
+        gap: 5,
+      },
+      2: {
+        gap: 10,
+      },
+      3: {
+        gap: 15,
+      },
+      4: {
+        gap: 20,
+      },
+      5: {
+        gap: 25,
+      },
+      6: {
+        gap: 30,
+      },
+      7: {
+        gap: 35,
+      },
+      8: {
+        gap: 40,
+      },
+    },
+  },
+  defaultVariants: {
+    direction: 'row',
+    align: 'stretch',
+    justify: 'start',
+    wrap: 'noWrap',
+  },
+});