Add basic carousel button styles
This commit is contained in:
parent
1da0953aef
commit
14c14cbaa4
|
@ -1,12 +1,32 @@
|
||||||
.carousel {
|
.carousel {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: calc(8rem / 16);
|
||||||
|
|
||||||
width: calc(600rem / 16);
|
width: calc(600rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
.carouselButton {
|
.carouselButton {
|
||||||
width: calc(36rem / 16);
|
display: flex;
|
||||||
height: calc(64rem / 16);
|
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 {
|
.card {
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
import { Color } from "utils/Color";
|
||||||
|
|
||||||
import styles from "./QuotationCarousel.module.css";
|
import styles from "./QuotationCarousel.module.css";
|
||||||
|
|
||||||
|
@ -8,7 +9,12 @@ interface QuotationCarouselProps {
|
||||||
|
|
||||||
interface QuotationCardProps {
|
interface QuotationCardProps {
|
||||||
quote: string;
|
quote: string;
|
||||||
isActive: boolean;
|
isActive?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CarouselButtonProps {
|
||||||
|
onClick: () => void;
|
||||||
|
isPrevious?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function QuotationCarousel(props: QuotationCarouselProps) {
|
export function QuotationCarousel(props: QuotationCarouselProps) {
|
||||||
|
@ -16,11 +22,11 @@ export function QuotationCarousel(props: QuotationCarouselProps) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className={styles.carousel}>
|
<section className={styles.carousel}>
|
||||||
<button className={styles.carouselButton} />
|
<CarouselButton onClick={() => {}} isPrevious />
|
||||||
{data.map((quote, idx) => {
|
{data.map((quote, idx) => {
|
||||||
return <QuotationCard key={idx} quote={quote} isActive={idx === 0} />;
|
return <QuotationCard key={idx} quote={quote} isActive={idx === 0} />;
|
||||||
})}
|
})}
|
||||||
<button className={styles.carouselButton} />
|
<CarouselButton onClick={() => {}} />
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -30,3 +36,27 @@ function QuotationCard({ quote, isActive }: QuotationCardProps) {
|
||||||
|
|
||||||
return <div className={className}>{quote}</div>;
|
return <div className={className}>{quote}</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function CarouselButton({ isPrevious, onClick }: CarouselButtonProps) {
|
||||||
|
return (
|
||||||
|
<button className={styles.carouselButton} onClick={onClick}>
|
||||||
|
<svg
|
||||||
|
className={
|
||||||
|
isPrevious ? `${styles.previous} ${styles.arrow}` : styles.arrow
|
||||||
|
}
|
||||||
|
width="39"
|
||||||
|
height="72"
|
||||||
|
viewBox="0 0 39 72"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M4 4L34.4206 35.804C35.2926 36.7157 35.2597 38.1619 34.3471 39.0329L4 68"
|
||||||
|
stroke={Color.primaryAccentLighter}
|
||||||
|
strokeWidth="4"
|
||||||
|
strokeLinecap="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue