[ADD] caruosel in favourites

src/pages/favorites/Favourites.jsx

@@ -1,5 +1,56 @@
+import { useEffect, useState } from "react";
+import useFavoriteStorage from "../../hooks/useFavoriteStorage";
+import { getDataPage } from "../../services/axiosService";
+import { Carousel } from "react-bootstrap";
+
 const Favourites = () => {
-  return <h1>Favourites Characters</h1>;
+  const [items, toggleItem] = useFavoriteStorage("R&M-Characters");
+
+  const [characters, setCharacters] = useState(null);
+
+  useEffect(() => {
+    getDataPage()
+      .then((data) => {
+        setCharacters((prevData) => {
+          if (!prevData) return data.results;
+          else return [...prevData, ...data.results];
+        });
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  }, []);
+
+  return (
+    <>
+      <h1>Favourites Characters</h1>
+      <Carousel data-bs-theme="dark">
+        <Carousel.Item>
+          <img src="/src/assets/Rick_and_Morty_Error_404.jpg" alt="First slide" />
+          <Carousel.Caption>
+            <h3>First slide label</h3>
+            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+          </Carousel.Caption>
+        </Carousel.Item>
+        <Carousel.Item>
+          <img src="/src/assets/Rick_and_Morty.png" alt="Second slide" />
+          <Carousel.Caption>
+            <h3>Second slide label</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+          </Carousel.Caption>
+        </Carousel.Item>
+        <Carousel.Item>
+          <img src="/src/assets/Rick_and_Morty_Home.jpg" alt="Third slide" />
+          <Carousel.Caption>
+            <h3>Third slide label</h3>
+            <p>
+              Praesent commodo cursus magna, vel scelerisque nisl consectetur.
+            </p>
+          </Carousel.Caption>
+        </Carousel.Item>
+      </Carousel>
+    </>
+  );
 };
 
 export default Favourites;

src/pages/home/Home.jsx

@@ -11,37 +11,37 @@ const Home = () => {
   return (
     <Container>
       <Row className="align-items-start my-3">
-        <Col xs={12} md={6}>
+        <Col xs={12} md={4}>
           <Card>
             <Card.Img src={portadeImg} alt="rick and morty portade" />
             <Card.Header>
               <Nav variant="tabs" defaultActiveKey="#genre">
                 <Nav.Item>
                   <Nav.Link href="#genre" onClick={() => setCardInfo(0)}>
-                    Description
+                    General
                   </Nav.Link>
                 </Nav.Item>
                 <Nav.Item>
                   <Nav.Link href="#moreinfo" onClick={() => setCardInfo(1)}>
-                    More info
+                    More
                   </Nav.Link>
                 </Nav.Item>
               </Nav>
             </Card.Header>
             {cardInfo == 0 && (
               <Card.Body>
                 <Card.Text>
-                  Rick and Morty is an American adult animated science fiction
-                  sitcom created by Justin Roiland and Dan Harmon for Cartoon
-                  Network{"'"}s nighttime programming block Adult Swim. The
-                  series follows the misadventures of Rick Sanchez, a cynical
-                  mad scientist, and his good-hearted but fretful grandson Morty
-                  Smith, who split their time between domestic life and
-                  interdimensional adventures that take place across an infinite
-                  number of realities, often traveling to other planets and
-                  dimensions through portals and on Rick{"'"}s flying saucer.
-                  The general concept of Rick and Morty relies on two
-                  conflicting scenarios: domestic family drama, and a
+                  <strong>Rick and Morty</strong> is an American adult animated
+                  science fiction sitcom created by Justin Roiland and Dan
+                  Harmon for Cartoon Network{"'"}s nighttime programming block
+                  Adult Swim. The series follows the misadventures of Rick
+                  Sanchez, a cynical mad scientist, and his good-hearted but
+                  fretful grandson Morty Smith, who split their time between
+                  domestic life and interdimensional adventures that take place
+                  across an infinite number of realities, often traveling to
+                  other planets and dimensions through portals and on Rick{"'"}s
+                  flying saucer. The general concept of Rick and Morty relies on
+                  two conflicting scenarios: domestic family drama, and a
                   misanthropic grandfather dragging his grandson into hijinks.
                 </Card.Text>
               </Card.Body>
@@ -87,7 +87,7 @@ const Home = () => {
             )}
           </Card>
         </Col>
-        <Col xs={12} md={6}>
+        <Col xs={12} md={8}>
           <Card className="align-items-center">
             <img
               src={titleImg}

src/services/axiosService.js

@@ -11,7 +11,7 @@ export function getData(id) {
   });
 }
 
-export function getDataPage(filters, page) {
+export function getDataPage(filters = {}, page = 1) {
   let newFilters = { ...filters, character_page: page };
   const query = getQueryParams(newFilters, "character_");
   const apiURL = `/character/${query}`;