u

src/components/article/ArticleView.jsx

@@ -3,6 +3,7 @@ import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
 import Typography from '@mui/material/Typography';
 import SingleLineTextEdit from '../SingleLineTextEdit';
+import ArticlePhotoTile from './ArticlePhotoTile';
 import { article } from '../../api';
 import { EditablePanelTile, PanelTile, PanelTileGrid } from '../panels';
 import { requireObject } from '../../utils/apiShape';
@@ -32,20 +33,6 @@ function PanelValue({ label, children }) {
   );
 }
 
-function ArticlePhoto() {
-  return (
-    <Box
-      sx={{
-        width: 200,
-        height: 200,
-        maxWidth: '100%',
-        bgcolor: 'action.hover',
-        borderRadius: 2,
-      }}
-    />
-  );
-}
-
 const headerTileSx = {
   minHeight: 0,
 };
@@ -155,9 +142,14 @@ export default function ArticleView({ article: articleData, onArticleUpdated })
         )}
       />
 
-      <PanelTile wide={1} tileKey={PANEL_TILE_KEYS.photo} minHeight={0} sx={headerTileSx}>
-        <ArticlePhoto />
-      </PanelTile>
+      <ArticlePhotoTile
+        wide={1}
+        tileKey={PANEL_TILE_KEYS.photo}
+        minHeight={0}
+        sx={headerTileSx}
+        article={articleData}
+        onArticleUpdated={onArticleUpdated}
+      />
 
       <PanelTile wide={1} tileKey={PANEL_TILE_KEYS.stock} title="Bestand">
         <PanelValue>