77 lines
3.8 KiB
PHP
77 lines
3.8 KiB
PHP
@props(['currentStep' => 1])
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex-1 relative">
|
|
<!-- Garis penghubung -->
|
|
<div class="absolute top-1/2 transform -translate-y-1/2 w-full h-0.5 bg-gray-200 dark:bg-gray-700"></div>
|
|
|
|
<!-- Steps -->
|
|
<div class="relative flex justify-between">
|
|
<!-- Step 1: Prioritas -->
|
|
<div class="step-item {{ $currentStep >= 1 ? 'active' : '' }}">
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-10 h-10 rounded-full flex items-center justify-center {{ $currentStep >= 1 ? 'bg-blue-600 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400' }}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<span class="mt-2 text-sm font-medium {{ $currentStep >= 1 ? 'text-blue-600 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400' }}">Prioritas</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 2: Kriteria -->
|
|
<div class="step-item {{ $currentStep >= 2 ? 'active' : '' }}">
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-10 h-10 rounded-full flex items-center justify-center {{ $currentStep >= 2 ? 'bg-blue-600 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400' }}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
|
</svg>
|
|
</div>
|
|
<span class="mt-2 text-sm font-medium {{ $currentStep >= 2 ? 'text-blue-600 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400' }}">Kriteria</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 3: Hasil -->
|
|
<div class="step-item {{ $currentStep >= 3 ? 'active' : '' }}">
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-10 h-10 rounded-full flex items-center justify-center {{ $currentStep >= 3 ? 'bg-blue-600 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400' }}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<span class="mt-2 text-sm font-medium {{ $currentStep >= 3 ? 'text-blue-600 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400' }}">Hasil</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.step-item {
|
|
z-index: 1;
|
|
background-color: white;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.step-item span {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.step-item .w-10 {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
|
|
.step-item .h-6 {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
}
|
|
}
|
|
|
|
.dark .step-item {
|
|
background-color: rgb(17, 24, 39);
|
|
}
|
|
</style>
|