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 | 1x 1x 1x 1x 1x 1x 4x 4x 1x 1x 3x 3x 4x 4x 4x 1x | import { useAppContext } from '@/context';
import { IS_DEV_BUILD } from '@/utils/isDevBuild';
import { FC } from 'react';
import { AdvancedModeBadge, BadgeTray, DevBadge } from './StyledComponents';
/**
* Corner status badges for the bottom-left of the app: "DEV BUILD" in
* non-production builds, "ADVANCED MODE" while the Konami-unlocked advanced mode
* is active. Both live in a single `BadgeTray`, so whichever combination
* applies lays out side by side rather than overlapping — and the row reflows on
* its own when advanced mode is toggled.
*
* Rendered once at the app level so the badges follow the user across panels,
* rather than being duplicated per page.
* @returns The badge tray, or `null` when no badge applies.
* @example
* ```tsx
* <StatusBadges />
* // dev build + advanced mode => [DEV BUILD][ADVANCED MODE]
* // prod build + advanced mode => [ADVANCED MODE]
* ```
* @category Components
* @source
*/
export const StatusBadges: FC = () => {
const { advancedMode } = useAppContext();
if (!IS_DEV_BUILD && !advancedMode) {
return null;
}
return (
<BadgeTray>
{IS_DEV_BUILD && <DevBadge>DEV BUILD</DevBadge>}
{advancedMode && <AdvancedModeBadge>ADVANCED MODE</AdvancedModeBadge>}
</BadgeTray>
);
};
export default StatusBadges;
|