Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | 6x 6x 63x 63x 63x 63x 63x 62x 62x 63x | /**
* Non-production build markers, on status tokens rather than the default
* Tailwind palette.
*
* `alpha` and `preview` read as warnings because that is what they are: a
* build that is not the real thing. `beta` is success-inked — it is a
* candidate, not a hazard. `local` and anything unrecognised take neutral
* foreground, since "unknown environment" is information, not a state.
*
* There is no purple or emerald in the Shade Card, so the old `purple-500`
* and `emerald-500` had no token to map onto one-for-one; they collapse into
* warning and success, which is what they were standing in for.
*/
const RELEASE_COLORS: Record<string, { dot: string; text: string }> = {
alpha: { dot: "bg-warning", text: "text-warning" },
beta: { dot: "bg-success", text: "text-success" },
};
const ENV_COLORS: Record<string, string> = {
dev: "bg-warning",
preview: "bg-warning",
local: "bg-foreground-muted",
};
export function ReleaseBadge() {
const releaseVersion = import.meta.env.VITE_RELEASE_VERSION || "";
const environment = import.meta.env.VITE_ENVIRONMENT || "local";
const showRelease =
releaseVersion === "alpha" || releaseVersion === "beta";
const showEnv = environment !== "production";
if (!showRelease && !showEnv) return null;
const colors = RELEASE_COLORS[releaseVersion];
const envColor = ENV_COLORS[environment] || "bg-foreground-muted";
return (
<span className="inline-flex flex-wrap items-center gap-1 ml-2">
{showRelease && colors && (
<span
className={`inline-flex items-center gap-1 text-[10px] font-semibold ${colors.text}`}
>
<span
className={`w-1.5 h-1.5 rounded-full ${colors.dot} animate-pulse`}
/>
{releaseVersion}
</span>
)}
{showEnv && (
<span
className={`text-[9px] font-bold text-white px-1.5 py-px rounded-lg uppercase tracking-wide ${envColor}`}
>
{environment}
</span>
)}
</span>
);
}
|