Add More Photos to `CarouselComponent` and it's completed.

[thisislokeshrm]

Changes Made

Added more photos to the CarouselComponent to showcase a variety of memories, including images from the old memories folder and new photos.

Details

• Files Modified:
  • CarouselComponent.tsx

Additional Notes

• This update enhances the component by showcasing a broader range of photos.
• The CarouselComponent now includes a mix of images from different sources to illustrate its versatility.

---

Code Changes

'use client'; // Ensure this component is treated as a client component

import React from 'react';
import Slider from 'react-slick';
import "slick-carousel/slick/slick.css"; // Import base slick styles
import "slick-carousel/slick/slick-theme.css"; // Import slick theme styles
import styled from 'styled-components'; // Import styled-components

// Styled component for the carousel container with responsive width
const CarouselContainer = styled.div`
  width: 60%;
  margin: 0 auto; // Center the container

  @media (max-width: 768px) {
    width: 80%; // Use 80% width on screens 768px or less
  }
`;

// Styled component for the overall layout
const CarouselWrapper = styled.div`
  text-align: center;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
`;

// Styled component for the image within the slider
const CarouselImage = styled.img`
  width: 100%;
  height: auto;
  border-radius: 10px;
`;

// Styled component for the heading with dynamic font size
const CarouselHeading = styled.h1`
  font-size: ${props => props.fontSize || '2em'}; // Default to 2em if no fontSize prop is provided

    @media (max-width: 768px) {
    font-size: ${props => props.fontSize || '1.5em'};
  }
`;

const CarouselComponent = ({ fontSize }) => {
  const images = [
    '/CarouselImage/DSC_3010.jpg',
    '/CarouselImage/DSC_3229.jpg',
    '/CarouselImage/DSC_3265.jpg',
    '/CarouselImage/hacakathon2.jpg',
    '/CarouselImage/hackathon1.jpg',
    '/CarouselImage/hackathon3.jpg',
    '/CarouselImage/hackathon4.jpg',
    '/CarouselImage/hackathon5.jpg',
    '/CarouselImage/IMG_20240327_181845.jpg'
  ];

  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 3000,
    arrows: true
  };

  return (
    <CarouselWrapper>
      <CarouselHeading fontSize={fontSize}>Memories</CarouselHeading> {/* Use the styled component for the heading */}
      <CarouselContainer>
        <Slider {...settings}>
          {images.map((image, index) => (
            <div key={index}>
              <CarouselImage src={image} alt={`carousel-${index}`} />
            </div>
          ))}
        </Slider>
      </CarouselContainer>
    </CarouselWrapper>
  );
};

export default CarouselComponent;

PR Notes

• Added additional photos to showcase a variety of memories.
• No functionality changes were made; this PR enhances the component's visual content.

---

Reviewer Checklist

• [ ] Ensure the new images align with the intended purpose of the component.
• [ ] Verify the component's performance with the increased number of photos.
• [ ] Consider future enhancements or adjustments based on feedback.

---

[breathecode6365]

• Please title the PR relevant and meaningful.
• Merge conflicts has been not resolved
• PR templates is not under contribution guidelines, only attachments like screenshot or video if neccessary is expected, code changes need not to be mentioned explicitly in the PR, as i can go through the file change tab.

[thisislokeshrm]

The conflicts has been checked and corrected.