Merge branch 'develop' into feature/router

WildCodeSchool · Feb 4, 2025 · 57b6f76 · 57b6f76
2 parents fc9b118 + b24fbf9
commit 57b6f76
Show file tree

Hide file tree

Showing 29 changed files with 442 additions and 17 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
-    "prettier": "^3.0.3",
+    "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.5.5",
     "react-router-dom": "^7.1.5",
     "sass": "^1.83.4",

diff --git a/public/pictures/arrow-left.png b/public/pictures/arrow-left.png
diff --git a/public/pictures/arrow-right.png b/public/pictures/arrow-right.png
diff --git a/public/pictures/background-amended.jpg b/public/pictures/background-amended.jpg
diff --git a/public/background-image.webp → public/pictures/background.png b/public/background-image.webp → public/pictures/background.png
diff --git a/public/comics.png → public/pictures/comics.png b/public/comics.png → public/pictures/comics.png
diff --git a/public/heart.png → public/pictures/heart.png b/public/heart.png → public/pictures/heart.png
diff --git a/public/home.png → public/pictures/home.png b/public/home.png → public/pictures/home.png
diff --git a/public/marvel-logo.png → public/pictures/marvel-logo.png b/public/marvel-logo.png → public/pictures/marvel-logo.png
diff --git a/public/search.png → public/pictures/search.png b/public/search.png → public/pictures/search.png
diff --git a/public/pictures/thanos.png b/public/pictures/thanos.png
diff --git a/public/thanos.png b/public/thanos.png
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/app.jsx b/src/app.jsx
@@ -5,10 +5,14 @@ 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';
 
 function App() {
   return (
+
     <Routes>
       <Route element={<NavBar />}>
         <Route element={<Footer />}>
@@ -18,6 +22,8 @@ function App() {
         </Route>
       </Route>
     </Routes>
+
+
   );
 }
 

diff --git a/src/components/burger.jsx b/src/components/burger.jsx
@@ -0,0 +1,33 @@
+import { useState } from 'react';
+
+import '../style/burger.scss';
+
+const Burger = () => {
+  const [burger, setBurger] = useState(false);
+
+  const toggleBurger = () => {
+    setBurger(!burger); // Utilisation de "burger" et non "Burger"
+  };
+
+  return (
+    <>
+      <div className='contenair'>
+        <div className='input'></div>
+        <div className='burger' onClick={toggleBurger}>
+          <div className={`line ${burger ? 'active' : ''}`}></div>
+          <div className={`line ${burger ? 'active' : ''}`}></div>
+          <div className={`line ${burger ? 'active' : ''}`}></div>
+          {burger && (
+            <ul className={burger ? 'active' : ''}>
+              <li>Favorite</li>
+              <li>comics</li>
+              <li>Characters</li>
+            </ul>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Burger;
diff --git a/src/components/card.jsx b/src/components/card.jsx
@@ -0,0 +1,123 @@
+import '../style/card.scss';
+
+function Card() {
+  return (
+    <>
+      <body>
+        <div className='flexBox'>
+          <div className='card'>
+            <img className='thanos' src='/pictures/thanos.png' alt='' />
+
+            <div>
+              <div className='rectangle'></div>
+              <h1>Thanos</h1>
+            </div>
+          </div>
+          <div className='card'>
+            <img className='thanos' src='/pictures/thanos.png' alt='' />
+
+            <div>
+              <div className='rectangle'></div>
+              <h1>Thanos</h1>
+            </div>
+            <div></div>
+          </div>
+          <div className='card'>
+            <img className='thanos' src='/pictures/thanos.png' alt='' />
+
+            <div>
+              <div className='rectangle'></div>
+              <h1>Thanos</h1>
+            </div>
+            <div></div>
+          </div>
+          <div className='card'>
+            <img className='thanos' src='/pictures/thanos.png' alt='' />
+
+            <div>
+              <div className='rectangle'></div>
+              <h1>Thanos</h1>
+            </div>
+            <div></div>
+          </div>
+          <div className='card'>
+            <img className='thanos' src='/pictures/thanos.png' alt='' />
+
+            <div>
+              <div className='rectangle'></div>
+              <h1>Thanos</h1>
+            </div>
+            <div></div>
+          </div>
+          <div className='card'>
+            <img className='thanos' src='/pictures/thanos.png' alt='' />
+
+            <div>
+              <div className='rectangle'></div>
+              <h1>Thanos</h1>
+            </div>
+          </div>
+          <div className='card'>
+            <img className='thanos' src='/pictures/thanos.png' alt='' />
+
+            <div>
+              <div className='rectangle'></div>
+              <h1>Thanos</h1>
+            </div>
+            <div></div>
+          </div>
+          <div className='card'>
+            <img className='thanos' src='/pictures/thanos.png' alt='' />
+
+            <div>
+              <div className='rectangle'></div>
+              <h1>Thanos</h1>
+            </div>
+            <div></div>
+          </div>
+          <div className='card'>
+            <img className='thanos' src='/pictures/thanos.png' alt='' />
+
+            <div>
+              <div className='rectangle'></div>
+              <h1>Thanos</h1>
+            </div>
+            <div></div>
+          </div>
+          <div className='card'>
+            <img className='thanos' src='/pictures/thanos.png' alt='' />
+
+            <div>
+              <div className='rectangle'></div>
+              <h1>Thanos</h1>
+            </div>
+            <div></div>
+          </div>
+          <div className='card'>
+            <img className='thanos' src='/pictures/thanos.png' alt='' />
+
+            <div>
+              <div className='rectangle'></div>
+              <h1>Thanos</h1>
+            </div>
+            <div></div>
+          </div>
+          <div className='card'>
+            <img className='thanos' src='/pictures/thanos.png' alt='' />
+
+            <div>
+              <div className='rectangle'></div>
+              <h1>Thanos</h1>
+            </div>
+            <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>
+    </>
+  );
+}
+export default Card;
diff --git a/src/components/footer.jsx b/src/components/footer.jsx
@@ -5,6 +5,7 @@ import Socials from './socials.jsx';
 
 function Footer() {
   return (
+
     <>
       <Outlet />
 

diff --git a/src/components/modal.jsx b/src/components/modal.jsx
@@ -9,13 +9,13 @@ const Modal = ({ open, onClose }) => {
 
       <div className='modal'>
         <div>
-          <img className='thanos' src='/thanos.png' alt='marvel' />
+          <img className='thanos' src='/pictures/thanos.png' alt='marvel' />
           <h1>Thanos</h1>
         </div>
         <div className='comics-content'>
-          <img src='/comics.png' alt='comic presentation' />
-          <img src='/comics.png' alt='comic presentation' />
-          <img src='/comics.png' alt='comic presentation' />
+          <img src='/pictures/comics.png' alt='comic presentation' />
+          <img src='/pictures/comics.png' alt='comic presentation' />
+          <img src='/pictures/comics.png' alt='comic presentation' />
         </div>
         <button type='button' onClick={onClose}>
           X

diff --git a/src/components/navbar.jsx b/src/components/navbar.jsx
@@ -7,6 +7,7 @@ function Navbar() {
   const [input, setInput] = useState('');
 
   return (
+
     <>
       <header>
         <nav>
@@ -37,6 +38,8 @@ function Navbar() {
         <Outlet />
 
     </>
+
+
   );
 }
 

diff --git a/src/pages/home-page.jsx b/src/pages/home-page.jsx
@@ -0,0 +1,38 @@
+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 (
+    <div className='body'>
+      <header>
+        <Navbar />
+
+        <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>
+      </header>
+      <main className='main'>
+        <Card />
+      </main>
+      <footer className='footer'>
+        <Footer />
+      </footer>
+    </div>
+  );
+}
+export default HomePage;
diff --git a/src/style/burger.scss b/src/style/burger.scss
@@ -0,0 +1,53 @@
+@media (max-width: 500px) {
+  .burger {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    width: 60px;
+    height: 60px;
+    border: none;
+    cursor: pointer;
+    padding: 10px;
+    position: relative;
+    z-index: 100;
+
+    .line {
+      width: 100%;
+      height: 5px;
+      background-color: white;
+      border-radius: 5px;
+      margin: 5px 0;
+    }
+
+    ul {
+      position: absolute;
+      top: 36px;
+      left: 0;
+      background-color: white;
+      list-style-type: none;
+      padding: 10px;
+      margin: 0;
+      width: 150px;
+      border-radius: 5px;
+      opacity: 0;
+      visibility: hidden;
+      z-index: 50;
+    }
+
+    ul.active {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    li {
+      color: black;
+      padding: 8px 0;
+      text-align: center;
+      cursor: pointer;
+    }
+
+    li:hover {
+      background-color: #555;
+    }
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,6 +5,7 @@ import Socials from './socials.jsx'; @@
     function Footer() {
       return (
         <>
           <Outlet />
@@ Expand Down @@