xt/color-q
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
徐涛 2025-02-07 22:59:35 +08:00
parent 2b9547a7c2
commit 71feeb4efc
2 changed files with 57 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/page-components/scheme/M2Scheme.tsx
View File

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

31
src/page-components/scheme/M3Scheme.tsx
View File

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