Nils-Johan Gynther
55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
'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>
|
||
);
|
||
}
|