import { Head, useForm } from '@inertiajs/react'; import { ArrowLeft, LayoutTemplate, Plus } from 'lucide-react'; import InputError from '@/components/input-error'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Switch } from '@/components/ui/switch'; import AppLayout from '@/layouts/app-layout'; import adminRoutes from '@/routes/admin'; import type { BreadcrumbItem } from '@/types'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Admin', href: adminRoutes.dashboard().url }, { title: 'Homepage Configs', href: adminRoutes.homepage.index().url }, { title: 'New Client', href: adminRoutes.homepage.create().url }, ]; export default function HomepageCreate() { const { data, setData, post, processing, errors } = useForm({ label: '', client_key: '', is_active: true, }); function submit(e: React.FormEvent) { e.preventDefault(); post(adminRoutes.homepage.store().url); } function deriveKey(label: string) { return label .toLowerCase() .replace(/\s+/g, '-') .replace(/[^a-z0-9\-_]/g, ''); } return (

Create homepage configuration

Set up a new storefront workspace and start adding sections.

{ setData('label', e.target.value); if ( !data.client_key || data.client_key === deriveKey(data.label) ) { setData( 'client_key', deriveKey(e.target.value), ); } }} required />
setData('client_key', e.target.value) } required />

Lowercase letters, numbers, hyphens and underscores only. Used in API calls:{' '} GET /api/homepage?client=website

Make this workspace available through the homepage API.

setData('is_active', v)} />
); }