55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { ChevronRight, Sparkles, X } from "lucide-react";
|
|
|
|
import styles from "./first-recharge-offer-banner.module.css";
|
|
|
|
export interface FirstRechargeOfferBannerProps {
|
|
visible: boolean;
|
|
discountPercent: number;
|
|
onClick: () => void;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function FirstRechargeOfferBanner({
|
|
visible,
|
|
discountPercent,
|
|
onClick,
|
|
onClose,
|
|
}: FirstRechargeOfferBannerProps) {
|
|
if (!visible) return null;
|
|
|
|
return (
|
|
<section className={styles.banner} aria-label="First recharge offer">
|
|
<button
|
|
type="button"
|
|
data-analytics-key="chat.first_recharge_offer"
|
|
data-analytics-label="Open first recharge offer"
|
|
className={styles.contentButton}
|
|
onClick={onClick}
|
|
>
|
|
<span className={styles.iconWrap} aria-hidden="true">
|
|
<Sparkles className={styles.icon} size={18} />
|
|
</span>
|
|
<span className={styles.copy}>
|
|
<span className={styles.eyebrow}>First Recharge Offer</span>
|
|
<span className={styles.title}>
|
|
<strong>{discountPercent}% OFF</strong>
|
|
<span>Claim your discount now</span>
|
|
</span>
|
|
</span>
|
|
<ChevronRight className={styles.arrow} size={18} aria-hidden="true" />
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
className={styles.closeButton}
|
|
onClick={onClose}
|
|
aria-label="Hide first recharge offer"
|
|
>
|
|
<X size={16} aria-hidden="true" />
|
|
</button>
|
|
</section>
|
|
);
|
|
}
|