diff --git a/components/QuotationCarousel.module.css b/components/QuotationCarousel.module.css index 218cc13..b529520 100644 --- a/components/QuotationCarousel.module.css +++ b/components/QuotationCarousel.module.css @@ -1,12 +1,32 @@ .carousel { display: flex; + justify-content: center; + align-items: center; + gap: calc(8rem / 16); width: calc(600rem / 16); } .carouselButton { - width: calc(36rem / 16); - height: calc(64rem / 16); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + padding: calc(16rem / 16); + height: min-content; + + background: none; + border: none; +} + +.arrow { + width: calc(20rem / 16); + height: calc(40rem / 16); +} + +.previous { + transform: rotate(180deg); } .card { diff --git a/components/QuotationCarousel.tsx b/components/QuotationCarousel.tsx index ccb2ff2..7cb2927 100644 --- a/components/QuotationCarousel.tsx +++ b/components/QuotationCarousel.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { Color } from "utils/Color"; import styles from "./QuotationCarousel.module.css"; @@ -8,7 +9,12 @@ interface QuotationCarouselProps { interface QuotationCardProps { quote: string; - isActive: boolean; + isActive?: boolean; +} + +interface CarouselButtonProps { + onClick: () => void; + isPrevious?: boolean; } export function QuotationCarousel(props: QuotationCarouselProps) { @@ -16,11 +22,11 @@ export function QuotationCarousel(props: QuotationCarouselProps) { return (
-
); } @@ -30,3 +36,27 @@ function QuotationCard({ quote, isActive }: QuotationCardProps) { return
{quote}
; } + +function CarouselButton({ isPrevious, onClick }: CarouselButtonProps) { + return ( + + ); +}