-

packages/components/src/Media/Figure.tsx

@@ -1,43 +1,35 @@
-import React from 'react';
-import { calculateSpanWidth } from '@newspaperui/utils';
-import { useSection } from '../Section/Section';
-import { Caption } from '../Text/Caption';
+'use client';
+import React, { CSSProperties } from 'react';
+import { clampSpan, cx } from '@newspaperui/utils';
+import { useSection } from '../layout/Section';
+import { Caption } from '../text/Caption';
 
 export interface FigureProps {
   src: string;
   alt: string;
   caption?: string;
+  credit?: string;
   span?: number;
-  children?: React.ReactNode;
+  className?: string;
+  style?: CSSProperties;
 }
 
 export const Figure: React.FC<FigureProps> = ({
-  src,
-  alt,
-  caption,
-  span = 1,
-  children,
+  src, alt, caption, credit, span, className, style,
 }) => {
   const section = useSection();
-  const width = calculateSpanWidth(span, section.columns);
-
+  const cols = span ? clampSpan(span, section.columns) : undefined;
   return (
     <figure
-      className="newspaper-figure"
-      style={{ width, margin: 0 }}
-      data-span={span}
+      className={cx('nui-figure nui-avoid-break', className)}
+      style={{
+        margin: 0,
+        gridColumn: cols ? `span ${cols}` : undefined,
+        ...style,
+      }}
     >
-      <img
-        src={src}
-        alt={alt}
-        style={{
-          width: '100%',
-          height: 'auto',
-          display: 'block',
-        }}
-      />
-      {caption && <Caption>{caption}</Caption>}
-      {children}
+      <img src={src} alt={alt} style={{ display: 'block', width: '100%', height: 'auto' }} />
+      {(caption || credit) && <Caption credit={credit}>{caption}</Caption>}
     </figure>
   );
 };