Second project

Author: Palash Patel

public/moviestore.png

@@ -88,26 +88,16 @@ function ProjectsShowcase() {
         <button
           onClick={handlePrev}
           aria-label="Previous"
-          style={{ ...buttonStyle, left: '-15px', zIndex:-100 }}
+          style={{ ...buttonStyle, left: '-30px', zIndex:100 }}
         >
           &lt;
         </button>
         <Carousel
-          controls
-          indicators
+          activeIndex={index}
+          onSelect={handleSelect}
+          controls={false}
+          indicators={false}
           interval={null}
-          prevIcon={
-            <span
-              className="carousel-control-prev-icon"
-              aria-hidden="true"
-            />
-          }
-          nextIcon={
-            <span
-              className="carousel-control-next-icon"
-              aria-hidden="true"
-            />
-          }
         >
           <Carousel.Item>
             <Container className="py-4">
@@ -121,7 +111,7 @@ function ProjectsShowcase() {
                   >
 
                     <ProjectsShowcaseCard
-                      imageSrc={"/cs-2340-team-website/moviesstore.png"}
+                      imageSrc={"/cs-2340-team-website/moviestore.png"}
                       imageAlt={"Screenshot of moviesstore project."}
                       title={"Movies Store"}
                       description={
@@ -312,7 +302,7 @@ function ProjectsShowcase() {
 
                     <ProjectsShowcaseCard
                       imageSrc={"/cs-2340-team-website/meal_planner.png"}
-                      imageAlt={"Screenshot of moviesstore project."}
+                      imageAlt={"Screenshot of meal planner project."}
                       title={"GT Meal Planner"}
                       description={
                         "A showcase of a full-stack meal planner application for GT students"
@@ -479,7 +469,7 @@ function ProjectsShowcase() {
         <button
           onClick={handleNext}
           aria-label="Next"
-          style={{ ...buttonStyle, right: '-15px', zIndex:-1 }}
+          style={{ ...buttonStyle, right: '-30px', zIndex:10 }}
         >
           &gt;
         </button>
@@ -489,4 +479,4 @@ function ProjectsShowcase() {
   );
 }
 
-export default ProjectsShowcase;
+export default ProjectsShowcase;

src/components/ProjectsShowcase.tsx

@@ -1,5 +1,6 @@
 import { Card } from "react-bootstrap";
 import Carousel from "react-bootstrap/Carousel";
+import React from "react";
 
 interface Slide {
   src?: string;
@@ -9,6 +10,8 @@ interface Slide {
 
 interface ProjectsShowcaseCardProps {
   slides?: Slide[];
+  imageSrc?: string;
+  imageAlt?: string;
   title?: string;
   description?: string;
   projectLink?: string;
@@ -19,14 +22,16 @@ interface ProjectsShowcaseCardProps {
 const ProjectsShowcaseCard: React.FC<ProjectsShowcaseCardProps> = ({
   title,
   slides,
+  imageSrc,
+  imageAlt,
   description,
   projectLink,
   processLink,
   videoLink,
 }) => {
   return (
     <Card className="mx-auto project-card" style={cardStyle}>
-      <Carousel variant='dark'>
+      <Carousel variant="dark" controls={false} indicators={false} interval={null}>
         {slides &&
           slides.map((slide, index) => (
             <Carousel.Item key={ index }>
@@ -47,6 +52,9 @@ const ProjectsShowcaseCard: React.FC<ProjectsShowcaseCardProps> = ({
       </Carousel>
 
       <Card.Body className="text-center">
+        {imageSrc && (
+          <Card.Img variant="top" src={imageSrc} alt={imageAlt} style={{ objectFit: "cover", width: "100%", height: "auto" }} />
+        )}
         {title && (
           <u style={{ fontSize: "30px" }} className=" fw-bold">
             <Card.Title className="black-text fw-bold fs-3">{title}</Card.Title>