From 091e55f69ded776af682e567775ba8c583757d97 Mon Sep 17 00:00:00 2001 From: Tristan aka Desperados Date: Tue, 4 Feb 2025 16:36:29 +0100 Subject: [PATCH] ajout router --- src/app.jsx | 15 ++--- src/components/Layout.jsx | 16 +++++ src/components/card.jsx | 40 ++++++----- src/components/favorites.jsx | 89 ++----------------------- src/components/footer.jsx | 8 +-- src/components/home.jsx | 37 +++++++++- src/components/navbar.jsx | 13 ++-- src/main.jsx | 2 +- src/pages/home-page.jsx | 38 ----------- src/pages/profile-page.jsx | 10 --- src/style/card.scss | 10 --- src/style/favorite-responsive.scss | 43 ++++++++++++ src/style/favorites.scss | 34 +++------- src/style/footer.scss | 2 +- src/style/{home-page.scss => home.scss} | 19 +++++- src/style/navbar.scss | 6 +- 16 files changed, 165 insertions(+), 217 deletions(-) create mode 100644 src/components/Layout.jsx delete mode 100644 src/pages/home-page.jsx delete mode 100644 src/pages/profile-page.jsx create mode 100644 src/style/favorite-responsive.scss rename src/style/{home-page.scss => home.scss} (77%) diff --git a/src/app.jsx b/src/app.jsx index 27ad1e6..7d26d3d 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -2,20 +2,17 @@ import { Route, Routes } from 'react-router-dom'; import './app.scss'; import Favorites from './components/favorites'; -import Footer from './components/footer'; import Home from './components/home'; -import NavBar from './components/navbar'; -import ProfilePage from './pages/profile-page'; +import Layout from './components/layout'; +import Profile from './components/profile'; function App() { return ( - }> - }> - } /> - } /> - } /> - + }> + } /> + } /> + } /> ); diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx new file mode 100644 index 0000000..17b0cec --- /dev/null +++ b/src/components/Layout.jsx @@ -0,0 +1,16 @@ +import { Outlet } from 'react-router-dom'; + +import Footer from './footer'; +import NavBar from './navbar'; + +const Layout = () => { + return ( + <> + + + +
+ + ); +}; +export default Layout; diff --git a/src/components/card.jsx b/src/components/card.jsx index e51fc44..c0f949f 100644 --- a/src/components/card.jsx +++ b/src/components/card.jsx @@ -1,11 +1,23 @@ +import { useState } from 'react'; + +import Modal from '../components/modal'; import '../style/card.scss'; function Card() { + const [isOpen, setIsOpen] = useState(false); + const toggleModal = () => { + setIsOpen(!isOpen); + }; + const onClose = () => { + setIsOpen(false); + }; + return ( <> +
-
+
@@ -13,7 +25,7 @@ function Card() {

Thanos

-
+
@@ -22,7 +34,7 @@ function Card() {
-
+
@@ -31,7 +43,7 @@ function Card() {
-
+
@@ -40,7 +52,7 @@ function Card() {
-
+
@@ -49,7 +61,7 @@ function Card() {
-
+
@@ -57,7 +69,7 @@ function Card() {

Thanos

-
+
@@ -66,7 +78,7 @@ function Card() {
-
+
@@ -75,7 +87,7 @@ function Card() {
-
+
@@ -84,7 +96,7 @@ function Card() {
-
+
@@ -93,7 +105,7 @@ function Card() {
-
+
@@ -102,7 +114,7 @@ function Card() {
-
+
@@ -112,10 +124,6 @@ function Card() {
- ); diff --git a/src/components/favorites.jsx b/src/components/favorites.jsx index c03bc89..fa98d57 100644 --- a/src/components/favorites.jsx +++ b/src/components/favorites.jsx @@ -1,93 +1,14 @@ -import { useState } from 'react'; - -import Modal from '../components/modal'; +import '../style/card.scss'; +import '../style/favorite-responsive.scss'; import '../style/favorites.scss'; +import Card from './card'; function Favorites() { - const [isOpen, setIsOpen] = useState(false); - const toggleModal = () => { - setIsOpen(!isOpen); - }; - const onClose = () => { - setIsOpen(false); - }; - return ( -

My Favorite Characters

- -
-
-

Thanos

-

Le plus grand des méchants

-
- -
-

Iron Man

-

ddddddffff

-
- -
-

Spider Man

-

fsdfsffsdfd

-
- -
-

Spider Man

-

fsdfsffsdfd

-
- -
-

Spider Man

-

fsdfsffsdfd

-
- -
-

Spider Man

-

fsdfsffsdfd

-
- -
-

Spider Man

-

fsdfsffsdfd

-
-
-
-
-

Thanos

-

Le plus grand des méchants

-
- -
-

Iron Man

-

ddddddffff

-
- -
-

Spider Man

-

fsdfsffsdfd

-
- -
-

Spider Man

-

fsdfsffsdfd

-
- -
-

Spider Man

-

fsdfsffsdfd

-
- -
-

Spider Man

-

fsdfsffsdfd

-
+

My Favorite Characters

-
-

Spider Man

-

fsdfsffsdfd

-
-
+ ); } diff --git a/src/components/footer.jsx b/src/components/footer.jsx index ba6b175..b460552 100644 --- a/src/components/footer.jsx +++ b/src/components/footer.jsx @@ -1,16 +1,12 @@ -import { Outlet } from 'react-router-dom'; - import '../style/footer.scss'; import Socials from './socials.jsx'; function Footer() { return ( <> - -
); diff --git a/src/components/home.jsx b/src/components/home.jsx index 6270bf7..8b1f04b 100644 --- a/src/components/home.jsx +++ b/src/components/home.jsx @@ -1,5 +1,36 @@ -const Home = () => { - return

Home

; -}; +import { useState } from 'react'; +import Burger from '../components/burger'; +import Card from '../components/card'; +import '../style/home.scss'; + +function Home() { + const [input, setInput] = useState(''); + + return ( + +
+
+ + + setInput(e.target.value)} + /> +
+ +
+ +
+
+ + + ); +} export default Home; diff --git a/src/components/navbar.jsx b/src/components/navbar.jsx index ecdbfcd..7e9a8a4 100644 --- a/src/components/navbar.jsx +++ b/src/components/navbar.jsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { Link, Outlet } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import '../style/navbar.scss'; @@ -9,31 +9,28 @@ function Navbar() { return ( <>
-
- - ); } diff --git a/src/main.jsx b/src/main.jsx index 6c800a1..6b3555d 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -2,7 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import { BrowserRouter } from 'react-router-dom'; -import App from './app.jsx'; +import App from './app'; ReactDOM.createRoot(document.getElementById('root')).render( diff --git a/src/pages/home-page.jsx b/src/pages/home-page.jsx deleted file mode 100644 index 5526b8c..0000000 --- a/src/pages/home-page.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import { useState } from 'react'; - -import Burger from '../components/burger'; -import Card from '../components/card'; -import Footer from '../components/footer'; -import Navbar from '../components/navbar'; -import '../style/home-page.scss'; - -function HomePage() { - const [input, setInput] = useState(''); - - return ( -
-
- - -
- - - setInput(e.target.value)} - /> -
-
-
- -
-
-
-
-
- ); -} -export default HomePage; diff --git a/src/pages/profile-page.jsx b/src/pages/profile-page.jsx deleted file mode 100644 index 11c76a8..0000000 --- a/src/pages/profile-page.jsx +++ /dev/null @@ -1,10 +0,0 @@ -import Profile from '../components/profile'; - -export default function ProfilePage() { - return ( -
- {' '} - -
- ); -} diff --git a/src/style/card.scss b/src/style/card.scss index b44a982..e41fad3 100644 --- a/src/style/card.scss +++ b/src/style/card.scss @@ -52,16 +52,6 @@ max-width: 1300px; } -.arrow { - display: flex; - justify-content: space-between; - position: relative; - margin-top: -324px; - height: 15%; - margin-left: 2%; - margin-right: 4%; -} - @media (max-width: 500px) { .flexBox { display: grid; diff --git a/src/style/favorite-responsive.scss b/src/style/favorite-responsive.scss new file mode 100644 index 0000000..47ed580 --- /dev/null +++ b/src/style/favorite-responsive.scss @@ -0,0 +1,43 @@ +@import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap'); + +@media (max-width: 500px) { + .favorite { + h1 { + background-color: red; + font-family: 'Aclonica', sans-serif; + margin-top: 30px; + width: 240px; + font-size: 15px; + padding: 14px; + border-radius: 10px; + margin-left: 20px; + color: white; + box-shadow: 0px 2px 6px black; + align-items: center; + text-shadow: 3px 2px 8px black; + } + + .cards { + display: flex; + + padding-left: 20px; + list-style: none; + margin-top: 20px; + justify-content: center; + justify-content: space-evenly; + } + + .card { + border-radius: 10px; + width: 170px; + height: 230px; + padding-left: 20px; + background-color: red; + } + + .open-modal { + width: 170px; + height: 230px; + } + } +} diff --git a/src/style/favorites.scss b/src/style/favorites.scss index c786d9c..e95cfdf 100644 --- a/src/style/favorites.scss +++ b/src/style/favorites.scss @@ -1,10 +1,15 @@ @import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap'); .favorite { - h1 { - background-color: red; + background: linear-gradient(#670208, #151414 25% 76%, #670208); + + height: 690px; + padding-top: 60px; + + .Favorite-typo { + background-color: #670208; font-family: 'Aclonica', sans-serif; - margin-top: 30px; + padding-top: 60px; width: 240px; font-size: 15px; padding: 14px; @@ -15,27 +20,4 @@ align-items: center; text-shadow: 3px 2px 8px black; } - - .cards { - display: flex; - - padding-left: 20px; - list-style: none; - margin-top: 20px; - justify-content: center; - justify-content: space-evenly; - } - - .card { - border-radius: 10px; - width: 170px; - height: 230px; - padding-left: 20px; - background-color: red; - } - - .open-modal { - width: 170px; - height: 230px; - } } diff --git a/src/style/footer.scss b/src/style/footer.scss index 21e8db5..9008b5f 100644 --- a/src/style/footer.scss +++ b/src/style/footer.scss @@ -5,7 +5,7 @@ height: 100%; background-color: #670208; - margin-top: 30px; + padding-top: 150px; } .footer > img { diff --git a/src/style/home-page.scss b/src/style/home.scss similarity index 77% rename from src/style/home-page.scss rename to src/style/home.scss index 220e581..ff24d16 100644 --- a/src/style/home-page.scss +++ b/src/style/home.scss @@ -1,5 +1,7 @@ -.body { +.home-page { background: linear-gradient(#670208, #151414 25% 76%, #670208); + + height: 690px; } .burger-home { @@ -9,8 +11,19 @@ padding-top: 60px; } -footer { - margin-top: 450px; +.arrow { + display: flex; + justify-content: space-between; + position: relative; + margin-top: -324px; + height: 15%; + margin-left: 2%; + margin-right: 4%; + + #arrows { + width: 40px; + height: 40px; + } } @media (max-width: 500px) { diff --git a/src/style/navbar.scss b/src/style/navbar.scss index e00bc13..21df673 100644 --- a/src/style/navbar.scss +++ b/src/style/navbar.scss @@ -1,15 +1,17 @@ @import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap'); -nav { +.navbar { display: flex; justify-content: center; + background-color: #670208; + padding-top: 30px; ul { list-style: none; display: flex; align-items: center; padding: 20px; - gap: 190px; + gap: 40px; .myLink { color: white;