phase 6 ,7,9

frontend/src/components/shared/layouts/EcommerceLayout.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import './layouts.css';
+
+export interface EcommerceLayoutProps {
+  header?: ReactNode;
+  navigation?: ReactNode;
+  sidebar?: ReactNode;
+  mainContent: ReactNode;
+  footer?: ReactNode;
+}
+
+export function EcommerceLayout({ 
+  header, 
+  navigation,
+  sidebar, 
+  mainContent,
+  footer 
+}: EcommerceLayoutProps) {
+  return (
+    <div className="shared-layout shared-layout--ecommerce">
+      {header && <header className="shared-layout__header">{header}</header>}
+      {navigation && <nav className="shared-layout__navigation">{navigation}</nav>}
+      <div className="shared-layout__content">
+        {sidebar && <aside className="shared-layout__sidebar">{sidebar}</aside>}
+        <main className="shared-layout__main">{mainContent}</main>
+      </div>
+      {footer && <footer className="shared-layout__footer">{footer}</footer>}
+    </div>
+  );
+}
+