schiwagoa/tianji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add ColorSchemeSwitcher in status page

Browse Source
This commit is contained in:
moonrailgun 2023-12-16 14:51:15 +08:00
parent c68d27a6d3
commit d501deddc4
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/client/components/monitor/StatusPage/index.tsx
View File

@ -10,6 +10,7 @@ import {
import clsx from 'clsx';
import { useRequest } from '../../../hooks/useRequest';
import { useNavigate } from 'react-router';
import { ColorSchemeSwitcher } from '../../ColorSchemeSwitcher';
interface MonitorStatusPageProps {
slug: string;
@ -59,23 +60,28 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
);
return (
<div className="w-full h-full flex gap-6">
<div className="w-full h-full flex">
{editMode && (
<div className="w-1/3 overflow-auto py-8 px-4 border-r border-gray-600">
<div className="w-1/3 overflow-auto py-8 px-4 border-r border-gray-300 dark:border-gray-600">
<MonitorStatusPageEditForm
isLoading={loading}
initialValues={info ?? {}}
onFinish={handleSave}
onCancel={() => setEditMode(false)}
/>
</div>
)}
<div
className={clsx(
'mx-auto py-8 overflow-auto',
'mx-auto py-8 px-4 overflow-auto',
!editMode ? 'w-4/5' : 'w-2/3'
)}
>
<div className="text-2xl mb-4">{info?.title}</div>
<div className="flex">
<div className="text-2xl mb-4 flex-1">{info?.title}</div>
<ColorSchemeSwitcher />
</div>
<div>
{allowEdit && !editMode && (