Muzibu Card Component
Standardizasyon Analizi

7 Card component'in yapısal analizi ve düzeltme planı

Tarih

21 Aralık 2025

Toplam Component

7 Adet

Sorunlu Component

1 Kritik

🎯

Referans Component: Album Card

Tüm diğer card'lar bu yapıya göre standardize edilecektir. Bu şablon master pattern olarak kabul edilmiştir.

✅ Standart Yapı

▪

Wrapper: <a> tag

▪

Image Area: relative mb-4

→ Image direkt: w-full aspect-square object-cover rounded-lg
→ Ekstra wrapper YOK

▪

Play Button: bottom-2 right-2, w-12 h-12

→ Hover'da görünür (opacity-0 → opacity-100)
→ Transform: translate-y-2 → translate-y-0

▪

Favorite & Menu: top-2 right-2, z-10

→ Hover'da görünür

▪

Text Area: h-12 overflow-hidden pb-4

→ h3: title (text-sm leading-6 line-clamp-1)
→ p: subtitle (text-xs leading-6 line-clamp-1)

📋 Yapı Şeması

<a class="group bg-muzibu-gray hover:bg-gray-700
       rounded-lg px-4 pt-4 transition-all">

    <!-- IMAGE AREA -->
    <div class="relative mb-4">

        <!-- Direkt Image (EKSTRA WRAPPER YOK) -->
        <img class="w-full aspect-square
                   object-cover rounded-lg">

        <!-- Playing Badge (top-left, conditional) -->
        <span class="absolute top-2 left-2 z-10">

        <!-- Play Button (bottom-right, hover) -->
        <button class="absolute bottom-2 right-2
                      opacity-0 group-hover:opacity-100
                      w-12 h-12">

        <!-- Favorite + Menu (top-right, hover) -->
        <div class="absolute top-2 right-2 z-10
                   opacity-0 group-hover:opacity-100">

    </div>

    <!-- TEXT AREA (Fixed Height) -->
    <div class="h-12 overflow-hidden pb-4">
        <h3 class="text-sm leading-6 line-clamp-1">
        <p class="text-xs leading-6 line-clamp-1">
    </div>

</a>

🔍 Component Karşılaştırma Tablosu

Component	Wrapper Tag	Image Yapısı	Play Button	Text Area	Durum
Album (Referans)	<a> ✅	Direkt img ✅	w-12 h-12 ✅	h-12 ✅	REFERANS
Radio	<div> ⚠️	Ekstra wrapper! object-contain ❌	w-16 h-16 ❌ Overlay mode	h-12 ✅	KRİTİK
Artist	<a> ✅	rounded-full ✅ (Artist için doğru)	w-12 h-12 ✅	h-12 ✅	TAMAM
Genre	<a> ✅	Direkt img ✅	w-12 h-12 ✅	h-12 ✅	TAMAM
Playlist	<a> ✅	Direkt img ✅	w-12 h-12 ✅	h-12 ✅	TAMAM
Sector	<a> ✅	Direkt img ✅	w-12 h-12 ✅	h-12 ✅	TAMAM
Song	<div> ✅ (onclick için mantıklı)	Direkt img ✅	w-12 h-12 ✅	h-12 ✅	TAMAM

🚨

KRİTİK SORUN: Radio Card

❌ Sorun 1: Ekstra Image Wrapper

Radio card'da görsel kısmında ekstra bir div wrapper var. Bu, diğer tüm card'lardan farklı bir yapı oluşturuyor.

❌ YANLIŞ (Şu Anki Kod - Satır 47-52):

<!-- EKSTRA WRAPPER -->
<div class="w-full aspect-square bg-gradient-to-br
           from-gray-800 to-gray-900 rounded-lg
           flex items-center justify-center p-4
           shadow-lg overflow-hidden">

    <img class="w-full h-full object-contain">

</div>

✅ DOĞRU (Album Card Pattern):

<!-- Direkt image, ekstra wrapper YOK -->
<img src="..."
     class="w-full aspect-square
            object-cover rounded-lg
            shadow-lg">

❌ Sorun 2: Play Button Boyutu ve Yapısı

Radio card'da play button büyük overlay mode kullanıyor (w-16 h-16). Diğer tüm card'larda w-12 h-12 boyutunda bottom-right konumlu.

❌ YANLIŞ (Şu Anki Kod - Satır 72-79):

<!-- Büyük overlay mode -->
<div class="absolute inset-0 bg-black
           bg-opacity-0 group-hover:bg-opacity-50">
    <button class="w-16 h-16
                  scale-75 group-hover:scale-110">
</div>

✅ DOĞRU (Album Card Pattern):

<!-- Bottom-right simple button -->
<button class="absolute bottom-2 right-2
              opacity-0 group-hover:opacity-100
              transform translate-y-2
              group-hover:translate-y-0
              w-12 h-12">

⚠️ Ek Farklar (Minor)

1. Infinite Badge (Satır 60-62)

Radio'da her zaman görünür bir "♾️" badge var (top-2 left-2). Bu özel bir özellik olabilir, ama diğer card'larda yok. Kullanıcı onayı gerekebilir.

2. Z-index Farkı

Radio'da favorite/menu butonları z-20 kullanıyor, diğerleri z-10. Infinite badge ile çakışma önlemi olabilir.

🔧

Düzeltme Planı

Radio Card - Image Wrapper Kaldır

Dosya: resources/views/components/muzibu/radio-card.blade.php

Değişiklik:

• Satır 47-52: Ekstra wrapper div'ini kaldır
• Image'i direkt render et: w-full aspect-square object-cover rounded-lg
• object-contain → object-cover değiştir
• Fallback gradient'i image ile aynı seviyede kullan (if-else)

Radio Card - Play Button Standardize

Dosya: resources/views/components/muzibu/radio-card.blade.php

Değişiklik:

• Satır 72-79: Overlay div yapısını kaldır
• Album card pattern'ini kopyala: absolute bottom-2 right-2
• Boyut: w-16 h-16 → w-12 h-12
• Animation: translate-y-2 group-hover:translate-y-0 kullan
• Hover efekti: opacity-0 group-hover:opacity-100

Infinite Badge - Kullanıcı Onayı

Karar Gerekli: Radio card'ın "♾️" (infinite) badge'i özel bir özellik mi, yoksa kaldırılmalı mı?

İki Seçenek:

• Seçenek A: Koru (radio'nun sonsuz stream olduğunu gösterir, anlamlı)
• Seçenek B: Kaldır (diğer card'larda yok, tutarlılık için)

💡 Öneri:

Badge'i KORU, çünkü radio stream'leri gerçekten sonsuz sürer. Ama Playing Badge ile çakışma olmaması için z-index'ini doğru ayarla.

Test & Cache Temizleme

İşlemler:

• View cache temizle: php artisan view:clear
• Response cache temizle: php artisan responsecache:clear
• Tailwind rebuild: npm run prod
• Browser'da radyo sayfasını test et: https://muzibu.com/radios
• Hover efektlerini kontrol et (play button, favorite, menu)

✨

Beklenen Sonuç

🎨

Görsel Tutarlılık

• Tüm card'lar aynı layout yapısı
• Image görselleri aynı şekilde render
• Play button aynı boyut ve pozisyon
• Hover efektleri birebir aynı

🧹

Kod Temizliği

• Gereksiz wrapper'lar kaldırıldı
• Standart pattern tekrar kullanılabilir
• Yeni card ekleme kolay
• Bakım ve güncelleme basit

👤

Kullanıcı Deneyimi

• Tüm sayfalar aynı deneyim
• Öğrenme eğrisi azalır
• Profesyonel görünüm
• Müzik platformu standardı

📊 Muzibu Card Component Standardizasyon Analizi

🤖 Claude AI ile oluşturuldu • 21 Aralık 2025