ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-20 11:45:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update AlertBanner component with translation support and responsive design

Browse Source
This commit is contained in:
akcodez
2025-02-18 11:34:40 -08:00
parent 137e9b47dc
commit a782ef0f1c
3 changed files with 34 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
@theme/components/Navbar/Navbar.tsx
View File

@@ -11,12 +11,12 @@ import arrowUpRight from "../../../static/img/icons/arrow-up-right-custom.svg";
const alertBanner = {
show: true,
message: "XRP Ledger Apex 2025 | June 10-12",
message: "XRP Ledger Apex 2025",
button: "GET TICKETS",
link: "https://www.xrpledgerapex.com/?utm_source=xrplwebsite&utm_medium=direct&utm_campaign=xrpl-event-ho-xrplapex-glb-2025-q1_xrplwebsite_ari_arp_bf_rsvp&utm_content=cta_btn_english_gettickets",
date: "JUNE 10-12",
};
export function AlertBanner({ message, button, link, show }) {
export function AlertBanner({ message, date, button, link, show }) {
const { useTranslate } = useThemeHooks();
const { translate } = useTranslate();
const bannerRef = React.useRef(null);
@@ -46,11 +46,11 @@ export function AlertBanner({ message, button, link, show }) {
aria-label="Get Tickets for XRP Ledger Apex 2025 Event"
>
<div className="banner-event-details">
<div className="event-info">XRPL APEX 2025</div>
<div className="event-date">JUNE 10-12</div>
<div className="event-info">{translate(message)}</div>
<div className="event-date">{translate(date)}</div>
</div>
<div className="banner-button">
<div className="button-text">GET TICKETS</div>
<div className="button-text">{translate(button)}</div>
<img className="button-icon" src={arrowUpRight} alt="Get Tickets Icon" />
</div>
</a>