59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useTransition } from 'react';
|
|
import { createProduct } from './actions';
|
|
|
|
export default function ProductForm() {
|
|
const [isPending, startTransition] = useTransition();
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
return (
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
setError(null);
|
|
|
|
const form = e.currentTarget;
|
|
const formData = new FormData(form);
|
|
|
|
startTransition(async () => {
|
|
try {
|
|
await createProduct(formData);
|
|
form.reset();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Okänt fel');
|
|
}
|
|
});
|
|
}}
|
|
style={{
|
|
display: 'grid',
|
|
gap: '0.75rem',
|
|
padding: '1rem',
|
|
border: '1px solid #ddd',
|
|
borderRadius: '8px',
|
|
marginBottom: '1.5rem',
|
|
}}
|
|
>
|
|
<h2 style={{ margin: 0 }}>Skapa produkt</h2>
|
|
|
|
<label>
|
|
Produktnamn
|
|
<br />
|
|
<input
|
|
name="name"
|
|
type="text"
|
|
required
|
|
placeholder="Till exempel Rödkål"
|
|
style={{ width: '100%', padding: '0.5rem' }}
|
|
/>
|
|
</label>
|
|
|
|
<button type="submit" disabled={isPending} style={{ padding: '0.75rem' }}>
|
|
{isPending ? 'Sparar...' : 'Skapa produkt'}
|
|
</button>
|
|
|
|
{error ? <p style={{ color: 'crimson', margin: 0 }}>{error}</p> : null}
|
|
</form>
|
|
);
|
|
}
|