import { Head, Link, useForm } from '@inertiajs/react'; import { RichText } from '@/components/admin/rich-text'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; export default function TiersCreate() { const { data, setData, post, processing, errors } = useForm({ name: '', slug: '', description: '', price_usd: '', duration: 'annual', sort_order: 0, }); function handleNameChange(name: string) { setData((prev) => ({ ...prev, name, slug: prev.slug === '' || prev.slug === slugify(prev.name) ? slugify(name) : prev.slug, })); } function slugify(val: string) { return val.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, ''); } function submit(e: React.FormEvent) { e.preventDefault(); post('/admin/tiers'); } return ( <>

Tiers / Add Membership Tier

Add Membership Tier

Name * handleNameChange(e.target.value)} placeholder="e.g. Individual Annual" /> {errors.name &&

{errors.name}

}

Slug * setData('slug', slugify(e.target.value))} placeholder="individual-annual" /> {errors.slug &&

{errors.slug}

}

Description setData('description', v)} height={200} /> {errors.description &&

{errors.description}

}

Price (USD) * setData('price_usd', e.target.value)} placeholder="0.00" /> {errors.price_usd &&

{errors.price_usd}

}

Duration * {errors.duration &&

{errors.duration}

}

Sort Order setData('sort_order', Number(e.target.value))} /> {errors.sort_order &&

{errors.sort_order}

}

); }