peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(banner): extract reusable Banner base for VersionBanner + DemoBanner

Browse source 
Both top-of-app bars shared the same shell (icon + content + border-b bar);
factor it into a tone-driven Banner with optional action/dismiss. The
version/demo logic stays in the wrappers. Leaves a clean extension point for
a future news-ticker variant.
This commit is contained in:
npeter83 2026-06-19 11:18:20 +02:00
parent a5de874dd3
commit 479574b726
3 changed files with 73 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/components/DemoBanner.tsx
View file

@ -1,17 +1,15 @@
import { useTranslation } from "react-i18next";
import { AlertTriangle } from "lucide-react";
import Banner from "./Banner";
// Permanent, non-dismissible bar shown to the shared demo account so it's always clear the
// state is communal. (Replaces the old login-time toast, which re-popped on every reload.)
export default function DemoBanner() {
const { t } = useTranslation();
return (
<div className="shrink-0 flex items-center gap-2 px-4 py-2 text-sm bg-amber-500/15 border-b border-amber-500/30 text-fg">
<AlertTriangle className="w-4 h-4 text-amber-500 shrink-0" />
<span className="min-w-0">
<span className="font-semibold">{t("common.demoTitle")}</span>
<span className="text-muted"> — {t("common.demoSharedNotice")}</span>
</span>
</div>
<Banner tone="warning" icon={AlertTriangle}>
<span className="font-semibold">{t("common.demoTitle")}</span>
<span className="text-muted"> — {t("common.demoSharedNotice")}</span>
</Banner>
);
}