"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", hr: "hr", li: "li", path: "path", pre: "pre", span: "span", svg: "svg", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "interactive-widgets-in-notes", children: [_jsx(_components.a, { className: "heading-link", href: "#interactive-widgets-in-notes", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Interactive Widgets in Notes"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "To-do lists with state (check/uncheck that persists)." }), "\n", _jsx(_components.li, { children: "Buttons to trigger actions (e.g., \"Start timer\", \"Generate idea\")." }), "\n", _jsx(_components.li, { children: "Input fields for quick notes or calculations." }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "language-react code-highlight", children: [_jsx(_components.span, { className: "code-line", children: "import { useState } from \"react\";\n" }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsx(_components.span, { className: "code-line", children: "export default function Counter() {\n" }), _jsx(_components.span, { className: "code-line", children: " const [count, setCount] = useState(0);\n" }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsx(_components.span, { className: "code-line", children: " return (\n" }), _jsx(_components.span, { className: "code-line", children: "

\n" }), _jsx(_components.span, { className: "code-line", children: "

Count: {count}

\n" }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsx(_components.span, { className: "code-line", children: "

\n" }), _jsx(_components.span, { className: "code-line", children: " );\n" }), _jsx(_components.span, { className: "code-line", children: "}\n" }), _jsx(_components.span, { className: "code-line", children: "\n" })] }) }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h2, { id: "data-visualization", children: [_jsx(_components.a, { className: "heading-link", href: "#data-visualization", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Data Visualization"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Embed charts/graphs directly into notes." }), "\n", _jsx(_components.li, { children: "Show progress tracking, budgets, sales stats, etc." }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "language-react code-highlight", children: [_jsx(_components.span, { className: "code-line", children: "import { LineChart, Line, XAxis, YAxis } from \"recharts\";\n" }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsx(_components.span, { className: "code-line", children: "const data = [\n" }), _jsx(_components.span, { className: "code-line", children: " { name: \"Jan\", value: 30 },\n" }), _jsx(_components.span, { className: "code-line", children: " { name: \"Feb\", value: 45 },\n" }), _jsx(_components.span, { className: "code-line", children: " { name: \"Mar\", value: 60 },\n" }), _jsx(_components.span, { className: "code-line", children: "];\n" }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsx(_components.span, { className: "code-line", children: "export default function ChartExample() {\n" }), _jsx(_components.span, { className: "code-line", children: " return (\n" }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsx(_components.span, { className: "code-line", children: " );\n" }), _jsx(_components.span, { className: "code-line", children: "}\n" })] }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "language-react code-highlight", children: [_jsx(_components.span, { className: "code-line", children: "import { useState, useEffect } from \"react\";\n" }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsx(_components.span, { className: "code-line", children: "function Pomodoro() {\n" }), _jsx(_components.span, { className: "code-line", children: " const [time, setTime] = useState(25 * 60);\n" }), _jsx(_components.span, { className: "code-line", children: " const [running, setRunning] = useState(false);\n" }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsx(_components.span, { className: "code-line", children: " useEffect(() => {\n" }), _jsx(_components.span, { className: "code-line", children: " if (!running) return;\n" }), _jsx(_components.span, { className: "code-line", children: " const interval = setInterval(() => setTime(t => t - 1), 1000);\n" }), _jsx(_components.span, { className: "code-line", children: " return () => clearInterval(interval);\n" }), _jsx(_components.span, { className: "code-line", children: " }, [running]);\n" }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsx(_components.span, { className: "code-line", children: " const minutes = Math.floor(time / 60);\n" }), _jsx(_components.span, { className: "code-line", children: " const seconds = time % 60;\n" }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsx(_components.span, { className: "code-line", children: " return (\n" }), _jsx(_components.span, { className: "code-line", children: "

\n" }), _jsx(_components.span, { className: "code-line", children: "

⏳ Pomodoro

\n" }), _jsx(_components.span, { className: "code-line", children: "

\n" }), _jsx(_components.span, { className: "code-line", children: " {minutes}:{seconds.toString().padStart(2, \"0\")}\n" }), _jsx(_components.span, { className: "code-line", children: "

\n" }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsx(_components.span, { className: "code-line", children: "

\n" }), _jsx(_components.span, { className: "code-line", children: " );\n" }), _jsx(_components.span, { className: "code-line", children: "}\n" }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsx(_components.span, { className: "code-line", children: "export default Pomodoro;\n" }), _jsx(_components.span, { className: "code-line", children: "\n" })] }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "language-react code-highlight", children: [_jsx(_components.span, { className: "code-line", children: "import {useState} from 'react';\n" }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsx(_components.span, { className: "code-line", children: "const habits = [\"Workout\", \"Read\", \"Meditate\"];\n" }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsx(_components.span, { className: "code-line", children: "export default function HabitTracker() {\n" }), _jsx(_components.span, { className: "code-line", children: "\tconst [done, setDone] = useState({});\n" }), _jsx(_components.span, { className: "code-line", children: "\t\n" }), _jsx(_components.span, { className: "code-line", children: "\tconst toggle = (habit) => {\n" }), _jsx(_components.span, { className: "code-line", children: "\t\tsetDone({...done, [habit]: !done[habit] });\n" }), _jsx(_components.span, { className: "code-line", children: "\t};\n" }), _jsx(_components.span, { className: "code-line", children: "\t\n" }), _jsx(_components.span, { className: "code-line", children: "\treturn (\n" }), _jsx(_components.span, { className: "code-line", children: "\t

\n" }), _jsx(_components.span, { className: "code-line", children: "

✅ Habits

\n" }), _jsx(_components.span, { className: "code-line", children: " {habits.map(habit => (\n" }), _jsx(_components.span, { className: "code-line", children: "

\n" }), _jsx(_components.span, { className: "code-line", children: " toggle(habit)}\n" }), _jsx(_components.span, { className: "code-line", children: " />\n" }), _jsx(_components.span, { className: "code-line", children: " {habit}\n" }), _jsx(_components.span, { className: "code-line", children: "

\n" }), _jsx(_components.span, { className: "code-line", children: " ))}\n" }), _jsx(_components.span, { className: "code-line", children: "

\n" }), _jsx(_components.span, { className: "code-line", children: "\t);\n" }), _jsx(_components.span, { className: "code-line", children: "}\n" })] }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-react code-highlight" }) })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };