Update PageHeader component to conditionally hide BackButton based on environment and TMA status

- Modified the logic in the PageHeader component to hide the BackButton when in production or when the TMA status is 'simple', improving user experience by reducing unnecessary navigation options.
This commit is contained in:
vchikalkin 2025-10-07 19:31:40 +03:00
parent 4a98ac5d3e
commit 7fe1b89f5b

View File

@ -1,4 +1,5 @@
'use client'; 'use client';
import { BackButton } from './back-button'; import { BackButton } from './back-button';
import { cn } from '@repo/ui/lib/utils'; import { cn } from '@repo/ui/lib/utils';
import { isTMA } from '@telegram-apps/sdk-react'; import { isTMA } from '@telegram-apps/sdk-react';
@ -6,16 +7,16 @@ import { isTMA } from '@telegram-apps/sdk-react';
type Props = { title: string | undefined }; type Props = { title: string | undefined };
export function PageHeader(props: Readonly<Props>) { export function PageHeader(props: Readonly<Props>) {
const isTG = isTMA('simple'); const hideBackButton = process.env.NODE_ENV === 'production' || isTMA('simple');
return ( return (
<div <div
className={cn( className={cn(
'sticky top-0 z-50 flex h-12 items-center rounded-b-lg bg-transparent font-bold tracking-wide backdrop-blur-md', 'sticky top-0 z-50 flex h-12 items-center rounded-b-lg bg-transparent font-bold tracking-wide backdrop-blur-md',
isTG ? 'px-4' : 'px-2', hideBackButton ? 'px-4' : 'px-2',
)} )}
> >
{!isTG && <BackButton />} {!hideBackButton && <BackButton />}
{props.title} {props.title}
</div> </div>
); );