commit b6a9da2f1ee9cef6a445274aee8c27220628b6b5
parent f4c5856f0d61c9e970c8fee39147804378234750
Author: typable <contact@typable.dev>
Date: Thu, 15 Sep 2022 17:10:40 +0200
Updated example
Diffstat:
| M | example.html | | | 45 | +++++++++++++++++++++------------------------ |
1 file changed, 21 insertions(+), 24 deletions(-)
diff --git a/example.html b/example.html
@@ -8,6 +8,24 @@
const tlx = createTlx(createElement);
+ const Button = (props, $slot) => {
+ const styles = {
+ minWidth: '40px',
+ height: '40px',
+ border: 'none',
+ outline: 'none',
+ border: '1px solid #a3a3a3',
+ backgroundColor: props.disabled ? '#f5f5f5' : '#e5e5e5',
+ cursor: props.disabled ? 'default' : 'pointer',
+ fontSize: '1rem',
+ fontFamily: 'Inter',
+ ...props.styles
+ };
+ return tlx`
+ <button disabled="${props.disabled}" style="${styles}" @click="${() => props.onClick()}">${$slot}</button>
+ `;
+ }
+
const Counter = (props) => {
const [defaultValue, setDefaultValue] = useState(0);
const { min = 0, max = 999, value = defaultValue, setValue = setDefaultValue } = props ?? {};
@@ -19,46 +37,26 @@
return tlx`
<div style="display: inline-flex; width: 100%; border: 1px solid #a3a3a3; border-radius: 4px; overflow: hidden; height: 40px; box-sizing: border-box;">
${Button({
- text: '-',
onClick: () => setValue(value - 1),
styles: {
fontSize: '1.2rem',
borderWidth: '0px 1px 0px 0px'
},
disabled: value <= min
- })}
+ }, '-')}
<input type="text" @input="${(event) => validate(event.target.value)}" value="${value}" style="font-size: 1rem; text-align: center; border: none; flex: 1; min-width: 0; height: 40px; outline: none;">
${Button({
- text: '+',
onClick: () => setValue(value + 1),
styles: {
fontSize: '1.2rem',
borderWidth: '0px 0px 0px 1px'
},
disabled: value >= max
- })}
+ }, '+')}
</div>
`;
}
- const Button = (props) => {
- const styles = {
- minWidth: '40px',
- height: '40px',
- border: 'none',
- outline: 'none',
- border: '1px solid #a3a3a3',
- backgroundColor: props.disabled ? '#f5f5f5' : '#e5e5e5',
- cursor: props.disabled ? 'default' : 'pointer',
- fontSize: '1rem',
- fontFamily: 'Inter',
- ...props.styles
- };
- return tlx`
- <button disabled="${props.disabled}" style="${styles}" @click="${() => props.onClick()}">${props.text}</button>
- `;
- }
-
const App = () => {
const [quantity, setQuantity] = useState(1);
const isDisabled = quantity <= 0;
@@ -66,7 +64,6 @@
<div style="margin: 100px; display: flex; width: 150px; flex-direction: column; gap: 15px; align-items: flex-start;">
${Counter({ value: quantity, setValue: setQuantity })}
${Button({
- text: 'Add to cart',
styles: {
backgroundColor: isDisabled ? '#f5f5f5' : '#f97316',
borderColor: isDisabled ? '#d4d4d4' : '#c2410c',
@@ -76,7 +73,7 @@
},
onClick: () => alert(`Added ${quantity} ${quantity > 1 ? 'items' : 'item'} to the cart`),
disabled: isDisabled
- })}
+ }, 'Add to cart')}
</div>
`;
}
