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