refactor: improve admin style in status page
This commit is contained in:
parent
42f41cdbcb
commit
ed2141af22
@ -21,16 +21,18 @@ import {
|
|||||||
SheetHeader,
|
SheetHeader,
|
||||||
SheetTrigger,
|
SheetTrigger,
|
||||||
} from '@/components/ui/sheet';
|
} from '@/components/ui/sheet';
|
||||||
|
import { cn } from '@/utils/style';
|
||||||
|
|
||||||
interface MonitorStatusPageProps {
|
interface MonitorStatusPageProps {
|
||||||
slug: string;
|
slug: string;
|
||||||
showBackBtn?: boolean;
|
showBackBtn?: boolean;
|
||||||
|
fullWidth?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
|
export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
|
||||||
(props) => {
|
(props) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const { slug, showBackBtn = true } = props;
|
const { slug, showBackBtn = true, fullWidth } = props;
|
||||||
|
|
||||||
const { data: info } = trpc.monitor.getPageInfo.useQuery({
|
const { data: info } = trpc.monitor.getPageInfo.useQuery({
|
||||||
slug,
|
slug,
|
||||||
@ -120,8 +122,9 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className={clsx(
|
className={cn(
|
||||||
'mx-auto w-full overflow-auto px-4 py-8 md:w-4/5 xl:w-3/5'
|
'mx-auto overflow-auto px-4 py-8',
|
||||||
|
fullWidth ? 'w-full' : 'w-full md:w-4/5 xl:w-3/5'
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className="flex">
|
<div className="flex">
|
||||||
|
@ -86,7 +86,7 @@ function PageComponent() {
|
|||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<MonitorStatusPage slug={slug} showBackBtn={false} />
|
<MonitorStatusPage slug={slug} showBackBtn={false} fullWidth={true} />
|
||||||
</CommonWrapper>
|
</CommonWrapper>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user