mt-flowbite-react/lib/esm/store/demo/components.js

Official React components built for Flowbite and Tailwind CSS

'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Demo3GlobalProvider, Demo3Provider, useDemo3GlobalStore, useDemo3Store } from "@/store/demo/demo.slice";
import { Button } from "@/components/ui/button";
import { random } from "lodash-es";
/**
 * 练习 基于 zustand context 的嵌套Context 以及 全局 Context 之间的交互逻辑。
 * @returns
 */
export const DemoComponent = () => {
    return (_jsx("div", { className: "w-full", children: _jsxs(Demo3GlobalProvider, { id: "g", children: [_jsxs("div", { className: "bg-red-300 opacity-50 border-2 border-black", children: [_jsx("h1", { className: "font-bold", children: " (\u5168\u5C401) g-1 " }), _jsx(Demo3GlobalDebug, {})] }), _jsxs("div", { className: "bg-red-300 opacity-50 border-2 border-black", children: [_jsx("h1", { className: "font-bold", children: "(\u5168\u5C402) g-2 " }), _jsx(Demo3GlobalDebug, {})] }), _jsxs(Demo3Provider, { id: "a", children: [_jsxs("div", { className: "bg-yellow-300 p-2", children: [_jsx("h1", { className: "font-bold", children: " a-1 " }), _jsx(Demo3EmbeddedDebug, {})] }), _jsxs("div", { className: "bg-yellow-600 p-2", children: [_jsx("h1", { className: "font-bold", children: " a-2 " }), _jsx(Demo3EmbeddedDebug, {})] }), _jsx("div", { className: "bg-blue-700 font-mono border-2 border-red-600", children: _jsxs(Demo3Provider, { id: "b", children: [_jsx("h1", { className: "font-bold", children: "b-1" }), _jsx(Demo3EmbeddedDebug, {}), _jsx("div", { className: "bg-blue-100 opacity-50 p-4 border", children: _jsxs(Demo3Provider, { id: "b-1-2", children: [_jsx("h1", { className: "font-bold", children: "b-2" }), _jsx(Demo3EmbeddedDebug, {}), _jsx("div", { className: "bg-blue-200 opacity-30 p-4 border", children: _jsxs(Demo3Provider, { id: "b-1-2-3", children: [_jsx("h1", { className: "font-bold", children: "b-1-2-3" }), _jsx(Demo3EmbeddedDebug, {})] }) }), _jsxs("div", { className: "opacity-80 border-2 border-black", children: [_jsx("h1", { className: "font-bold", children: "(\u5168\u5C403) g-3\uFF0C\u8BBE\u7F6E\u8FD9\u91CC\u7684\u503C\u5E94\u8BE5\u53EF\u4EE5\u5F71\u54CD\u5168\u5C40\u7684context \u7684\u503C " }), _jsx(Demo3EmbeddedDebug, {}), _jsx(Demo3GlobalDebug, {})] })] }) })] }) }), _jsx("div", { className: "bg-blue-700 font-mono", children: _jsxs(Demo3Provider, { children: [_jsx("h1", { className: "font-bold", children: "c-1" }), _jsx(Demo3EmbeddedDebug, {})] }) })] })] }) }));
};
//
export const Demo3EmbeddedDebug = () => {
    const id = useDemo3Store(x => x.id);
    const title = useDemo3Store(x => x.title);
    const setTitle = useDemo3Store(x => x.setTitle);
    return (_jsx("div", { children: _jsxs(Button, { onClick: () => {
                setTitle(random(1, 999999999));
            }, children: ["\u8BBE\u7F6E\u503C: ", id, ":", title] }) }));
};
export const Demo3GlobalDebug = () => {
    const g_id = useDemo3GlobalStore(x => x.id);
    const g_title = useDemo3GlobalStore(x => x.title);
    const g_setTitle = useDemo3GlobalStore(x => x.setTitle);
    return (_jsx("div", { className: "bg-red-200 opacity-70", children: _jsxs(Button, { onClick: () => {
                g_setTitle(random(1, 999999999));
            }, children: ["\u8BBE\u7F6E\u503CGlobal:", _jsxs("span", { className: "bg-blue-600 p-2", children: ["gid:", g_id, ":", g_title] })] }) }));
};