feat: Add expandable section for creating products with integrated product form

2026-04-12 08:29:28 +02:00
parent f84ee39197
commit ea307e6a6c
6 changed files with 110 additions and 10 deletions
@@ -0,0 +1,54 @@
+'use client';
+
+import { useState } from 'react';
+import ProductForm from '../../inventory/ProductForm';
+
+export default function ExpandableCreateProductSection() {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <section
+      style={{
+        border: '2px solid #0070f3',
+        borderRadius: '8px',
+        marginBottom: '1.5rem',
+        overflow: 'hidden',
+      }}
+    >
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        style={{
+          width: '100%',
+          padding: '1rem',
+          background: '#0070f3',
+          color: 'white',
+          border: 'none',
+          fontSize: '1.1rem',
+          fontWeight: 600,
+          cursor: 'pointer',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          transition: 'background 0.2s',
+        }}
+        onMouseEnter={(e) => {
+          (e.target as HTMLElement).style.background = '#0059cc';
+        }}
+        onMouseLeave={(e) => {
+          (e.target as HTMLElement).style.background = '#0070f3';
+        }}
+      >
+        <span>➕ Skapa produkt</span>
+        <span style={{ fontSize: '1.5rem', transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }}>
+          ▼
+        </span>
+      </button>
+
+      {isExpanded && (
+        <div style={{ padding: '1rem', background: '#f9f9f9' }}>
+          <ProductForm />
+        </div>
+      )}
+    </section>
+  );
+}