diff --git a/src/pages/SchemeDetail.module.css b/src/pages/SchemeDetail.module.css index 5b72152..7a27250 100644 --- a/src/pages/SchemeDetail.module.css +++ b/src/pages/SchemeDetail.module.css @@ -1,5 +1,10 @@ @layer pages { .scheme_detail_layout { + height: 100%; padding: calc(var(--spacing) * 4) calc(var(--spacing) * 8); + display: flex; + flex-direction: column; + align-items: stretch; + gap: var(--spacing-m); } } diff --git a/src/pages/SchemeDetail.tsx b/src/pages/SchemeDetail.tsx index 2827c88..e5dfdeb 100644 --- a/src/pages/SchemeDetail.tsx +++ b/src/pages/SchemeDetail.tsx @@ -1,8 +1,10 @@ import { isNil, set } from 'lodash-es'; -import { useCallback, useEffect } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { EditableDescription } from '../components/EditableDescription'; import { EditableTitle } from '../components/EditableTitle'; +import { Tab } from '../components/Tab'; +import { SchemeView } from '../page-components/scheme/SchemeView'; import { useScheme, useUpdateScheme } from '../stores/schemes'; import styles from './SchemeDetail.module.css'; @@ -11,6 +13,7 @@ export function SchemeDetail() { const scheme = useScheme(id); const navigate = useNavigate(); const updateScheme = useUpdateScheme(id); + const [showScheme, setShowScheme] = useState<'light' | 'dark'>('light'); const updateTitle = useCallback( (newTitle: string) => { @@ -41,6 +44,14 @@ export function SchemeDetail() {