Quick Start Guide

 1<div class="max-w-2xl mx-auto">
 2    <h3 class="text-2xl font-bold mb-6">
 3        {{ meerkat:comment_count /}} Comments
 4    </h3>
 5
 6    {{ meerkat:form }}
 7        <div class="space-y-3 mb-8">
 8            {{ if errors }}
 9                <ul class="text-sm text-red-600">
10                    {{ errors }}
11                        <li>{{ value /}}</li>
12                    {{ /errors }}
13                </ul>
14            {{ /if }}
15
16            {{ if success }}
17                <div class="text-sm text-green-600">{{ success /}}</div>
18            {{ /if }}
19
20            <label>
21                Name
22                <input type="text" name="name" placeholder="Name" class="w-full border border-gray-300 rounded p-2">
23            </label>
24
25            <label>
26                Email
27                <input type="email" name="email" placeholder="Email" class="w-full border border-gray-300 rounded p-2">
28            </label>
29
30            <label>
31                Comment
32                <textarea name="comment" placeholder="Add a comment..." rows="3"
33                          class="w-full border border-gray-300 rounded p-2"></textarea>
34            </label>
35
36            <button type="submit" class="bg-black text-white px-4 py-2 rounded">
37                Post Comment
38            </button>
39        </div>
40    {{ /meerkat:form }}
41
42    <div class="space-y-6">
43        {{ meerkat:comments }}
44            {{ if no_results }}
45                <p class="text-gray-500">No comments yet. Be the first to comment!</p>
46            {{ else }}
47                {{ partial:comment-item /}}
48            {{ /if }}
49        {{ /meerkat:comments }}
50    </div>
51</div>

 1<div class="max-w-2xl mx-auto">
 2    <h3 class="text-2xl font-bold mb-6">
 3        <s-meerkat:comment_count /> Comments
 4    </h3>
 5
 6    <s-meerkat:form>
 7        <div class="space-y-3 mb-8">
 8            @if (!empty($errors))
 9                <ul class="text-sm text-red-600">
10                    @foreach ($errors as $error)
11                        <li>{{ $error['value'] ?? $error }}</li>
12                    @endforeach
13                </ul>
14            @endif
15
16            @if(!empty($success))
17                <div class="text-sm text-green-600">{{ $success }}</div>
18            @endif
19
20            <label>
21                Name
22                <input type="text" name="name" placeholder="Name" class="w-full border border-gray-300 rounded p-2">
23            </label>
24
25            <label>
26                Email
27                <input type="email" name="email" placeholder="Email" class="w-full border border-gray-300 rounded p-2">
28            </label>
29
30            <label>
31                Comment
32                <textarea name="comment" placeholder="Add a comment..." rows="3"
33                          class="w-full border border-gray-300 rounded p-2"></textarea>
34            </label>
35
36            <button type="submit" class="bg-black text-white px-4 py-2 rounded">
37                Post Comment
38            </button>
39        </div>
40    </s-meerkat:form>
41
42    <div class="space-y-6">
43        <s-meerkat:comments>
44            @if (!empty($no_results))
45                <p class="text-gray-500">No comments yet. Be the first to comment!</p>
46            @else
47                @include('comment-item', get_defined_vars())
48            @endif
49        </s-meerkat:comments>
50    </div>
51</div>

 1<div>
 2    <div class="text-sm font-bold">{{ author_name }}</div>
 3    <div class="text-xs text-gray-500 mb-2">{{ created_at | relative }}</div>
 4    <div class="text-base">{{ comment_html }}</div>
 5
 6    {{ if has_replies }}
 7        <div class="ml-6 mt-4 space-y-4 border-l-2 border-gray-200 pl-4">
 8            {{ children }}
 9                {{ partial:comment-item /}}
10            {{ /children }}
11        </div>
12    {{ /if }}
13</div>

 1
 2<div>
 3    <div class="text-sm font-bold">{{ $author_name }}</div>
 4    <div class="text-xs text-gray-500 mb-2">{{ $created_at?->diffForHumans() }}</div>
 5    <div class="text-base">{!! $comment_html !!}</div>
 6
 7    @if (!empty($has_replies))
 8        <div class="ml-6 mt-4 space-y-4 border-l-2 border-gray-200 pl-4">
 9            @foreach ($children as $child)
10                @include('comment-item', $child)
11            @endforeach
12        </div>
13    @endif
14</div>

1<article class="max-w-5xl mx-auto px-3">
2    <section class="max-w-3xl mx-auto py-6 lg:py-12">
3        {{ partial:comments /}}
4    </section>
5
6    {{ if $settings:show_signup }}
7        {{ partial:sign-up }}
8    {{ /if }}
9</article>