build qtify

Anusree6154s · Aug 4, 2024 · a563b69 · a563b69
1 parent 7942a9b
commit a563b69
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 12 deletions.
diff --git a/qtify/package-lock.json b/qtify/package-lock.json
diff --git a/qtify/package.json b/qtify/package.json
@@ -15,6 +15,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.0",
     "react-scripts": "5.0.1",
+    "swiper": "^11.1.9",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/qtify/src/components/Card/Card.module.css b/qtify/src/components/Card/Card.module.css
@@ -4,7 +4,7 @@
 }
 
 .container {
-  height: 250px;
+  height: 205px;
   width: 100%;
   border-radius: 10px;
   overflow: hidden;

diff --git a/qtify/src/components/Carousel/Carousel.js b/qtify/src/components/Carousel/Carousel.js
@@ -0,0 +1,79 @@
+// import React from "react";
+// import Grid from '@mui/material/Grid';
+// import Card from '../Card/Card';
+// import { Typography } from '@mui/material';
+// import styles from "./Section.module.css";
+
+// export default function Carousel({ title, data }) {
+//     return (
+//         <div>
+
+//             <Grid container spacing={4} sx={{ padding: 3 }}>
+//                 {data && data.map((group, index) => (
+//                     <Grid item xs={12} key={index}>
+//                         <Card image={group.image} follows={group.follows} />
+//                         <Typography sx={{ color: 'white', textAlign: 'left' }}> {group.title}</Typography>
+//                     </Grid>
+//                 ))}
+//             </Grid>
+//         </div>
+//     )
+// }
+
+import React, { useRef, useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
+// import './styles.css';
+import { Navigation } from 'swiper/modules';
+
+import Grid from '@mui/material/Grid';
+import Card from '../Card/Card';
+import { Typography } from '@mui/material';
+
+export default function Carousel({ data }) {
+    return (
+        <Grid item xs={12}>
+            <Swiper
+                slidesPerView={1}
+                breakpoints={{
+                    280: {
+                        slidesPerView: 2,
+                        spaceBetween: 30,
+                    },
+                    400: {
+                        slidesPerView: 3,
+                        spaceBetween: 30,
+                    },
+                    668: {
+                        slidesPerView: 5,
+                        spaceBetween: 30,
+                    },
+                    1024: {
+                        slidesPerView: 7,
+                        spaceBetween: 30,
+                    },
+                }}
+                spaceBetween={10}
+                loop={true}
+                navigation={true}
+                modules={[Navigation]}
+                className="mySwiper"
+            >
+                {/* <Grid container >
+                    <Grid item xs={12}> */}
+                {data && data.map((group, index) => (
+                    <SwiperSlide>
+                        {/* <Grid item xs={12} key={index}> */}
+                        <Card image={group.image} follows={group.follows} />
+                        <Typography sx={{ color: 'white', textAlign: 'left' }}> {group.title}</Typography>
+                        {/* </Grid> */}
+                    </SwiperSlide>
+                ))}
+                {/* </Grid>
+                </Grid> */}
+            </Swiper>
+        </Grid>
+    );
+}
diff --git a/qtify/src/components/Carousel/Carousel.module.css b/qtify/src/components/Carousel/Carousel.module.css
diff --git a/qtify/src/components/Section/Section.js b/qtify/src/components/Section/Section.js
@@ -1,25 +1,33 @@
-import React from "react";
+import React, { useState } from "react";
 import Grid from '@mui/material/Grid';
 import Card from '../Card/Card';
 import { Typography } from '@mui/material';
 import styles from "./Section.module.css";
+import Carousel from "../Carousel/Carousel";
 
 export default function Section({ title, data }) {
+    const [collapsed, setCollapse] = useState(true)
     return (
         <div>
 
             <Grid container spacing={4} sx={{ padding: 3 }}>
-                <Grid item xs={12}>
-                    <h1 style={{ color: 'white', textAlign: 'left', margin: '0px' }}>
-                        {title}
-                    </h1>
+                <Grid item xs={12} style={{ display: 'flex', justifyContent: 'space-between' }}>
+                    <span style={{ color: 'white', textAlign: 'left', margin: '0px' }}>
+                        {title} Albums
+                    </span>
+                    <button style={{ backgroundColor: 'transparent', border: 'none', color: 'var(--color-primary)' }} onClick={() => setCollapse(!collapsed)}>
+                        {collapsed ? 'Show All' : 'Collapse'}
+                    </button>
                 </Grid>
-                {data && data.map((group, index) => (
-                    <Grid item xs={12 / 7} key={index}>
-                        <Card image={group.image} follows={group.follows} />
-                        <Typography sx={{ color: 'white', textAlign: 'left' }}> {group.title}</Typography>
-                    </Grid>
-                ))}
+                {collapsed ?
+                    <Carousel data={data} />
+                    :
+                    data && data.map((group, index) => (
+                        <Grid item xs={12 / 7} key={index}>
+                            <Card image={group.image} follows={group.follows} />
+                            <Typography sx={{ color: 'white', textAlign: 'left' }}> {group.title}</Typography>
+                        </Grid>
+                    ))}
             </Grid>
         </div>
     )