-

2026-05-19 21:09:56 +08:00
commit f3e6b95be9
78 changed files with 10099 additions and 0 deletions
@@ -0,0 +1,47 @@
+import React, { createContext, useContext } from 'react';
+
+export interface LayoutProps {
+  maxWidth?: string;
+  padding?: string;
+  gutter?: number;
+  theme?: 'light' | 'dark';
+  columns?: number;
+  children: React.ReactNode;
+}
+
+interface LayoutContextValue {
+  columns: number;
+  gutter: number;
+}
+
+const LayoutContext = createContext<LayoutContextValue>({
+  columns: 24,
+  gutter: 16,
+});
+
+export const useLayout = () => useContext(LayoutContext);
+
+export const Layout: React.FC<LayoutProps> = ({
+  maxWidth = '1440px',
+  padding = '1rem',
+  gutter = 16,
+  theme = 'light',
+  columns = 24,
+  children,
+}) => {
+  return (
+    <LayoutContext.Provider value={{ columns, gutter }}>
+      <div
+        className={`newspaper-layout ${theme === 'dark' ? 'dark' : ''}`}
+        style={{
+          maxWidth,
+          padding,
+          margin: '0 auto',
+          '--gutter': `${gutter}px`,
+        } as React.CSSProperties}
+      >
+        {children}
+      </div>
+    </LayoutContext.Provider>
+  );
+};