From 81f6b48a1e8203d1b0b844127f17c99e5db0e115 Mon Sep 17 00:00:00 2001
From: unknown <maxsj462@student.liu.se>
Date: Fri, 17 May 2024 12:37:32 +0200
Subject: [PATCH] added some animation
---
theme-costume-app/src/components/Carousel.js | 18 ++++++++++++------
theme-costume-app/src/components/Product.js | 13 +++++++++++--
2 files changed, 23 insertions(+), 8 deletions(-)
diff --git a/theme-costume-app/src/components/Carousel.js b/theme-costume-app/src/components/Carousel.js
index 096b105..ac10de4 100644
--- a/theme-costume-app/src/components/Carousel.js
+++ b/theme-costume-app/src/components/Carousel.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
const NavigationComponent = ({ goToNextPage, goToPreviousPage, currentPage, totalPages }) => {
const renderDots = () => {
@@ -33,7 +33,7 @@ const MoviesDisplay = ({ setOfMovies }) => {
return (
<div style={styles.movies}>
{setOfMovies.map((movie, index) => (
- <div key={index} style={styles.movie}>
+ <div key={index} style={styles.movie}>
<img src={movie.source} alt={movie.name} style={styles.image} />
{/* <p style={styles.movieText}>{movie.name}</p> */}
</div>
@@ -42,10 +42,15 @@ const MoviesDisplay = ({ setOfMovies }) => {
);
};
-const Carousel = ({ showingItems, items }) => {
+const Carousel = ({ showingItems, items, autoScrollInterval = 3000 }) => {
const [currentPage, setCurrentPage] = useState(1);
const TOTAL_PAGES = Math.ceil(items.length / showingItems);
+ useEffect(() => {
+ const intervalId = setInterval(nextPage, autoScrollInterval);
+ return () => clearInterval(intervalId);
+ }, [currentPage]);
+
const previousPage = () => {
if (currentPage === 1) {
setCurrentPage(TOTAL_PAGES);
@@ -61,7 +66,7 @@ const Carousel = ({ showingItems, items }) => {
setCurrentPage(currentPage + 1);
}
};
-
+
const groupingMovies = [];
for (let i = 0; i < items.length; i += showingItems) {
groupingMovies.push(items.slice(i, i + showingItems));
@@ -80,7 +85,8 @@ const Carousel = ({ showingItems, items }) => {
/>
</div>
</div>
- <MoviesDisplay setOfMovies={groupingMovies[currentPage - 1]} />
+ <MoviesDisplay setOfMovies={groupingMovies[currentPage - 1]}
+ />
</div>
);
};
@@ -88,7 +94,7 @@ const Carousel = ({ showingItems, items }) => {
const styles = {
container: {
backgroundColor: '#fff',
- width: '100vw',
+ width: '100%',
},
topRow: {
display: 'flex',
diff --git a/theme-costume-app/src/components/Product.js b/theme-costume-app/src/components/Product.js
index 6c00afb..85450b1 100644
--- a/theme-costume-app/src/components/Product.js
+++ b/theme-costume-app/src/components/Product.js
@@ -2,6 +2,15 @@
import React, {useState} from 'react';
import { Card, CardContent, CardMedia, Typography, Dialog, DialogContent, Button } from '@mui/material';
+import { styled } from '@mui/system';
+
+const AnimatedCard = styled(Card)({
+ transition: 'transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+ '&:hover': {
+ transform: 'scale(1.05)',
+ boxShadow: '0px 10px 10px rgba(0, 0, 0, 0.10)',
+ },
+});
const Product = ({ imageUrl, price }) => {
const [open, setOpen] = useState(false);
@@ -22,7 +31,7 @@ const Product = ({ imageUrl, price }) => {
return (
<>
- <Card sx={{ maxWidth: 345, cursor: 'pointer' }} onClick={handleOpen}>
+ <AnimatedCard sx={{ maxWidth: 345, cursor: 'pointer' }} onClick={handleOpen}>
<CardMedia
component="img"
height="280"
@@ -34,7 +43,7 @@ const Product = ({ imageUrl, price }) => {
Price: ${price}
</Typography>
</CardContent>
- </Card>
+ </AnimatedCard>
<Dialog open={open} onClose={handleClose}>
<DialogContent>
<img src={imageUrl} alt="Product Image" style={{ maxWidth: '100%' }} />
--
GitLab