u

src/components/article/boxes/ArticleViewStock.jsx

@@ -0,0 +1,38 @@
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { PanelTile } from '../../panels';
+import { PANEL_TILE_KEYS } from '../../../theme';
+import { formatStock } from '../../../pages/artikel/searchFormat';
+
+function PanelValue({ label, children }) {
+  if (children == null || children === '') return null;
+  return (
+    <Box sx={{ mb: 1 }}>
+      {label ? (
+        <Typography variant="caption" color="text.secondary" display="block">
+          {label}
+        </Typography>
+      ) : null}
+      <Typography variant="body2" component="div">
+        {children}
+      </Typography>
+    </Box>
+  );
+}
+
+const SECOND_ROW_MIN_HEIGHT = 220;
+
+export default function ArticleViewStock({ article: articleData }) {
+  return (
+    <PanelTile
+      wide={1}
+      tileKey={PANEL_TILE_KEYS.stock}
+      title="Bestand"
+      minHeight={SECOND_ROW_MIN_HEIGHT}
+    >
+      <PanelValue>
+        {articleData.stock != null ? formatStock(articleData.stock) : null}
+      </PanelValue>
+    </PanelTile>
+  );
+}