Skip to content

Update Banner.tsx #2808

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cafeconleche7897 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update Banner.tsx #2808

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 17 additions & 3 deletions libs/base-ui/components/Layout/Nav/Banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import logEvent, {
ComponentType,
} from '../../../utils/logEvent';

// Type definition enforcing a specific naming convention for the banner storage key.
type BannerName = `${string}Banner`;

type BannerProps = {
Expand All @@ -18,14 +19,20 @@ type BannerProps = {
text: string;
};

// Banner component displays a dismissible, persistent notification link.
export default function Banner({ href, text, bannerName }: BannerProps) {
// Use Local Storage to persist the visibility state of the banner.
const [isBannerVisible, setIsBannerVisible] = useLocalStorage(
`${bannerName}Visible`,
true,
);

const pathname = usePathname();

// Check if the user is currently on the destination page (ignoring query parameters).
const isOnPage = pathname === href.split('?')[0];

// Memoized callback for logging the click event on the banner link.
const linkClick = useCallback(() => {
logEvent(
bannerName,
Expand All @@ -36,30 +43,37 @@ export default function Banner({ href, text, bannerName }: BannerProps) {
},
AnalyticsEventImportance.high,
);
}, [logEvent, bannerName]);
}, [bannerName]); // logEvent is assumed to be a static utility and excluded from dependencies.

// Memoized callback to hide the banner permanently (via Local Storage update).
const hideBanner = useCallback(() => {
setIsBannerVisible(false);
}, [setIsBannerVisible]);

// Hide the banner if:
// 1. The user has previously dismissed it.
// 2. The user is currently on the page the banner links to.
if (!isBannerVisible || isOnPage) {
return null;
}

return (
// Outer container with z-index.
<div className="bg-yellow-20 z-10 flex w-full flex-row justify-center text-black">
<div className="bg-yellow-20 z-10 flex w-full max-w-[1440px] flex-row items-center justify-between self-center p-2 pl-8 pr-6">
{/* Inner container for max width and padding */}
<div className="bg-yellow-20 flex w-full max-w-[1440px] flex-row items-center justify-between self-center p-2 pl-8 pr-6">
<Link href={href} onClick={linkClick}>
<span className="text-xs underline md:text-base">{text}</span>
</Link>
<div className="flex flex-row items-center gap-4">
<button
className="cursor-pointer p-2 text-sm"
onClick={hideBanner}
onKeyDown={hideBanner}
// Removed redundant onKeyDown as native button handles Enter/Space keys for click event.
type="button"
aria-label="Close Banner"
>
{/* The Icon component is correctly used for the close button visual. */}
<Icon name="close" color="black" width="16" height="16" />
</button>
</div>
Expand Down