-

2026-05-20 01:30:49 +08:00
parent 7dded89537
commit 610805a374
42 changed files with 3451 additions and 0 deletions
@@ -0,0 +1,32 @@
+'use client';
+import React, { ReactNode, CSSProperties } from 'react';
+import { clampSpan, cx } from '@newspaperui/utils';
+import { useSection } from './Section';
+
+export interface ArticleProps {
+  span?: number;
+  breakable?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;
+}
+
+export const Article: React.FC<ArticleProps> = ({
+  span, breakable = true, className, style, children,
+}) => {
+  const section = useSection();
+  const cols = span ? clampSpan(span, section.columns) : section.columns;
+  return (
+    <article
+      className={cx('nui-article', className)}
+      style={{
+        gridColumn: `span ${cols}`,
+        breakInside: breakable ? 'auto' : 'avoid',
+        ...style,
+      }}
+      data-span={cols}
+    >
+      {children}
+    </article>
+  );
+};