37 lines
1.5 KiB
PHP
37 lines
1.5 KiB
PHP
@props([
|
|
'model' => 'body',
|
|
'label' => 'Details',
|
|
'placeholder' => 'Describe the ticket, include steps to reproduce, expected result, actual result and any useful technical details.',
|
|
'rows' => 10,
|
|
])
|
|
|
|
<div class="space-y-2">
|
|
<label for="{{ $model }}-editor" class="block text-sm font-semibold text-zinc-200">
|
|
{{ $label }}
|
|
</label>
|
|
|
|
<div class="overflow-hidden rounded-2xl border border-zinc-700 bg-zinc-950 shadow-sm">
|
|
<div class="flex flex-wrap items-center gap-2 border-b border-zinc-700 bg-zinc-900/80 px-4 py-2 text-sm text-zinc-300">
|
|
<span class="rounded-lg bg-zinc-800 px-2 py-1 font-semibold text-zinc-100">Spellcheck enabled</span>
|
|
<span class="text-zinc-500">Use Markdown for formatting, lists, quotes, code and links.</span>
|
|
</div>
|
|
|
|
<textarea
|
|
id="{{ $model }}-editor"
|
|
wire:model.defer="{{ $model }}"
|
|
rows="{{ $rows }}"
|
|
placeholder="{{ $placeholder }}"
|
|
spellcheck="true"
|
|
autocorrect="on"
|
|
autocomplete="off"
|
|
autocapitalize="sentences"
|
|
inputmode="text"
|
|
class="block min-h-[14rem] w-full resize-y border-0 bg-zinc-950 px-5 py-4 text-base leading-7 text-zinc-100 placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
></textarea>
|
|
</div>
|
|
|
|
<p class="text-xs font-semibold text-zinc-400">
|
|
Browser spellcheck is handled by the native editor and remains active after punctuation such as commas.
|
|
</p>
|
|
</div>
|