From ebf462064006a26fa84f1a4039c048e3de59ef3d Mon Sep 17 00:00:00 2001 From: = Date: Thu, 5 Dec 2024 21:19:41 +0100 Subject: [PATCH 01/21] New button component --- front/src/components/Button.tsx | 12 ++++++++++++ front/src/index.css | 29 +++++++++++++++++++++++++++++ 2 files changed, 41 insertions(+) create mode 100644 front/src/components/Button.tsx diff --git a/front/src/components/Button.tsx b/front/src/components/Button.tsx new file mode 100644 index 0000000..fa3fc54 --- /dev/null +++ b/front/src/components/Button.tsx @@ -0,0 +1,12 @@ +import { ReactNode, MouseEventHandler } from 'react'; + +interface ButtonProps { + onClick: MouseEventHandler; + children: ReactNode; +} + +export default function Button({ onClick, children }: ButtonProps) { + return ( + + ) +} diff --git a/front/src/index.css b/front/src/index.css index 6119ad9..5c7c0a1 100644 --- a/front/src/index.css +++ b/front/src/index.css @@ -66,3 +66,32 @@ button:focus-visible { background-color: #f9f9f9; } } + + +/* Button Component */ +.ni-button { + background-color: rgba(51, 51, 51, 0.05); + border-radius: 8px; + border-width: 0; + color: #333333; + cursor: pointer; + display: inline-block; + font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + font-weight: 500; + line-height: 20px; + list-style: none; + margin: 0; + padding: 10px 12px; + text-align: center; + transition: all 200ms; + vertical-align: baseline; + white-space: nowrap; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; +} + +.ni-button:hover { + background-color: rgba(51, 51, 51, 0.1); +} \ No newline at end of file -- 2.47.2 From 265157bbe136612b6fc9d8941c7a6ad50b9414fc Mon Sep 17 00:00:00 2001 From: ChenNux Date: Thu, 5 Dec 2024 21:34:24 +0100 Subject: [PATCH 02/21] =?UTF-8?q?=09nouveau=20fichier=C2=A0:=20front/src/c?= =?UTF-8?q?omponents/ClickableLink.tsx=20=09nouveau=20fichier=C2=A0:=20fro?= =?UTF-8?q?nt/src/components/LogoButton.tsx=20=09nouveau=20fichier=C2=A0:?= =?UTF-8?q?=20front/src/components/NavBar.tsx=20=09modifi=C3=A9=C2=A0:=20?= =?UTF-8?q?=20=20=20=20=20=20=20=20front/src/main.tsx=20=09modifi=C3=A9?= =?UTF-8?q?=C2=A0:=20=20=20=20=20=20=20=20=20front/src/pages/MainPage.tsx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/components/ClickableLink.tsx | 5 +++++ front/src/components/LogoButton.tsx | 11 +++++++++++ front/src/components/NavBar.tsx | 7 +++++++ front/src/main.tsx | 5 +++-- front/src/pages/MainPage.tsx | 5 ++--- 5 files changed, 28 insertions(+), 5 deletions(-) create mode 100644 front/src/components/ClickableLink.tsx create mode 100644 front/src/components/LogoButton.tsx create mode 100644 front/src/components/NavBar.tsx diff --git a/front/src/components/ClickableLink.tsx b/front/src/components/ClickableLink.tsx new file mode 100644 index 0000000..9334e71 --- /dev/null +++ b/front/src/components/ClickableLink.tsx @@ -0,0 +1,5 @@ +export default function ClickableLink(){ +
+ prout +
+} \ No newline at end of file diff --git a/front/src/components/LogoButton.tsx b/front/src/components/LogoButton.tsx new file mode 100644 index 0000000..b4da75b --- /dev/null +++ b/front/src/components/LogoButton.tsx @@ -0,0 +1,11 @@ +function Logo({logo}){ + return ( + + ) + } + +export default function LogoButton ({url, logo}) { + return ( + + ) +} \ No newline at end of file diff --git a/front/src/components/NavBar.tsx b/front/src/components/NavBar.tsx new file mode 100644 index 0000000..2980646 --- /dev/null +++ b/front/src/components/NavBar.tsx @@ -0,0 +1,7 @@ +import LogoButton from '../components/LogoButton.tsx' + +export default function NavBar(){ + return (
+ +
); +} \ No newline at end of file diff --git a/front/src/main.tsx b/front/src/main.tsx index bef5202..ed573f9 100644 --- a/front/src/main.tsx +++ b/front/src/main.tsx @@ -1,10 +1,11 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import './index.css' -import App from './App.tsx' +// import App from './App.tsx' +import MainPage from './pages/MainPage' createRoot(document.getElementById('root')!).render( - + , ) diff --git a/front/src/pages/MainPage.tsx b/front/src/pages/MainPage.tsx index 248feb2..2a76825 100644 --- a/front/src/pages/MainPage.tsx +++ b/front/src/pages/MainPage.tsx @@ -1,10 +1,9 @@ - - +import NavBar from '../components/NavBar.tsx' export default function MainPage() { return (
-

Main Page

+
) } \ No newline at end of file -- 2.47.2 From 3cdab2e3032be5a52cabd3e8ba73b6b823958f15 Mon Sep 17 00:00:00 2001 From: ChenNux Date: Thu, 5 Dec 2024 21:47:03 +0100 Subject: [PATCH 03/21] =?UTF-8?q?=09modifi=C3=A9=C2=A0:=20=20=20=20=20=20?= =?UTF-8?q?=20=20=20front/src/components/ClickableLink.tsx=20=09modifi?= =?UTF-8?q?=C3=A9=C2=A0:=20=20=20=20=20=20=20=20=20front/src/components/Na?= =?UTF-8?q?vBar.tsx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit C'est très moche (j'aimerais avoir le bouton lien pas une ligne en dessous le logo lien); --- front/src/components/ClickableLink.tsx | 14 ++++++++++---- front/src/components/NavBar.tsx | 9 ++++++--- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/front/src/components/ClickableLink.tsx b/front/src/components/ClickableLink.tsx index 9334e71..9a9bbdb 100644 --- a/front/src/components/ClickableLink.tsx +++ b/front/src/components/ClickableLink.tsx @@ -1,5 +1,11 @@ -export default function ClickableLink(){ -
- prout -
+function Link ({text}){ + return( + + ) +} + +export default function ClickableLink({url, text}) { + return (
+ +
) } \ No newline at end of file diff --git a/front/src/components/NavBar.tsx b/front/src/components/NavBar.tsx index 2980646..84499b8 100644 --- a/front/src/components/NavBar.tsx +++ b/front/src/components/NavBar.tsx @@ -1,7 +1,10 @@ import LogoButton from '../components/LogoButton.tsx' +import ClickableLink from './ClickableLink.tsx'; export default function NavBar(){ - return (
- -
); + return ( + <> + + + ); } \ No newline at end of file -- 2.47.2 From 5c4ac78dee601d89213f2cfd63e4428a50af30ad Mon Sep 17 00:00:00 2001 From: = Date: Thu, 5 Dec 2024 22:25:56 +0100 Subject: [PATCH 04/21] add style inline for the button component and theme colors --- front/src/components/Button.tsx | 24 +++++++++++++++++++++++- front/src/index.css | 7 +++++++ front/src/main.tsx | 2 +- 3 files changed, 31 insertions(+), 2 deletions(-) create mode 100644 front/src/index.css diff --git a/front/src/components/Button.tsx b/front/src/components/Button.tsx index fa3fc54..05c98b8 100644 --- a/front/src/components/Button.tsx +++ b/front/src/components/Button.tsx @@ -7,6 +7,28 @@ interface ButtonProps { export default function Button({ onClick, children }: ButtonProps) { return ( - + ) } + diff --git a/front/src/index.css b/front/src/index.css new file mode 100644 index 0000000..790438d --- /dev/null +++ b/front/src/index.css @@ -0,0 +1,7 @@ +/* Define theme colors */ +:root { + --color-verydarkblue: #00204a; + --color-darkblue: #005792; + --color-lightblue: #00bbf0; + --color-yellow: #fdb44b; +} \ No newline at end of file diff --git a/front/src/main.tsx b/front/src/main.tsx index ce00332..f2884e0 100644 --- a/front/src/main.tsx +++ b/front/src/main.tsx @@ -2,7 +2,7 @@ import { BrowserRouter, Route, Routes } from "react-router"; import { createRoot } from 'react-dom/client' import MainPage from "./pages/MainPage.tsx"; import GamePage from "./pages/GamePage.tsx"; - +import './index.css' createRoot(document.getElementById('root')!).render( -- 2.47.2 From 36dae30b4eded2b102f868b0fad1087dfb9dafd1 Mon Sep 17 00:00:00 2001 From: = Date: Thu, 5 Dec 2024 22:59:11 +0100 Subject: [PATCH 05/21] Add first version of article section --- front/src/components/ArticleCard.tsx | 26 ++++++++++++++++++++++++ front/src/components/ArticlesSection.tsx | 22 ++++++++++++++++++++ front/src/pages/MainPage.tsx | 2 ++ front/src/types.ts | 7 +++++++ 4 files changed, 57 insertions(+) create mode 100644 front/src/components/ArticleCard.tsx create mode 100644 front/src/components/ArticlesSection.tsx create mode 100644 front/src/types.ts diff --git a/front/src/components/ArticleCard.tsx b/front/src/components/ArticleCard.tsx new file mode 100644 index 0000000..96000e4 --- /dev/null +++ b/front/src/components/ArticleCard.tsx @@ -0,0 +1,26 @@ +import { Article } from '../types' + +export default function ArticleCard({ article }: { article: Article }) { + + return ( +
+

{article.title}

+

{article.content}

+
+ ) +} \ No newline at end of file diff --git a/front/src/components/ArticlesSection.tsx b/front/src/components/ArticlesSection.tsx new file mode 100644 index 0000000..5db142b --- /dev/null +++ b/front/src/components/ArticlesSection.tsx @@ -0,0 +1,22 @@ +import { useEffect, useState } from "react"; +import ArticleCard from "./ArticleCard"; +import { Article } from "../types"; + +export default function ArticlesSection() { + + const [articles, setArticles] = useState([]); + + useEffect(() => { + fetch('/api/article') + .then(response => response.json()) + .then((data: Article[]) => setArticles(data)); + }, []); + + return ( +
+ {articles.map(article => ( + + ))} +
+ ) +} \ No newline at end of file diff --git a/front/src/pages/MainPage.tsx b/front/src/pages/MainPage.tsx index 2a76825..860455e 100644 --- a/front/src/pages/MainPage.tsx +++ b/front/src/pages/MainPage.tsx @@ -1,9 +1,11 @@ +import ArticlesSection from '../components/ArticlesSection.tsx' import NavBar from '../components/NavBar.tsx' export default function MainPage() { return (
+
) } \ No newline at end of file diff --git a/front/src/types.ts b/front/src/types.ts new file mode 100644 index 0000000..2274b65 --- /dev/null +++ b/front/src/types.ts @@ -0,0 +1,7 @@ +interface Article { + id: number; + title: string; + content: string; +} + +export type { Article }; \ No newline at end of file -- 2.47.2 From 2317a3683ec9805db50e80beca86407dc8bca61a Mon Sep 17 00:00:00 2001 From: ChenNux Date: Thu, 5 Dec 2024 23:25:37 +0100 Subject: [PATCH 06/21] =?UTF-8?q?=09modifi=C3=A9=C2=A0:=20=20=20=20=20=20?= =?UTF-8?q?=20=20=20front/src/components/ClickableLink.tsx=20=09modifi?= =?UTF-8?q?=C3=A9=C2=A0:=20=20=20=20=20=20=20=20=20front/src/components/Lo?= =?UTF-8?q?goButton.tsx=20=09modifi=C3=A9=C2=A0:=20=20=20=20=20=20=20=20?= =?UTF-8?q?=20front/src/components/NavBar.tsx=20=09front/src/components/Ro?= =?UTF-8?q?undButton.tsx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/components/ClickableLink.tsx | 28 +++++++++++++++++++------- front/src/components/LogoButton.tsx | 8 +------- front/src/components/NavBar.tsx | 15 ++++++++++---- 3 files changed, 33 insertions(+), 18 deletions(-) diff --git a/front/src/components/ClickableLink.tsx b/front/src/components/ClickableLink.tsx index 9a9bbdb..ee88b3b 100644 --- a/front/src/components/ClickableLink.tsx +++ b/front/src/components/ClickableLink.tsx @@ -1,11 +1,25 @@ -function Link ({text}){ - return( - - ) -} - export default function ClickableLink({url, text}) { return (
- +
) } \ No newline at end of file diff --git a/front/src/components/LogoButton.tsx b/front/src/components/LogoButton.tsx index b4da75b..5fcf29c 100644 --- a/front/src/components/LogoButton.tsx +++ b/front/src/components/LogoButton.tsx @@ -1,11 +1,5 @@ -function Logo({logo}){ - return ( - - ) - } - export default function LogoButton ({url, logo}) { return ( - + ) } \ No newline at end of file diff --git a/front/src/components/NavBar.tsx b/front/src/components/NavBar.tsx index 84499b8..7f8ab2f 100644 --- a/front/src/components/NavBar.tsx +++ b/front/src/components/NavBar.tsx @@ -1,10 +1,17 @@ import LogoButton from '../components/LogoButton.tsx' import ClickableLink from './ClickableLink.tsx'; +import RoundButton from './RoundButton.tsx'; export default function NavBar(){ return ( - <> - - - ); + ); } \ No newline at end of file -- 2.47.2 From b3d966e0aee60b62ef54bfc4090d2e1b5a03c2bf Mon Sep 17 00:00:00 2001 From: ChenNux Date: Thu, 5 Dec 2024 23:28:56 +0100 Subject: [PATCH 07/21] =?UTF-8?q?=09nouveau=20fichier=C2=A0:=20front/src/c?= =?UTF-8?q?omponents/RoundButton.tsx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/components/RoundButton.tsx | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 front/src/components/RoundButton.tsx diff --git a/front/src/components/RoundButton.tsx b/front/src/components/RoundButton.tsx new file mode 100644 index 0000000..8c2e092 --- /dev/null +++ b/front/src/components/RoundButton.tsx @@ -0,0 +1,26 @@ +export default function RoundButton({url, bgcolor, text}) { + return (
+ +
) +} \ No newline at end of file -- 2.47.2 From a239d17697afba88b22c0316faad0a9c31553a1a Mon Sep 17 00:00:00 2001 From: ChenNux Date: Thu, 5 Dec 2024 23:42:38 +0100 Subject: [PATCH 08/21] =?UTF-8?q?=09modifi=C3=A9=C2=A0:=20=20=20=20=20=20?= =?UTF-8?q?=20=20=20front/src/components/ClickableLink.tsx=20=09modifi?= =?UTF-8?q?=C3=A9=C2=A0:=20=20=20=20=20=20=20=20=20front/src/components/Lo?= =?UTF-8?q?goButton.tsx=20=09modifi=C3=A9=C2=A0:=20=20=20=20=20=20=20=20?= =?UTF-8?q?=20front/src/components/RoundButton.tsx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Insertion des types pour les composants. --- front/src/components/ClickableLink.tsx | 7 ++++++- front/src/components/LogoButton.tsx | 7 ++++++- front/src/components/RoundButton.tsx | 8 +++++++- 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/front/src/components/ClickableLink.tsx b/front/src/components/ClickableLink.tsx index ee88b3b..7cf03eb 100644 --- a/front/src/components/ClickableLink.tsx +++ b/front/src/components/ClickableLink.tsx @@ -1,4 +1,9 @@ -export default function ClickableLink({url, text}) { +interface ClickableLinkProps { + url:string; + text:string; +} + +export default function ClickableLink({url, text}: ClickableLinkProps) { return (
-