diff --git a/package.json b/package.json index 6e7a029..10e0cc5 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "archiver": "^5.3.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.10.0", "react-scripts": "5.0.1", "typescript": "^4.4.2", "web-vitals": "^2.1.0" diff --git a/src/App.tsx b/src/App.tsx index 549ec11..77cb0e4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,12 +1,24 @@ import React from 'react'; import { NewPrez } from './components/NewPrez'; import './assets/css/App.css'; +import { BrowserRouter, Route, Routes } from 'react-router-dom'; +import { SideBar } from './components/SideBar'; +import { Home } from './components/Home'; +import { Presentation } from './components/Presentation'; function App() { return ( -
+
+ + + + + + + + + +
); } diff --git a/src/components/ButtonAddFile.css b/src/assets/css/ButtonAddFile.css similarity index 96% rename from src/components/ButtonAddFile.css rename to src/assets/css/ButtonAddFile.css index ce5ce36..a087f3e 100644 --- a/src/components/ButtonAddFile.css +++ b/src/assets/css/ButtonAddFile.css @@ -15,7 +15,7 @@ text-align: center; width: 40px; height: 40px; - padding-top: 5px; + padding-left: 8px; border:none; background-color: var(--light-grey); border-radius: 10px; diff --git a/src/assets/css/Home.css b/src/assets/css/Home.css new file mode 100644 index 0000000..14d0029 --- /dev/null +++ b/src/assets/css/Home.css @@ -0,0 +1,30 @@ +.home { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + width: 100%; +} + +.buttons > button { + width:300px; + justify-content: center; +} + +.buttons>.go-to-add-button{ + margin-top:1em; + color:var(--white); + border-color: var(--white); +} + +.buttons>.go-to-prez-button{ + color:var(--black-grey); + border-color: var(--black-grey); + background-color: var(--pink); +} + +.buttons>.go-to-prez-button:hover{ + background-color: var(--black-grey); + color: var(--pink); + border-color: var(--pink); +} diff --git a/src/components/NewPrez.css b/src/assets/css/NewPrez.css similarity index 88% rename from src/components/NewPrez.css rename to src/assets/css/NewPrez.css index 9aea490..b0a6c0d 100644 --- a/src/components/NewPrez.css +++ b/src/assets/css/NewPrez.css @@ -1,9 +1,11 @@ .new-prez { display: flex; flex-direction: column; - justify-content: center; + justify-content: space-around; + align-items: center; color: white; - margin:100px; + padding: 3em 1em; + padding-bottom: 0; } .principal-infos { diff --git a/src/assets/css/SideBar.css b/src/assets/css/SideBar.css new file mode 100644 index 0000000..f5fba37 --- /dev/null +++ b/src/assets/css/SideBar.css @@ -0,0 +1,62 @@ +.page { + display:flex; + height: 100vh; + /* max-height:100vh; */ +} +.sidebar { + min-width:250px; + height:100%; + background-color:var(--pink); + display: flex; + flex-direction: column; + align-items: center; + gap:1em; +} + +button{ + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; + width:200px; + padding: 10px 10px; + background: none; + border: solid var(--black-grey) 1px; + border-radius: 10px; +} +button:hover{ + color:var(--white); + background-color: var(--black-grey); +} + +.logo { + cursor: pointer; + display: flex; + align-items: center; + color: var(--black-grey); + font-weight: 900; + font-size: x-large; +} + +.divider { + /* height: 1px; */ + border: solid var(--black-grey) 0.5px; + width:80%; + margin: 1em; +} + +@media screen and (max-width: 992px) { + .page{ + flex-direction: column; + + } + .sidebar { + min-width:250px; + height:auto; + background-color:var(--pink); + display: flex; + flex-direction: row; + align-items: center; + gap:1em; + } +} \ No newline at end of file diff --git a/src/assets/home_design.svg b/src/assets/home_design.svg new file mode 100644 index 0000000..b0fdb35 --- /dev/null +++ b/src/assets/home_design.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/ButtonAddFile.tsx b/src/components/ButtonAddFile.tsx index 3c371d6..ea62225 100644 --- a/src/components/ButtonAddFile.tsx +++ b/src/components/ButtonAddFile.tsx @@ -1,5 +1,5 @@ import { FC, MouseEventHandler } from 'react'; -import './ButtonAddFile.css'; +import '../assets/css/ButtonAddFile.css'; interface ButtonAddFileProps { title: string; action: MouseEventHandler; diff --git a/src/components/Home.tsx b/src/components/Home.tsx new file mode 100644 index 0000000..ac83eb4 --- /dev/null +++ b/src/components/Home.tsx @@ -0,0 +1,16 @@ +import HomeLogo from '../assets/home_design.svg'; +import { NavigationButton } from './NavigationButton'; +import '../assets/css/Home.css'; + +export const Home = () => { + return ( +
+

Bienvenue sur CodePrez

+ +
+ + +
+
+ ); +}; diff --git a/src/components/NavigationButton.tsx b/src/components/NavigationButton.tsx new file mode 100644 index 0000000..5721103 --- /dev/null +++ b/src/components/NavigationButton.tsx @@ -0,0 +1,40 @@ +import React, { FC } from 'react'; +import { useNavigate } from 'react-router-dom'; +interface NavigationButtonProp { + goTo: 'prez' | 'add'; + withIcon?: boolean; +} + +export const NavigationButton: FC = ({ + goTo, + withIcon, +}) => { + const navigate = useNavigate(); + const createCodePrez = () => { + navigate('/add'); + }; + + const launchPresentation = () => { + navigate('/prez'); + }; + if (goTo === 'prez') { + return ( + + ); + } else if (goTo === 'add') { + return ( + + ); + } + return <>; +}; diff --git a/src/components/NewPrez.tsx b/src/components/NewPrez.tsx index 0982c24..1667270 100644 --- a/src/components/NewPrez.tsx +++ b/src/components/NewPrez.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import React from 'react'; -import './NewPrez.css'; +import '../assets/css/NewPrez.css'; import { ButtonAddFile } from './ButtonAddFile'; export const NewPrez = () => { diff --git a/src/components/Presentation.tsx b/src/components/Presentation.tsx new file mode 100644 index 0000000..d4666aa --- /dev/null +++ b/src/components/Presentation.tsx @@ -0,0 +1,9 @@ +//TODO: display slides ! + +export const Presentation = () => { + return ( +
+

Presentation

+
+ ); +}; diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx new file mode 100644 index 0000000..a83b345 --- /dev/null +++ b/src/components/SideBar.tsx @@ -0,0 +1,29 @@ +import { Outlet, useNavigate } from 'react-router-dom'; +import '../assets/css/SideBar.css'; +import CodePrezLogo from '../assets/logo.svg'; +import { NavigationButton } from './NavigationButton'; +export const SideBar = () => { + const navigate = useNavigate(); + + const home = () => { + navigate('/'); + }; + return ( +
+
+ +
+ +

CodePrez

+
+ + +
+
+ +
+ ); +}; diff --git a/yarn.lock b/yarn.lock index aa2c332..f9271d5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1594,6 +1594,11 @@ schema-utils "^3.0.0" source-map "^0.7.3" +"@remix-run/router@1.5.0": + version "1.5.0" + resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.5.0.tgz#57618e57942a5f0131374a9fdb0167e25a117fdc" + integrity sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg== + "@rollup/plugin-babel@^5.2.0": version "5.3.1" resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283" @@ -7920,6 +7925,21 @@ react-refresh@^0.11.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A== +react-router-dom@^6.10.0: + version "6.10.0" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.10.0.tgz#090ddc5c84dc41b583ce08468c4007c84245f61f" + integrity sha512-E5dfxRPuXKJqzwSe/qGcqdwa18QiWC6f3H3cWXM24qj4N0/beCIf/CWTipop2xm7mR0RCS99NnaqPNjHtrAzCg== + dependencies: + "@remix-run/router" "1.5.0" + react-router "6.10.0" + +react-router@6.10.0: + version "6.10.0" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.10.0.tgz#230f824fde9dd0270781b5cb497912de32c0a971" + integrity sha512-Nrg0BWpQqrC3ZFFkyewrflCud9dio9ME3ojHCF/WLsprJVzkq3q3UeEhMCAW1dobjeGbWgjNn/PVF6m46ANxXQ== + dependencies: + "@remix-run/router" "1.5.0" + react-scripts@5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003"