💄 creation de nouveaux composants pour la page des articles

Author: mckenziearts

resources/views/components/articles/card-with-author.blade.php

@@ -0,0 +1 @@
+@props(['article'])

resources/views/components/articles/overview.blade.php

@@ -38,8 +38,8 @@
                             {{ $article->author->name }}
                         </a>
                     </p>
-                    <div class="flex space-x-1 text-sm text-skin-muted">
-                        <time datetime="{{ $article->created_at->format('Y-m-d') }}">{{ $article->created_at->format('j M, Y') }}</time>
+                    <div class="flex space-x-1 text-sm text-skin-base/60">
+                        <time datetime="{{ $article->publishedAt()->format('Y-m-d') }}">{{ $article->publishedAt()->format('j M, Y') }}</time>
                         <span aria-hidden="true">&middot;</span>
                         <span>{{ $article->readTime() }} min de lecture</span>
                     </div>

resources/views/components/tags.blade.php

@@ -1,7 +1,7 @@
 @props(['tags', 'isLowercase' => false, 'showHashTag' => false])
 
 <div x-data="{ selectedTag: '{{ $selectedTag ? $selectedTag->id() : null }}' }"
-     class="mt-4"
+     class="mt-5"
      aria-labelledby="posts-tags"
 >
     @foreach($tags as $tag)

resources/views/components/view-mode.blade.php

@@ -0,0 +1,19 @@
+@props(['mode', 'isViewMode' => false])
+
+<x-default-button
+    type="button"
+    wire:click="changeViewMode('{{ $mode }}')"
+    @class([
+        'border-skin-base shadow-none focus:ring-1',
+        'relative bg-skin-button-hover' => $isViewMode,
+        'bg-transparent' => ! $isViewMode,
+    ])
+>
+    @if($isViewMode)
+        <span class="flex absolute h-3 w-3 top-0 right-0 -mt-1 -mr-1">
+            <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
+        </span>
+    @endif
+
+        {{ $slot }}
+</x-default-button>