From 71feeb4efc5d1b9336777d3956676c3c2264eed6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Fri, 7 Feb 2025 22:59:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=BE=E7=BD=AE=E9=BB=98=E8=AE=A4=E7=9A=84M3?=
 =?UTF-8?q?=20Scheme=E5=92=8CM2=20Scheme=E7=9A=84=E4=B8=BB=E8=A6=81?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=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/page-components/scheme/M2Scheme.tsx | 30 ++++++++++++++++++++++--
 src/page-components/scheme/M3Scheme.tsx | 31 +++++++++++++++++++++++--
 2 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/src/page-components/scheme/M2Scheme.tsx b/src/page-components/scheme/M2Scheme.tsx
index c102e8a..fd2521c 100644
--- a/src/page-components/scheme/M2Scheme.tsx
+++ b/src/page-components/scheme/M2Scheme.tsx
@@ -1,3 +1,29 @@
-export function M2Scheme() {
-  return <div>Material Design 2 Scheme</div>;
+import { isEqual, isNil } from 'lodash-es';
+import { useState } from 'react';
+import { Tab } from '../../components/Tab';
+import { SchemeExport } from './Export';
+
+const tabOptions = [
+  { title: 'Overview', id: 'overview' },
+  { title: 'Builder', id: 'builder' },
+  { title: 'Exports', id: 'export' },
+];
+
+type M3SchemeProps = {
+  scheme: SchemeContent<MaterialDesign3SchemeStorage>;
+};
+
+export function M2Scheme({ scheme }: M3SchemeProps) {
+  const [activeTab, setActiveTab] = useState<(typeof tabOptions)[number]['id']>(() =>
+    isNil(scheme.schemeStorage.scheme) ? 'builder' : 'overview',
+  );
+
+  return (
+    <>
+      <Tab tabs={tabOptions} activeTab={activeTab} onActive={setActiveTab} />
+      {isEqual(activeTab, 'overview') && <div>Preview</div>}
+      {isEqual(activeTab, 'builder') && <div>Builder</div>}
+      {isEqual(activeTab, 'export') && <SchemeExport scheme={scheme} />}
+    </>
+  );
 }
diff --git a/src/page-components/scheme/M3Scheme.tsx b/src/page-components/scheme/M3Scheme.tsx
index 7d38bc7..6dc9485 100644
--- a/src/page-components/scheme/M3Scheme.tsx
+++ b/src/page-components/scheme/M3Scheme.tsx
@@ -1,3 +1,30 @@
-export function M3Scheme() {
-  return <div>Material Design 3 Scheme</div>;
+import { isEqual, isNil } from 'lodash-es';
+import { useState } from 'react';
+import { Tab } from '../../components/Tab';
+import { MaterialDesign3SchemeStorage } from '../../material-3-scheme';
+import { SchemeExport } from './Export';
+
+const tabOptions = [
+  { title: 'Overview', id: 'overview' },
+  { title: 'Builder', id: 'builder' },
+  { title: 'Exports', id: 'export' },
+];
+
+type M3SchemeProps = {
+  scheme: SchemeContent<MaterialDesign3SchemeStorage>;
+};
+
+export function M3Scheme({ scheme }: M3SchemeProps) {
+  const [activeTab, setActiveTab] = useState<(typeof tabOptions)[number]['id']>(() =>
+    isNil(scheme.schemeStorage.scheme) ? 'builder' : 'overview',
+  );
+
+  return (
+    <>
+      <Tab tabs={tabOptions} activeTab={activeTab} onActive={setActiveTab} />
+      {isEqual(activeTab, 'overview') && <div>Preview</div>}
+      {isEqual(activeTab, 'builder') && <div>Builder</div>}
+      {isEqual(activeTab, 'export') && <SchemeExport scheme={scheme} />}
+    </>
+  );
 }