Initial commit

resources/views/components/issue/timeline.blade.php

@@ -0,0 +1,47 @@
+@props(['issue'])
+
+<div class="flow-root">
+    <div class="-mb-8">
+        <!-- Timeline items -->
+        @php
+        $statuses = [
+            'new' => ['label' => __('New'), 'reached' => true],
+            'assigned' => ['label' => __('Assigned'), 'reached' => in_array($issue->status, ['assigned', 'in_progress', 'review', 'closed'])],
+            'in_progress' => ['label' => __('In Progress'), 'reached' => in_array($issue->status, ['in_progress', 'review', 'closed'])],
+            'review' => ['label' => __('Review'), 'reached' => in_array($issue->status, ['review', 'closed'])],
+            'closed' => ['label' => __('Closed'), 'reached' => $issue->status === 'closed'],
+        ];
+        @endphp
+
+        @foreach($statuses as $status => $data)
+            <div class="relative pb-8 {{ $loop->last ? 'pb-0' : '' }}">
+                @if(!$loop->last)
+                    <span class="absolute left-4 top-4 -ml-px h-full w-0.5 {{ $data['reached'] ? 'bg-indigo-600 dark:bg-indigo-400' : 'bg-gray-300 dark:bg-gray-600' }}" aria-hidden="true"></span>
+                @endif
+
+                <div class="relative flex space-x-3">
+                    <div>
+                        @if($data['reached'])
+                            <span class="h-8 w-8 rounded-full bg-indigo-600 dark:bg-indigo-500 flex items-center justify-center ring-8 ring-white dark:ring-gray-800">
+                                <svg class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
+                                </svg>
+                            </span>
+                        @else
+                            <span class="h-8 w-8 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center ring-8 ring-white dark:ring-gray-800">
+                                <span class="h-2.5 w-2.5 rounded-full bg-gray-100 dark:bg-gray-500"></span>
+                            </span>
+                        @endif
+                    </div>
+                    <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
+                        <div>
+                            <p class="text-sm {{ $data['reached'] ? 'text-gray-900 dark:text-gray-100 font-medium' : 'text-gray-500 dark:text-gray-400' }}">
+                                {{ $data['label'] }}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        @endforeach
+    </div>
+</div>