15 music carousel

my-app/package.json

@@ -14,6 +14,8 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-scripts": "5.0.1",
+    "react-slick": "^0.30.3",
+    "slick-carousel": "^1.8.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

my-app/src/App.css

@@ -36,3 +36,8 @@
     transform: rotate(360deg);
   }
 }
+.content-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center; 
+}

my-app/src/App.jsx

@@ -1,16 +1,26 @@
 //import logo from './logo.svg'
 import SignUp from './components/sign up.jsx'
-import LogIn from './components/login.jsx'
-import SongCard from './components/song card.jsx'
-import Carousel from './components/song carousel.jsx'
+import LogIn from './components/Login.jsx'
+import SongCard from './components/Song Card.jsx'
+import Carousel from './components/Carousel.jsx'
 import ArtistInfo from './components/artist info.jsx'
 import ArtistPage from './components/artist page.jsx'
 import SongsComponent from './components/artist page - songs.jsx'
+import NavBar from './components/NavBar.jsx'
+import TopNavBar from './components/TopNavBar.jsx'
 import './App.css'
 
 function App() {
   return (
-    <ArtistPage />
+    <div className="app-container">
+      <NavBar />
+      <div className="main-content">
+        <TopNavBar />
+        <div className="content-area">
+        <ArtistPage/>
+        </div>
+      </div>
+    </div>
   )
 }
 

my-app/src/components/Carousel.jsx

@@ -0,0 +1,67 @@
+import React from "react";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import './components.css';
+
+const musicData = [
+  { id: 1, title: "Song 1", artist: "Artist 1", image: "/images/song1.jpg" },
+  { id: 2, title: "Song 2", artist: "Artist 2", image: "/images/song2.jpg" },
+  { id: 3, title: "Song 3", artist: "Artist 3", image: "/images/song3.jpg" },
+  { id: 4, title: "Song 4", artist: "Artist 4", image: "/images/song4.jpg" },
+  { id: 5, title: "Song 5", artist: "Artist 5", image: "/images/song5.jpg" },
+  { id: 1, title: "Song 6", artist: "Artist 1", image: "/images/song1.jpg" },
+  { id: 2, title: "Song 7", artist: "Artist 2", image: "/images/song2.jpg" },
+  { id: 3, title: "Song 8", artist: "Artist 3", image: "/images/song3.jpg" },
+  { id: 4, title: "Song 9", artist: "Artist 4", image: "/images/song4.jpg" },
+  { id: 5, title: "Song 10", artist: "Artist 5", image: "/images/song5.jpg" },
+];
+
+const MusicCarousel = () => {
+  const settings = {
+    lazyLoad: "ondemand",
+    arrows: false,
+    dots: false,
+    infinite: true,
+    speed: 300,
+    slidesToShow: 5,
+    slidesToScroll: 1,
+    centerMode: true,
+    centerPadding: "-2%",
+    autoplay: true,
+    autoplaySpeed: 5000,
+    responsive: [
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: 3,
+        },
+      },
+      {
+        breakpoint: 600,
+        settings: {
+          slidesToShow: 2,
+        },
+      },
+    ],
+  };
+
+  return (
+    <div className="music-carousel">
+      <h2 className="carousel-title">Explore New Music</h2>
+      <Slider {...settings}>
+        {musicData.map((song, index) => (
+          <div key={song.id} className={`carousel-item ${index === 2 ? "active" : ""}`}>
+            <img src={song.image} alt={song.title} className="carousel-image" />
+            <div className="song-info">
+              <h3>{song.title}</h3>
+              <p>{song.artist}</p>
+            </div>
+          </div>
+        ))}
+      </Slider>
+    </div>
+  );
+};
+
+export default MusicCarousel;

my-app/src/components/NavBar.jsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import './components.css';
+import { RiArrowDropDownLine } from "react-icons/ri";
+
+const NavBar = () => {
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+    const toggleDropdown = () => {
+        setIsDropdownOpen(!isDropdownOpen);
+    };
+
+    return (
+        <div className="navbar">
+            <a href="#">Home</a>
+            <a href="#">Categories</a>
+            <div className="playlist">
+                <span className="playlist-title">Playlists</span>
+                <button className="dropdown-icon" onClick={toggleDropdown}>
+                    <RiArrowDropDownLine size={22} />
+                </button>
+                {isDropdownOpen && (
+                    <div className="playlist-content">
+                        <a href="#">Favorites</a>
+                        <a href="#">Playlist 1</a>
+                        <a href="#">Playlist 2</a>
+                        <a href="#">Playlist 3</a>
+                    </div>
+                )}
+            </div>
+            <a href="#">Artists</a>
+            <a href="#">Albums</a>
+        </div>
+    );
+}
+
+export default NavBar;

my-app/src/components/SearchBar.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import './components.css';
+
+const SearchBar = ({ onSearch }) => {
+  const [query, setQuery] = useState("");
+
+  const handleChange = (event) => {
+    setQuery(event.target.value);
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    if (onSearch) {
+      onSearch(query);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} style={{ display: "flex", gap: "8px" }}>
+      <input
+        type="text"
+        placeholder="Search..."
+        value={query}
+        onChange={handleChange}
+        style={{ padding: "8px", width: "200px", borderRadius: "4px", border: "1px solid #ccc" }}
+      />
+      <button type="submit" style={{ padding: "8px 12px", cursor: "pointer" }}>
+        Search
+      </button>
+    </form>
+  );
+};
+
+export default SearchBar;

my-app/src/components/TopNavBar.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import './components.css';
+import SearchBar from "./SearchBar";
+
+const TopNavBar = () => {
+  return (
+    <div className="top-navbar">
+      <SearchBar onSearch={(query) => console.log("Searching for:", query)} />
+      <div className="app-name">
+      <h1>Music App</h1>
+      </div>
+      <div className="nav-buttons">
+        <button className="nav-button">Profile</button>
+        <button className="nav-button">Settings</button>
+      </div>
+    </div>
+  );
+};
+
+export default TopNavBar;