feat(playground): apply PlaygroundLayout on Popover playground

This commit is contained in:
p-sw 2024-07-12 14:08:53 +09:00
parent 58a8b8b241
commit a68d864a00

View File

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