Use different icons for each resource type

resources/views/components/resource-card.blade.php

@@ -10,21 +10,20 @@
 
 @php
     $typeStyles = [
-        'video' => ['icon' => 'video', 'class' => 'bg-tint-purple text-accent'],
-        'printable' => ['icon' => 'check', 'class' => 'bg-tint-blue text-primary'],
-        'template' => ['icon' => 'clipboard', 'class' => 'bg-tint-purple/70 text-accent'],
-        'guide' => ['icon' => 'book', 'class' => 'bg-tint-blue text-primary'],
-        'document' => ['icon' => 'file', 'class' => 'bg-surface-muted text-muted'],
-        'material' => ['icon' => 'file', 'class' => 'bg-tint-blue/50 text-navy'],
+        'guide' => ['class' => 'bg-tint-blue text-primary', 'icon' => 'M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253'],
+        'document' => ['class' => 'bg-surface-muted text-navy', 'icon' => 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'],
+        'video' => ['class' => 'bg-tint-purple text-accent', 'icon' => 'M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z'],
+        'printable' => ['class' => 'bg-tint-blue/70 text-primary', 'icon' => 'M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z'],
+        'online' => ['class' => 'bg-tint-purple/60 text-navy', 'icon' => 'M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9'],
     ];
     $style = $typeStyles[$type] ?? $typeStyles['document'];
 @endphp
 
 <a href="{{ $url }}" {{ $attributes->merge(['class' => 'block bg-white rounded-lg border border-[color:var(--color-border)] p-6 hover:border-accent hover:shadow-lg transition-all']) }}>
     <div class="flex items-start gap-4">
-        <div class="p-3 rounded-lg shrink-0 {{ $style['class'] }}">
+        <div data-resource-icon="{{ $type }}" class="p-3 rounded-lg shrink-0 {{ $style['class'] }}">
             <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $style['icon'] }}"/>
             </svg>
         </div>
         <div class="flex-1 min-w-0">

tests/Feature/ResourceTypeFilterTest.php

@@ -15,6 +15,32 @@
         ->assertSee('Materiale Online/Social-media', false);
 });
 
+test('resource cards use a different icon for each type', function () {
+    Resource::factory()->create([
+        'title_en' => 'Icon video resource',
+        'type' => ResourceType::Video,
+        'status' => ResourceStatus::Published,
+        'published_at' => now(),
+    ]);
+
+    Resource::factory()->create([
+        'title_en' => 'Icon online resource',
+        'type' => ResourceType::Online,
+        'status' => ResourceStatus::Published,
+        'published_at' => now(),
+    ]);
+
+    Livewire::test('pages::resources-index')
+        ->set('search', 'Icon video resource')
+        ->assertSee('data-resource-icon="video"', false)
+        ->assertSee('bg-tint-purple text-accent', false);
+
+    Livewire::test('pages::resources-index')
+        ->set('search', 'Icon online resource')
+        ->assertSee('data-resource-icon="online"', false)
+        ->assertSee('M21 12a9 9 0 01-9 9', false);
+});
+
 test('resource type filter matches the selected label', function () {
     $video = Resource::factory()->create([
         'title_en' => 'Video type filter',