feat(playground): apply PlaygroundLayout on Button playground

This commit is contained in:
p-sw 2024-07-12 14:10:36 +09:00
parent a68d864a00
commit 4add04ab7e

View File

@ -1,12 +1,6 @@
import { import type { TEMPLATE } from "@/components/LoadedCode";
GITHUB_COMP_PREVIEW,
LoadedCode,
type TEMPLATE,
} from "@/components/LoadedCode";
import { usePgProps } from "@/components/PgHooks"; import { usePgProps } from "@/components/PgHooks";
import { PlaygroundControl } from "@/components/Playground"; import { PlaygroundLayout } from "@/components/Playground";
import { Story } from "@/components/Story";
import { TabContent, TabList, TabProvider, TabTrigger } from "@pswui/Tabs";
import { ButtonDemo, type ControlledButtonDemoProps } from "./Preview"; import { ButtonDemo, type ControlledButtonDemoProps } from "./Preview";
interface TemplateProps extends TEMPLATE, ControlledButtonDemoProps {} interface TemplateProps extends TEMPLATE, ControlledButtonDemoProps {}
@ -59,25 +53,12 @@ export default function ButtonPlayground() {
}); });
return ( return (
<> <PlaygroundLayout
<TabProvider defaultName="preview"> compName="Button"
<TabList> props={props}
<TabTrigger name="preview">Preview</TabTrigger> control={control}
<TabTrigger name="code">Code</TabTrigger> >
</TabList> <ButtonDemo {...props} />
<TabContent name="preview"> </PlaygroundLayout>
<Story layout="centered">
<ButtonDemo {...props} />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode
from={GITHUB_COMP_PREVIEW("Button")}
template={props}
/>
</TabContent>
</TabProvider>
<PlaygroundControl props={control} />
</>
); );
} }