From db2da9bd84274ecd3fd8c7fb57a898524499d6d7 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:08:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0Scheme=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E6=89=BF=E8=BD=BD=E5=92=8C=E6=A8=A1=E5=BC=8F=E5=88=87=E6=8D=A2?=
 =?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

---
 .../scheme/SchemeView.module.css              | 16 +++++++++++++
 src/page-components/scheme/SchemeView.tsx     | 23 +++++++++++++++++++
 2 files changed, 39 insertions(+)
 create mode 100644 src/page-components/scheme/SchemeView.module.css
 create mode 100644 src/page-components/scheme/SchemeView.tsx

diff --git a/src/page-components/scheme/SchemeView.module.css b/src/page-components/scheme/SchemeView.module.css
new file mode 100644
index 0000000..a89a3eb
--- /dev/null
+++ b/src/page-components/scheme/SchemeView.module.css
@@ -0,0 +1,16 @@
+@layer pages {
+  .scheme_view_layout {
+    flex: 1 0;
+    width: 100%;
+    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 8);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-m);
+  }
+  .preview_switch_container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+}
diff --git a/src/page-components/scheme/SchemeView.tsx b/src/page-components/scheme/SchemeView.tsx
new file mode 100644
index 0000000..9ee1f42
--- /dev/null
+++ b/src/page-components/scheme/SchemeView.tsx
@@ -0,0 +1,23 @@
+import { useState } from 'react';
+import { Switch } from '../../components/Switch';
+import { SchemeSet } from '../../stores/schemes';
+import { SchemeContent } from './SchemeContent';
+import styles from './SchemeView.module.css';
+
+type SchemeViewProps = {
+  scheme: SchemeSet['lightScheme' | 'darkScheme'];
+};
+
+export function SchemeView({ scheme }: SchemeViewProps) {
+  const [enablePreview, setEnablePreview] = useState(false);
+
+  return (
+    <div className={styles.scheme_view_layout}>
+      <div className={styles.preview_switch_container}>
+        <span>Preview scheme</span>
+        <Switch onChange={(checked) => setEnablePreview(checked)} />
+      </div>
+      {enablePreview ? <div>SVG Preview</div> : <SchemeContent scheme={scheme} />}
+    </div>
+  );
+}