-

2026-05-19 21:09:56 +08:00
commit f3e6b95be9
78 changed files with 10099 additions and 0 deletions
@@ -0,0 +1,43 @@
+import React from 'react';
+import { calculateSpanWidth } from '@newspaperui/utils';
+import { useSection } from '../Section/Section';
+import { Caption } from '../Text/Caption';
+
+export interface FigureProps {
+  src: string;
+  alt: string;
+  caption?: string;
+  span?: number;
+  children?: React.ReactNode;
+}
+
+export const Figure: React.FC<FigureProps> = ({
+  src,
+  alt,
+  caption,
+  span = 1,
+  children,
+}) => {
+  const section = useSection();
+  const width = calculateSpanWidth(span, section.columns);
+
+  return (
+    <figure
+      className="newspaper-figure"
+      style={{ width, margin: 0 }}
+      data-span={span}
+    >
+      <img
+        src={src}
+        alt={alt}
+        style={{
+          width: '100%',
+          height: 'auto',
+          display: 'block',
+        }}
+      />
+      {caption && <Caption>{caption}</Caption>}
+      {children}
+    </figure>
+  );
+};