Add Note About Sample Image Count in `CarouselComponent`

[thisislokeshrm]

Changes Made

Added a note in the CarouselComponent to clarify that only 2 sample images are used for demonstration purposes.

Details

• Files Modified:
  • CarouselComponent.tsx

Additional Notes

• This change is meant to clarify that the component currently demonstrates functionality using only 2 sample images.
• Future implementations might involve using more images as needed.

---

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
`;

const CarouselComponent = ({ fontSize }) => {
  const images = [
    '/CarouselImage/mem1.png',
    '/CarouselImage/mem2.png'
    // Add more images as needed
  ];

  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 a note about using only two images for demonstration purposes.
• No functionality changes were made; this PR is for documentation clarity.

---

Reviewer Checklist

• [ ] Could you verify the clarity and accuracy of the note added?
• [ ] Confirm no unintended changes were introduced.
• [ ] Consider future enhancements that require updating the sample images or adding more variety.

[breathecode6365]

The PR has conflicts and is expected to have all the images, No samples!!