p-sw/pswui-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve playground control style

Browse Source
This commit is contained in:
p-sw 2024-08-04 14:35:09 +09:00
parent ae4453dd21
commit ca9036c1ad
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Playground.tsx
View File

@ -63,7 +63,9 @@ export function PlaygroundControl<T extends ControlTemplate>(props: {
key={componentName} key={componentName}
className="w-full flex flex-col justify-center items-start gap-4" className="w-full flex flex-col justify-center items-start gap-4"
> >
<b>&lt;{componentName.slice(0, componentName.length - 5)}&gt;</b> <span className="font-thin opacity-50 w-full border-b border-b-current pb-2">
&lt;{componentName.slice(0, componentName.length - 5)}&gt;
</span>
{Object.entries(propEntries).map(([propName, propMeta]) => ( {Object.entries(propEntries).map(([propName, propMeta]) => (
<div <div
key={componentName + propName} key={componentName + propName}
@ -75,9 +77,9 @@ export function PlaygroundControl<T extends ControlTemplate>(props: {
> >
<Checkbox <Checkbox
onChange={(e) => { onChange={(e) => {
propMeta.onToggle(e.currentTarget.checked); propMeta.onToggle(!e.currentTarget.checked);
}} }}
checked={propMeta.disabled} checked={!propMeta.disabled}
/> />
{propMeta.disabled ? ( {propMeta.disabled ? (
<s className="opacity-50">{propName}</s> <s className="opacity-50">{propName}</s>