Nils-Johan Gynther
89 lines
2.3 KiB
TypeScript
89 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
|
|
export default function ProductForm() {
|
|
const [isPending, setIsPending] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
return (
|
|
<form
|
|
onSubmit={async (e) => {
|
|
e.preventDefault();
|
|
setError(null);
|
|
|
|
const form = e.currentTarget;
|
|
const name = String((new FormData(form)).get('name') || '').trim();
|
|
|
|
setIsPending(true);
|
|
try {
|
|
const res = await fetch('/api/admin/create-product', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name }),
|
|
});
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}));
|
|
throw new Error(data?.error || 'Kunde inte skapa produkt');
|
|
}
|
|
form.reset();
|
|
window.dispatchEvent(new CustomEvent('product-created'));
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Okänt fel');
|
|
} finally {
|
|
setIsPending(false);
|
|
}
|
|
}}
|
|
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 style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>
|
|
Produktnamn
|
|
</label>
|
|
<input
|
|
name="name"
|
|
type="text"
|
|
required
|
|
placeholder="Till exempel Rödkål"
|
|
style={{
|
|
width: '100%',
|
|
padding: '0.75rem',
|
|
border: '1px solid #ddd',
|
|
borderRadius: '4px',
|
|
fontSize: '1rem',
|
|
boxSizing: 'border-box',
|
|
minHeight: '44px',
|
|
}}
|
|
/>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isPending}
|
|
style={{
|
|
padding: '0.75rem 1.5rem',
|
|
background: '#0070f3',
|
|
color: 'white',
|
|
border: 'none',
|
|
borderRadius: '4px',
|
|
cursor: 'pointer',
|
|
fontSize: '1rem',
|
|
minHeight: '44px',
|
|
fontWeight: 600,
|
|
}}
|
|
>
|
|
{isPending ? 'Sparar...' : 'Skapa produkt'}
|
|
</button>
|
|
|
|
{error ? <p style={{ color: 'crimson', margin: 0 }}>{error}</p> : null}
|
|
</form>
|
|
);
|
|
}
|