From dfc750dba285a6b08ef32fd277d619b94327027a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Sat, 28 Dec 2024 08:07:24 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0Scheme=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/SchemeDetail.module.css |  5 +++++
 src/pages/SchemeDetail.tsx        | 13 ++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

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() {
     <div className={styles.scheme_detail_layout}>
       <EditableTitle title={scheme?.name} onChange={updateTitle} />
       <EditableDescription content={scheme?.description} onChange={updateDescription} />
+      <Tab
+        tabs={[
+          { title: 'Light Scheme', id: 'light' },
+          { title: 'Dark Scheme', id: 'dark' },
+        ]}
+        onActive={(tabId) => setShowScheme(tabId as 'light' | 'dark')}
+      />
+      <SchemeView scheme={scheme?.[`${showScheme}Scheme`]} />
     </div>
   );
 }