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

Update react, add some V2 components for V1 usage

Browse source
This commit is contained in:
DaneEveritt 2022-06-05 14:56:42 -04:00
parent 921da09a63
commit 1a5465dc34
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
21 changed files with 564 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

11
resources/scripts/components/elements/inputs/Checkbox.tsx Normal file
View file

@ -0,0 +1,11 @@
import React, { forwardRef } from 'react';
import classNames from 'classnames';
import styles from './styles.module.css';
export default forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(({ className, ...props }, ref) => (
<input
ref={ref}
className={classNames('form-input', styles.text_input, className)}
{...props}
/>
));

11
resources/scripts/components/elements/inputs/InputField.tsx Normal file
View file

@ -0,0 +1,11 @@
import React, { forwardRef } from 'react';
import classNames from 'classnames';
import styles from './styles.module.css';
export default forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(({ className, ...props }, ref) => (
<input
ref={ref}
className={classNames('form-input', styles.text_input, className)}
{...props}
/>
));

3
resources/scripts/components/elements/inputs/index.ts Normal file
View file

@ -0,0 +1,3 @@
export { default as Checkbox } from './Checkbox';
export { default as InputField } from './InputField';
export { default as styles } from './styles.module.css';

21
resources/scripts/components/elements/inputs/styles.module.css Normal file
View file

@ -0,0 +1,21 @@
.checkbox {
@apply w-4 h-4 rounded-sm border-neutral-500 bg-neutral-600 text-primary-500;
&:focus, &:active {
@apply ring-2 ring-primary-500 ring-offset-2 ring-offset-neutral-700;
}
&.indeterminate:checked {
@apply text-primary-500/50 border border-primary-500;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z' clip-rule='evenodd' /%3E%3C/svg%3E");
}
}
.text_input {
@apply transition-all duration-75;
@apply bg-neutral-800 border-neutral-600 rounded px-4 py-2 outline-none;
&:focus {
@apply border-blue-600 ring-2 ring-blue-500;
}
}