import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import genshiroTheme from "../theme/genshiro.theme";
import { ThemeProvider } from "styled-components";
import { RoundProgress } from "./round-progress";
import { Coin } from "../icons";
export const RoundProgressStory = () => {
    return (_jsx(ThemeProvider, { theme: genshiroTheme, children: _jsxs("div", { style: { display: "grid", placeItems: "center" }, children: [_jsxs("div", { style: { display: "flex", columnGap: "20px", alignItems: "center" }, children: [_jsx(RoundProgress, { percent: 20, size: 40, children: _jsx(Coin, { token: "eq" }) }), _jsx(RoundProgress, { percent: 100, size: 80, children: _jsx(Coin, { token: "BNB" }) }), _jsx(RoundProgress, { percent: 14, size: 36, children: _jsx(Coin, { token: "EQD" }) }), _jsx(RoundProgress, { percent: 88, size: 54, children: _jsx(Coin, { token: "GENS" }) }), _jsx(RoundProgress, { percent: 88, size: 54, children: _jsx("span", { style: { fontSize: "24px" }, children: "+14" }) }), _jsx(RoundProgress, { percent: 88, size: 120, children: _jsx("img", { src: `https://memepedia.ru/wp-content/uploads/2020/11/soyjak-1.png`, style: { objectFit: "contain", borderRadius: "50%" }, width: "auto", height: 96 }) }), _jsx(RoundProgress, { percent: 88, size: 48, children: _jsx("span", { style: { fontSize: "24px" }, children: "+88" }) })] }), _jsx("img", { src: `https://memepedia.ru/wp-content/uploads/2020/11/soyboy-wojak-3.png` })] }) }));
};
export default {
    title: "New/RoundProgress",
    component: RoundProgressStory,
};
//# sourceMappingURL=round-progress.stories.js.map