Fix carousel with long quotes by adding width/height props

components/QuotationCarousel.module.css

@@ -3,9 +3,6 @@
   justify-content: space-between;
   align-items: center;
   gap: calc(8rem / 16);
-
-  width: calc(600rem / 16);
-  min-height: calc(100rem / 16);
 }
 
 .carouselButton {

components/QuotationCarousel.tsx

@@ -5,6 +5,10 @@ import styles from "./QuotationCarousel.module.css";
 
 interface QuotationCarouselProps {
   data: string[];
+  /** Width of the entire carousel including the buttons, in px. */
+  width?: number;
+  /** Minimum height of the carousel, in px. */
+  height?: number;
 }
 
 interface CarouselButtonProps {
@@ -13,7 +17,7 @@ interface CarouselButtonProps {
 }
 
 export function QuotationCarousel(props: QuotationCarouselProps) {
-  const { data } = props;
+  const { data, width = 600, height = 100 } = props;
 
   const [activeIdx, setActiveIdx] = useState(0);
 
@@ -26,7 +30,10 @@ export function QuotationCarousel(props: QuotationCarouselProps) {
   }
 
   return (
-    <section className={styles.carousel}>
+    <section
+      className={styles.carousel}
+      style={{ width: `${width / 16}rem`, minHeight: `${height / 16}rem` }}
+    >
       <CarouselButton onClick={showPreviousCard} isPrevious />
       <div className={styles.card}>
         <QuotationMark className={styles.quotationMark} />

data/mocks.ts

@@ -70,3 +70,9 @@ export const mockQuoteData = [
   "Sphinx of black quartz, judge my vow!",
   "Pack my box with five dozen liquor jugs.",
 ];
+
+export const mockQuoteDataLong = [
+  "Here, have some quotes of varying lengths, and see how they look.",
+  "Hello, world!",
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in enim neque. Sed sit amet convallis tellus. Integer condimentum a felis id gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam metus libero, sagittis in consectetur in, scelerisque sed sapien. Nullam ut feugiat sapien. Praesent dictum ac ipsum ac lacinia.",
+];

pages/playground.module.css

@@ -5,3 +5,10 @@
 .barGraphDemo {
   border: calc(1rem / 16) solid black;
 }
+
+.quotationCarouselDemo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: calc(16rem / 16);
+}

pages/playground.tsx

@@ -3,6 +3,7 @@ import {
   mockCategoricalData,
   moreMockCategoricalData,
   mockQuoteData,
+  mockQuoteDataLong,
 } from "data/mocks";
 import React from "react";
 
@@ -66,7 +67,13 @@ export default function Home() {
         }))}
       />
 
-      <QuotationCarousel data={mockQuoteData} />
+      <h2>
+        <code>{"<QuotationCarousel />"}</code>
+      </h2>
+      <div className={styles.quotationCarouselDemo}>
+        <QuotationCarousel data={mockQuoteData} />
+        <QuotationCarousel data={mockQuoteDataLong} width={800} height={160} />
+      </div>
     </div>
   );
 }