Refactor and add transition between quotes

components/QuotationCarousel.module.css

@@ -48,6 +48,7 @@
   flex-direction: column;
   justify-content: space-between;
   align-items: stretch;
+  gap: calc(16rem / 16);
 
   min-height: inherit;
   height: 100%;
@@ -60,8 +61,26 @@
   box-shadow: 0 calc(1rem / 16) calc(10rem / 16) var(--primary-accent);
 }
 
-.card:not(.active) {
-  display: none;
+.card ul {
+  margin: 0;
+  padding: 0;
+  flex-grow: 1;
+}
+
+.card li {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  visibility: visible;
+  opacity: 1;
+  transition: 0.1s;
+}
+
+.card li.hidden {
+  visibility: hidden;
+  opacity: 0;
 }
 
 .card p {

components/QuotationCarousel.tsx

@@ -7,11 +7,6 @@ interface QuotationCarouselProps {
   data: string[];
 }
 
-interface QuotationCardProps {
-  quote: string;
-  isActive?: boolean;
-}
-
 interface CarouselButtonProps {
   onClick: () => void;
   isPrevious?: boolean;
@@ -33,28 +28,22 @@ export function QuotationCarousel(props: QuotationCarouselProps) {
   return (
     <section className={styles.carousel}>
       <CarouselButton onClick={showPreviousCard} isPrevious />
-      {data.map((quote, idx) => {
-        return (
-          <QuotationCard key={idx} quote={quote} isActive={idx === activeIdx} />
-        );
-      })}
+      <div className={styles.card}>
+        <QuotationMark className={styles.quotationMark} />
+        <ul>
+          {data.map((quote, idx) => (
+            <li key={idx} className={idx !== activeIdx ? styles.hidden : ""}>
+              <p>{quote}</p>
+            </li>
+          ))}
+        </ul>
+        <QuotationMark className={`${styles.right} ${styles.quotationMark}`} />
+      </div>
       <CarouselButton onClick={showNextCard} />
     </section>
   );
 }
 
-function QuotationCard({ quote, isActive }: QuotationCardProps) {
-  const className = isActive ? `${styles.active} ${styles.card}` : styles.card;
-
-  return (
-    <div className={className}>
-      <QuotationMark className={styles.quotationMark} />
-      <p>{quote}</p>
-      <QuotationMark className={`${styles.right} ${styles.quotationMark}`} />
-    </div>
-  );
-}
-
 function CarouselButton({ isPrevious, onClick }: CarouselButtonProps) {
   return (
     <button className={styles.carouselButton} onClick={onClick}>