Skip to content

Commit

Permalink
ajout router
Browse files Browse the repository at this point in the history
  • Loading branch information
@ticoq971
ticoq971 committed Feb 4, 2025
1 parent a0f2071 commit 091e55f
Show file tree
Hide file tree
Showing 16 changed files with 165 additions and 217 deletions.
15 changes: 6 additions & 9 deletions src/app.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<Routes>
<Route element={<NavBar />}>
<Route element={<Footer />}>
<Route path='/' element={<Home />} />
<Route path='/favorites' element={<Favorites />} />
<Route path='/profilePage' element={<ProfilePage />} />
</Route>
<Route element={<Layout />}>
<Route path='/' element={<Home />} />
<Route path='/favorites' element={<Favorites />} />
<Route path='/profilePage' element={<Profile />} />
</Route>
</Routes>
);
Expand Down
16 changes: 16 additions & 0 deletions src/components/Layout.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { Outlet } from 'react-router-dom';

import Footer from './footer';
import NavBar from './navbar';

const Layout = () => {
return (
<>
<NavBar />

<Outlet />
<Footer />
</>
);
};
export default Layout;
40 changes: 24 additions & 16 deletions src/components/card.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,31 @@
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 (
<>
<body>
<Modal open={isOpen} onClose={onClose} />
<div className='flexBox'>
<div className='card'>
<div className='card' onClick={toggleModal}>
<img className='thanos' src='/pictures/thanos.png' alt='' />

<div>
<div className='rectangle'></div>
<h1>Thanos</h1>
</div>
</div>
<div className='card'>
<div className='card' onClick={toggleModal}>
<img className='thanos' src='/pictures/thanos.png' alt='' />

<div>
Expand All @@ -22,7 +34,7 @@ function Card() {
</div>
<div></div>
</div>
<div className='card'>
<div className='card' onClick={toggleModal}>
<img className='thanos' src='/pictures/thanos.png' alt='' />

<div>
Expand All @@ -31,7 +43,7 @@ function Card() {
</div>
<div></div>
</div>
<div className='card'>
<div className='card' onClick={toggleModal}>
<img className='thanos' src='/pictures/thanos.png' alt='' />

<div>
Expand All @@ -40,7 +52,7 @@ function Card() {
</div>
<div></div>
</div>
<div className='card'>
<div className='card' onClick={toggleModal}>
<img className='thanos' src='/pictures/thanos.png' alt='' />

<div>
Expand All @@ -49,15 +61,15 @@ function Card() {
</div>
<div></div>
</div>
<div className='card'>
<div className='card' onClick={toggleModal}>
<img className='thanos' src='/pictures/thanos.png' alt='' />

<div>
<div className='rectangle'></div>
<h1>Thanos</h1>
</div>
</div>
<div className='card'>
<div className='card' onClick={toggleModal}>
<img className='thanos' src='/pictures/thanos.png' alt='' />

<div>
Expand All @@ -66,7 +78,7 @@ function Card() {
</div>
<div></div>
</div>
<div className='card'>
<div className='card' onClick={toggleModal}>
<img className='thanos' src='/pictures/thanos.png' alt='' />

<div>
Expand All @@ -75,7 +87,7 @@ function Card() {
</div>
<div></div>
</div>
<div className='card'>
<div className='card' onClick={toggleModal}>
<img className='thanos' src='/pictures/thanos.png' alt='' />

<div>
Expand All @@ -84,7 +96,7 @@ function Card() {
</div>
<div></div>
</div>
<div className='card'>
<div className='card' onClick={toggleModal}>
<img className='thanos' src='/pictures/thanos.png' alt='' />

<div>
Expand All @@ -93,7 +105,7 @@ function Card() {
</div>
<div></div>
</div>
<div className='card'>
<div className='card' onClick={toggleModal}>
<img className='thanos' src='/pictures/thanos.png' alt='' />

<div>
Expand All @@ -102,7 +114,7 @@ function Card() {
</div>
<div></div>
</div>
<div className='card'>
<div className='card' onClick={toggleModal}>
<img className='thanos' src='/pictures/thanos.png' alt='' />

<div>
Expand All @@ -112,10 +124,6 @@ function Card() {
<div></div>
</div>
</div>
<nav className='arrow'>
<input type='image' id='image' alt='Login' src='/pictures/arrow-left.png' />
<input type='image' id='image' alt='Login' src='/pictures/arrow-right.png' />
</nav>
</body>
</>
);
Expand Down
89 changes: 5 additions & 84 deletions src/components/favorites.jsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<body className='favorite'>
<h1>My Favorite Characters</h1>
<Modal open={isOpen} onClose={onClose} />
<div className='cards'>
<div className='card' onClick={toggleModal}>
<h2> Thanos</h2>
<p> Le plus grand des méchants</p>
</div>

<div className='card' onClick={toggleModal}>
<h2> Iron Man</h2>
<p> ddddddffff</p>
</div>

<div className='card' onClick={toggleModal}>
<h2> Spider Man</h2>
<p>fsdfsffsdfd</p>
</div>

<div className='card' onClick={toggleModal}>
<h2> Spider Man</h2>
<p>fsdfsffsdfd</p>
</div>

<div className='card' onClick={toggleModal}>
<h2> Spider Man</h2>
<p>fsdfsffsdfd</p>
</div>

<div className='card' onClick={toggleModal}>
<h2> Spider Man</h2>
<p>fsdfsffsdfd</p>
</div>

<div className='card' onClick={toggleModal}>
<h2> Spider Man</h2>
<p>fsdfsffsdfd</p>
</div>
</div>
<div className='cards'>
<div className='card' onClick={toggleModal}>
<h2> Thanos</h2>
<p> Le plus grand des méchants</p>
</div>

<div className='card' onClick={toggleModal}>
<h2> Iron Man</h2>
<p> ddddddffff</p>
</div>

<div className='card' onClick={toggleModal}>
<h2> Spider Man</h2>
<p>fsdfsffsdfd</p>
</div>

<div className='card' onClick={toggleModal}>
<h2> Spider Man</h2>
<p>fsdfsffsdfd</p>
</div>

<div className='card' onClick={toggleModal}>
<h2> Spider Man</h2>
<p>fsdfsffsdfd</p>
</div>

<div className='card' onClick={toggleModal}>
<h2> Spider Man</h2>
<p>fsdfsffsdfd</p>
</div>
<h1 className='Favorite-typo'>My Favorite Characters</h1>

<div className='card' onClick={toggleModal}>
<h2> Spider Man</h2>
<p>fsdfsffsdfd</p>
</div>
</div>
<Card />
</body>
);
}
Expand Down
8 changes: 2 additions & 6 deletions src/components/footer.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,12 @@
import { Outlet } from 'react-router-dom';

import '../style/footer.scss';
import Socials from './socials.jsx';

function Footer() {
return (
<>
<Outlet />

<footer>
<div className='footer'>
<img src='/marvel-logo.png' alt='marvel-logo' />
<img src='\pictures\marvel-logo.png' alt='marvel-logo' />
<div className='footer-nav'>
<div>
<a href='https://marvelofficial.com/shop/?srsltid=AfmBOorVehT8ELdv9CSRuSbn2YBFn_1tngBPVsIlMT4j70lF8KhpRGsb'>
Expand All @@ -31,7 +27,7 @@ function Footer() {
</div>
</div>
<Socials />
</div>{' '}
</div>
</footer>
</>
);
Expand Down
37 changes: 34 additions & 3 deletions src/components/home.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,36 @@
const Home = () => {
return <h1>Home</h1>;
};
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 (
<body className='home-page'>
<div>
<div className='burger-home'>
<Burger />
<img className='glass' src='/pictures/search.png' alt='' />
<input
className='search'
type='text'
placeholder='Search'
value={input}
onChange={(e) => setInput(e.target.value)}
/>
</div>

<main className='main'>
<Card />
</main>
</div>
<nav className='arrow'>
<input type='image' id='arrows' alt='Login' src='/pictures/arrow-left.png' />
<input type='image' id='arrows' alt='Login' src='/pictures/arrow-right.png' />
</nav>
</body>
);
}
export default Home;
13 changes: 5 additions & 8 deletions src/components/navbar.jsx
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -9,31 +9,28 @@ function Navbar() {
return (
<>
<header>
<nav>
<nav className='navbar'>
<ul>
<li>
{' '}
<Link to='/' className='myLink'>
<img src='/home.png' alt='' /> Home
<img src='\pictures\home.png' alt='' /> Home
</Link>
</li>

<li className='input-wrapper'>
<img src='/search.png' alt='' />
<img src='\pictures\search.png' alt='' />
<input type='text' placeholder='Search' value={input} onChange={(e) => setInput(e.target.value)} />
</li>
<li>
<Link to='/favorites' className='myLink'>
{' '}
<img src='/heart.png' alt='' />
<img src='\pictures\heart.png' alt='' />
Favorites
</Link>
</li>
</ul>
</nav>
</header>

<Outlet />
</>
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/main.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
<React.StrictMode>
Expand Down
Loading

0 comments on commit 091e55f

Please sign in to comment.