24 lines
914 B
JavaScript
24 lines
914 B
JavaScript
import "bulma";
|
|
import {useContext, useState} from "react";
|
|
import styles from './Item.module.css';
|
|
import AppInfoCtx from "./AppInfoCtx.js";
|
|
|
|
export default function Item({pos, callback}) {
|
|
let [loading, setLoading] = useState(false);
|
|
const appInfo = useContext(AppInfoCtx);
|
|
return (<li className={'my-4 ' + styles.item}>
|
|
<div>
|
|
<div style={{"display": "inline-block"}} className="box m-4"><span>Item {pos}</span></div>
|
|
<button className={"button is-success m-4" + (loading ? " is-loading" : "")} onClick={() => {
|
|
setLoading(true);
|
|
setTimeout(() => {
|
|
callback('Clicked ' + pos);
|
|
setLoading(false);
|
|
}, 1000)
|
|
}}>Click me test 1 + 2 + 3
|
|
</button>
|
|
<button className="delete"/>
|
|
<span>App info: {appInfo}</span>
|
|
</div>
|
|
</li>);
|
|
} |