95 lines
2.9 KiB
TypeScript
95 lines
2.9 KiB
TypeScript
import { Button } from "@cms/ui/button"
|
|
|
|
type MenuOption = {
|
|
id: string
|
|
name: string
|
|
location: string
|
|
}
|
|
|
|
type PageOption = {
|
|
id: string
|
|
title: string
|
|
slug: string
|
|
}
|
|
|
|
type CreateNavigationItemFormProps = {
|
|
action: (formData: FormData) => void | Promise<void>
|
|
menus: MenuOption[]
|
|
pages: PageOption[]
|
|
}
|
|
|
|
export function CreateNavigationItemForm({ action, menus, pages }: CreateNavigationItemFormProps) {
|
|
return (
|
|
<form action={action} className="mt-4 space-y-3">
|
|
<label className="space-y-1">
|
|
<span className="text-xs text-neutral-600">Menu</span>
|
|
<select
|
|
name="menuId"
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
>
|
|
{menus.map((menu) => (
|
|
<option key={menu.id} value={menu.id}>
|
|
{menu.name} ({menu.location})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
<label className="space-y-1">
|
|
<span className="text-xs text-neutral-600">Label</span>
|
|
<input
|
|
name="label"
|
|
required
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
<div className="grid gap-3 md:grid-cols-2">
|
|
<label className="space-y-1">
|
|
<span className="text-xs text-neutral-600">Custom href</span>
|
|
<input
|
|
name="href"
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
<label className="space-y-1">
|
|
<span className="text-xs text-neutral-600">Linked page</span>
|
|
<select
|
|
name="pageId"
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
>
|
|
<option value="">(none)</option>
|
|
{pages.map((page) => (
|
|
<option key={page.id} value={page.id}>
|
|
{page.title} (/{page.slug})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div className="grid gap-3 md:grid-cols-2">
|
|
<label className="space-y-1">
|
|
<span className="text-xs text-neutral-600">Parent item id</span>
|
|
<input
|
|
name="parentId"
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
<label className="space-y-1">
|
|
<span className="text-xs text-neutral-600">Sort order</span>
|
|
<input
|
|
name="sortOrder"
|
|
defaultValue="0"
|
|
type="number"
|
|
min={0}
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<label className="inline-flex items-center gap-2 text-sm text-neutral-700">
|
|
<input name="isVisible" type="checkbox" value="true" defaultChecked className="size-4" />
|
|
Visible
|
|
</label>
|
|
<Button type="submit">Create item</Button>
|
|
</form>
|
|
)
|
|
}
|