made my own carousel

dauletalzhanov · Apr 23, 2024 · a0d046a · a0d046a
1 parent b84b600
commit a0d046a
Show file tree

Hide file tree

Showing 5 changed files with 285 additions and 70 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -1,76 +1,76 @@
 @tailwind base;
-  @tailwind components;
-  @tailwind utilities;
+@tailwind components;
+@tailwind utilities;
 
-  @layer base {
-    :root {
-      --background: 0 0% 100%;
-      --foreground: 222.2 84% 4.9%;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
 
-      --card: 0 0% 100%;
-      --card-foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
 
-      --popover: 0 0% 100%;
-      --popover-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
 
-      --primary: 222.2 47.4% 11.2%;
-      --primary-foreground: 210 40% 98%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
 
-      --secondary: 210 40% 96.1%;
-      --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
 
-      --muted: 210 40% 96.1%;
-      --muted-foreground: 215.4 16.3% 46.9%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
 
-      --accent: 210 40% 96.1%;
-      --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
 
-      --destructive: 0 84.2% 60.2%;
-      --destructive-foreground: 210 40% 98%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
 
-      --border: 214.3 31.8% 91.4%;
-      --input: 214.3 31.8% 91.4%;
-      --ring: 222.2 84% 4.9%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
 
-      --radius: 0.5rem;
-    }
+    --radius: 0.5rem;
+  }
 
-    .dark {
-      --background: 222.2 84% 4.9%;
-      --foreground: 210 40% 98%;
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
 
-      --card: 222.2 84% 4.9%;
-      --card-foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
 
-      --popover: 222.2 84% 4.9%;
-      --popover-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
 
-      --primary: 210 40% 98%;
-      --primary-foreground: 222.2 47.4% 11.2%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
 
-      --secondary: 217.2 32.6% 17.5%;
-      --secondary-foreground: 210 40% 98%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
 
-      --muted: 217.2 32.6% 17.5%;
-      --muted-foreground: 215 20.2% 65.1%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
 
-      --accent: 217.2 32.6% 17.5%;
-      --accent-foreground: 210 40% 98%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
 
-      --destructive: 0 62.8% 30.6%;
-      --destructive-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
 
-      --border: 217.2 32.6% 17.5%;
-      --input: 217.2 32.6% 17.5%;
-      --ring: 212.7 26.8% 83.9%;
-    }
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
   }
+}
 
-  @layer base {
-    * {
-      @apply tailwind.config.jsborder-border;
-    }
-    body {
-      @apply tailwind.config.jsbg-background tailwind.config.jstext-foreground;
-    }
-  }
+@layer base {
+  * {
+    @apply tailwind.config.jsborder-border;
+  }
+  body {
+    @apply tailwind.config.jsbg-background tailwind.config.jstext-foreground;
+  }
+}
diff --git a/src/Components/Carousel.jsx b/src/Components/Carousel.jsx
@@ -0,0 +1,44 @@
+import { useState } from "react";
+
+export default function Carousel({ items }) {
+  let [currentSlide, setCurrentSlide] = useState(0);
+
+  function prev() {
+    if (currentSlide > 0)
+		setCurrentSlide((c) => c - 1);
+    else
+		setCurrentSlide(items.length -1)
+  }
+
+  function next() {
+    if (currentSlide < items.length - 1)
+    	setCurrentSlide((c) => c + 1);
+    else
+		setCurrentSlide(0)
+  }
+
+  return (
+    <div className="carousel">
+    	<button className="carousel-button" onClick={prev}> {"<"} </button>
+
+    	<div className="carousel-content">
+			{items.map((value, index) => {
+				return (
+					<div 
+						key={index} 
+						className={"taylor-album " + (index == currentSlide ? 'active' : '')}
+					>
+						<img
+							src={ value.artwork }
+							alt={ "album cover for Taylor Swift's " + value.name }
+							className="carousel-album"
+						/>
+					</div>
+				)
+			})}
+    	</div>
+
+    	<button className="carousel-button" onClick={next}> {">"} </button>
+    </div>
+  );
+}
diff --git a/src/Pages/CSS/landing_page.css b/src/Pages/CSS/landing_page.css
@@ -80,6 +80,43 @@
 	color: goldenrod;
 	margin-top: 3vh;
 }
+/*		_________	Taylors Albums	______		*/
+.taylors-albums {
+	height: 50vh;
+	margin: 0 13vw;
+	padding: 1vh 2vw;
+
+	display: flex;
+	justify-content: center;
+}
+
+.carousel {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.carousel-content {
+	width: 100%;
+}
+
+.taylor-album {
+	display: none;
+}
+
+.taylor-album.active {
+	display: block;
+}
+
+.carousel-button {
+	border: 1px solid lightgray;
+}
+
+.carousel-album {
+	height: 50vh;
+	width: 50vh;
+	object-fit: cover;
+}
 
 /******************************************/
 

diff --git a/src/Pages/Landing.jsx b/src/Pages/Landing.jsx
@@ -1,28 +1,26 @@
+import { useState } from "react"
 import { Helmet } from "react-helmet"
 import Header from "../Components/Header"
 import { Link } from "react-router-dom"
 
+// images
 import notTaylor from "../assets/taylor_cropped.jpg"
 import mic from "../assets/mic.jpg"
+import taylor_albums from "../assets/taylor.json"
 
 import fb from "../assets/fb.svg"
 import twit from "../assets/twitter.svg"
 import ig from "../assets/ig.svg"
 import yt from "../assets/youtube.svg"
 
-import { Button } from "@/Components/ui/button"
-import { Card, CardContent } from "@/Components/ui/card"
-import {
-	Carousel,
-	CarouselContent,
-	CarouselItem,
-	CarouselNext,
-	CarouselPrevious,
-  } from "@/Components/ui/carousel.jsx"
-
+// css
 import "./CSS/landing_page.css"
-
+
+import Carousel from "../Components/Carousel"
+
 export default function Landing(){
+	console.log(taylor_albums)
+
 	return(<>
 		<Helmet>
 			<title>MUSIC</title>
@@ -40,7 +38,7 @@ export default function Landing(){
 				<div className="transition-pb"></div>
 
 				<div className="taylors-section">
-					<img src={notTaylor} alt="not-taylor-swift" />
+					<img src={notTaylor} alt="this is not a picture of taylor swift" />
 					<div className="taylors-stats">
 						<Link to="/artist/159260351">Browse Taylor Swift</Link>
 						<p className="white">65 Billion Plays on iTunes</p>
@@ -50,15 +48,17 @@ export default function Landing(){
 
 
 					</div>
-					<img src={mic} alt="not-taylor-swift" />
+					<img src={mic} alt="picture of a microphone" />
 				</div>
-
 				<div className="transition-ba"></div>
 			</div>
 
-			<div className="transition-review-youtube">
-
+			<div className="taylors-albums">
+				<Carousel items={taylor_albums} />
+
 			</div>
+
+			<div className="transition-review-youtube"></div>
 			<div className="youtube-section">
 
 				<div className="itunes-section">