放置默认的M3 Scheme和M2 Scheme的主要切换页面。

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} />}
+    </>
+  );
 }

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} />}
+    </>
+  );
 }