63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
// import { useSelector } from "react-redux";
|
|
// import { selectors } from "@/store";
|
|
import clsx from "clsx";
|
|
|
|
import { Typography } from "@/components/ui";
|
|
import { getFormattedPrice } from "@/shared/utils/price";
|
|
import { Currency } from "@/types";
|
|
|
|
import styles from "./Offer.module.scss";
|
|
|
|
import { CheckMark } from "..";
|
|
|
|
interface OfferProps {
|
|
title?: string | React.ReactNode;
|
|
description?: string;
|
|
oldPrice?: number | string;
|
|
newPrice?: number | string;
|
|
active?: boolean;
|
|
image?: React.ReactNode;
|
|
className?: string;
|
|
classNameTitle?: string;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
function Offer({
|
|
title,
|
|
description,
|
|
oldPrice,
|
|
newPrice,
|
|
active = false,
|
|
onClick,
|
|
image,
|
|
className = "",
|
|
classNameTitle = ""
|
|
}: OfferProps) {
|
|
// const currency = useSelector(selectors.selectCurrency);
|
|
const currency = Currency.USD;
|
|
|
|
return (
|
|
<div className={clsx(styles.container, active && styles.active, className)} onClick={onClick}>
|
|
<CheckMark active={active} className={styles.checkMark} />
|
|
|
|
{image}
|
|
|
|
<Typography as="h3" weight="bold" className={clsx(styles.title, classNameTitle)}>
|
|
{title}
|
|
</Typography>
|
|
<Typography as="p" className={styles.description}>
|
|
{description}
|
|
</Typography>
|
|
<div className={styles.priceContainer}>
|
|
<Typography weight="bold" className={styles.oldPrice}>
|
|
{getFormattedPrice(Number(oldPrice), currency)}
|
|
</Typography>
|
|
<Typography weight="bold" className={styles.newPrice}>
|
|
{getFormattedPrice(Number(newPrice), currency)}
|
|
</Typography>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Offer |