StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Apply new eslint rules; default to prettier for styling

Browse source
This commit is contained in:
DaneEveritt 2022-06-26 15:13:52 -04:00
parent f22cce8881
commit dc84af9937
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
218 changed files with 3876 additions and 3564 deletions
Download patch file Download diff file Expand all files Collapse all files

53
resources/scripts/components/elements/Switch.tsx
View file

@ -8,7 +8,7 @@ import Input from '@/components/elements/Input';
const ToggleContainer = styled.div`
${tw`relative select-none w-12 leading-normal`};
& > input[type="checkbox"] {
& > input[type='checkbox'] {
${tw`hidden`};
&:checked + label {
@ -30,7 +30,7 @@ const ToggleContainer = styled.div`
right: calc(50% + 0.125rem);
//width: 1.25rem;
//height: 1.25rem;
content: "";
content: '';
transition: all 75ms ease-in;
}
}
@ -52,35 +52,28 @@ const Switch = ({ name, label, description, defaultChecked, readOnly, onChange,
return (
<div css={tw`flex items-center`}>
<ToggleContainer css={tw`flex-none`}>
{children
|| <Input
id={uuid}
name={name}
type={'checkbox'}
onChange={e => onChange && onChange(e)}
defaultChecked={defaultChecked}
disabled={readOnly}
/>
}
<Label htmlFor={uuid}/>
{children || (
<Input
id={uuid}
name={name}
type={'checkbox'}
onChange={(e) => onChange && onChange(e)}
defaultChecked={defaultChecked}
disabled={readOnly}
/>
)}
<Label htmlFor={uuid} />
</ToggleContainer>
{(label || description) &&
<div css={tw`ml-4 w-full`}>
{label &&
<Label
css={[ tw`cursor-pointer`, !!description && tw`mb-0` ]}
htmlFor={uuid}
>
{label}
</Label>
}
{description &&
<p css={tw`text-neutral-400 text-sm mt-2`}>
{description}
</p>
}
</div>
}
{(label || description) && (
<div css={tw`ml-4 w-full`}>
{label && (
<Label css={[tw`cursor-pointer`, !!description && tw`mb-0`]} htmlFor={uuid}>
{label}
</Label>
)}
{description && <p css={tw`text-neutral-400 text-sm mt-2`}>{description}</p>}
</div>
)}
</div>
);
};