react-layout-timbel
Version:
모던한 React 컴포넌트 라이브러리입니다. Layout, Card, Button 컴포넌트를 포함합니다.
6 lines • 1.17 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
export const Layout = ({ headerTitle = 'My Application', sidebarWidth = '250px', children = '메인 콘텐츠 영역입니다.', sidebarItems = ['홈', '대시보드', '사용자', '설정'], theme = 'light' }) => {
return (_jsxs("div", { className: `layout ${theme}`, children: [_jsxs("header", { className: "layout-header", children: [_jsx("h1", { children: headerTitle }), _jsxs("nav", { className: "header-nav", children: [_jsx("button", { className: "nav-button", children: "\uB85C\uADF8\uC778" }), _jsx("button", { className: "nav-button", children: "\uD68C\uC6D0\uAC00\uC785" })] })] }), _jsxs("div", { className: "layout-container", children: [_jsx("aside", { className: "layout-sidebar", style: { width: sidebarWidth }, children: _jsx("nav", { className: "sidebar-nav", children: sidebarItems.map((item, index) => (_jsx("a", { href: "#", className: "sidebar-item", children: item }, index))) }) }), _jsx("main", { className: "layout-main", children: _jsx("div", { className: "main-content", children: children }) })] })] }));
};
//# sourceMappingURL=index.js.map