64 lines
3.8 KiB
PHP
64 lines
3.8 KiB
PHP
<x-app-layout>
|
|
<x-slot name="header">
|
|
<div>
|
|
<p class="text-sm font-medium uppercase tracking-wider text-indigo-600">{{ __('Categories') }}</p>
|
|
<h2 class="text-2xl font-semibold leading-tight text-gray-900">
|
|
{{ __('Create Category') }}
|
|
</h2>
|
|
</div>
|
|
</x-slot>
|
|
|
|
<div class="py-10">
|
|
<div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
|
|
<section class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
|
|
<div class="border-b border-gray-100 bg-gradient-to-r from-indigo-50 via-fuchsia-50 to-amber-50 px-6 py-5">
|
|
<h3 class="text-lg font-semibold text-gray-900">{{ __('Category Details') }}</h3>
|
|
<p class="mt-1 text-sm text-gray-600">{{ __('Choose a clear name and a color that stands out in lists.') }}</p>
|
|
</div>
|
|
|
|
<form method="POST" action="{{ route('category.store') }}" class="space-y-6 p-6">
|
|
@csrf
|
|
|
|
<div class="grid gap-6 md:grid-cols-2">
|
|
<div>
|
|
<x-input-label for="name" :value="__('Name')" />
|
|
<x-text-input id="name" class="mt-2 block w-full" type="text" name="name" :value="old('name')" required autofocus autocomplete="off" />
|
|
<x-input-error class="mt-2" :messages="$errors->get('name')" />
|
|
</div>
|
|
|
|
<div>
|
|
<x-input-label for="slug" :value="__('Slug')" />
|
|
<x-text-input id="slug" class="mt-2 block w-full" type="text" name="slug" :value="old('slug')" autocomplete="off" placeholder="auto-generated-from-name" />
|
|
<x-input-error class="mt-2" :messages="$errors->get('slug')" />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<x-input-label for="description" :value="__('Description')" />
|
|
<textarea id="description" name="description" rows="4" class="mt-2 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('description') }}</textarea>
|
|
<x-input-error class="mt-2" :messages="$errors->get('description')" />
|
|
</div>
|
|
|
|
<div>
|
|
<x-input-label for="color" :value="__('Color')" />
|
|
<div class="mt-2 flex items-center gap-3">
|
|
<input id="color" type="color" name="color" value="{{ old('color', '#4f46e5') }}" class="h-11 w-16 cursor-pointer rounded-lg border border-gray-300 bg-white p-1 shadow-sm">
|
|
<span class="text-sm text-gray-500">{{ __('Select a category accent color.') }}</span>
|
|
</div>
|
|
<x-input-error class="mt-2" :messages="$errors->get('color')" />
|
|
</div>
|
|
|
|
<div class="flex flex-col-reverse gap-3 border-t border-gray-100 pt-6 sm:flex-row sm:items-center sm:justify-end">
|
|
<a href="{{ route('category.index') }}" class="inline-flex items-center justify-center rounded-lg border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 transition hover:bg-gray-50">
|
|
{{ __('Cancel') }}
|
|
</a>
|
|
<button type="submit" class="inline-flex items-center justify-center rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
|
|
{{ __('Save Category') }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</x-app-layout>
|