frontend/src/components/plugin/PluginLayout.js

import React from 'react';
import PropTypes from 'prop-types';
import './PluginLayout.css';

const PluginLayout = ({ sidebar, children }) => (
  <div className="container mx-auto px-4 plugin-layout">

    <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">

      <aside className="lg:col-span-3 xl:col-span-2 plugin-sidebar">

        {sidebar}

      </aside>

      <main className="lg:col-span-9 xl:col-span-10 plugin-main-content">

        {children}

      </main>

    </div>

  </div>
);

PluginLayout.propTypes = {
  sidebar: PropTypes.node,
  children: PropTypes.node,
};

export default PluginLayout;