@kadconsulting/dry
Version:
KAD Reusable Component Library
16 lines • 1.43 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from 'react';
import './FancyCustomComponent.scss';
const FancyCustomComponent = () => {
const [count, setCount] = useState(0);
const [showMessage, setShowMessage] = useState(false);
useEffect(() => {
const timer = setTimeout(() => {
setShowMessage(true);
}, 2000);
return () => clearTimeout(timer);
}, []);
return (_jsx("div", { className: 'fancyCustomComponent', children: _jsxs("div", { className: 'document', children: [_jsx("h2", { children: "Fancy Custom Component" }), _jsx("p", { children: "This component uses enhanced styles from Document.scss" }), _jsx("span", { className: 'tag', children: "Custom Tag" }), _jsxs("button", { onClick: () => setCount(count + 1), children: ["Click me: ", count] }), showMessage && (_jsx("div", { className: 'message-box fade-in', children: _jsx("p", { children: "This message appears after 2 seconds!" }) })), _jsxs("div", { children: [_jsx("h3", { children: "Sample List" }), _jsxs("ul", { children: [_jsx("li", { children: "Item 1" }), _jsx("li", { children: "Item 2" }), _jsx("li", { children: "Item 3" })] })] }), _jsx("div", { className: 'chart-placeholder', children: _jsx("p", { children: "Placeholder for a chart or image" }) })] }) }));
};
export default FancyCustomComponent;
//# sourceMappingURL=FancyCustomComponent.js.map