import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import UncontrolledTransition from "../UncontrolledTransition";
import Button from "../Button";
function colorGen() {
    return [255 * Math.random(), 255 * Math.random(), 255 * Math.random()];
}
export default function Example() {
    const [color, setColor] = useState(colorGen);
    const rgb = `rgb(${color.join(",")})`;
    return (_jsx(UncontrolledTransition, { children: _jsxs("div", { style: {
                width: "100vw",
                height: "100vh",
                backgroundColor: rgb,
                textAlign: "center",
            }, children: [_jsx(Button, { variant: "filled", onClick: () => setColor(colorGen()), children: "Click to transition" }), _jsx("h2", { children: "RGB" }), _jsx("p", { children: color[0].toFixed(0) }), _jsx("p", { children: color[1].toFixed(0) }), _jsx("p", { children: color[2].toFixed(0) })] }, color.join("")) }));
}
//# sourceMappingURL=UncontrolledTransition.sample.js.map