Muzibu - Component Listesi

17 Component - Sadece Birden Fazla Yerde Kullanılanlar

Component Nedir?

Basit Anlatım:
Component = Birden fazla yerde kullanılan hazır parça.
Mesela "albüm kartı" anasayfada da var, albümler sayfasında da var, favorilerde de var.
Bunu 3 yerde ayrı ayrı yazmak yerine → 1 component yap, 3 yerde kullan.

✅ Component Olmalı

  • • Albüm kartı → Anasayfa, albümler sayfası, favoriler (3 yer)
  • • Şarkı satırı → Albüm detay, playlist detay, favoriler (3 yer)
  • • Sağ tık menü → Her yerde kullanılıyor

❌ Component Olmamalı

  • • Albüm detay sayfası → Sadece 1 sayfa (albums/show.blade.php)
  • • Playlist detay sayfası → Sadece 1 sayfa (playlists/show.blade.php)
  • • Detay sayfaları zaten hazır, component'e gerek yok!

📊 Özet

17

Toplam Component

11

Kart Component

3

Universal

3

Modal

ŞARKI COMPONENTS (4 adet)

1. song-row

📍 Nerede Kullanılır?

  • ✓ albums/show.blade.php (şarkı listesi)
  • ✓ playlists/show.blade.php (şarkı listesi)
  • ✓ favorites/index.blade.php (liste modu)
  • ✓ genres/show.blade.php (top songs)

💻 Kod

<x-muzibu.song-row
    :song="$song"
    :index="1"
    :showCover="true"
    :showArtist="true"
/>

2. song-card

📍 Nerede Kullanılır?

  • ✓ home.blade.php (popüler şarkılar grid)
  • ✓ favorites/index.blade.php (grid modu)
  • ✓ search results (songs section)

💻 Kod

<x-muzibu.song-card
    :song="$song"
/>

3. song-queue-item

📍 Nerede Kullanılır?

  • ✓ queue-overlay.blade.php (çalma sırası)
  • • Tek yerde ama drag & drop olduğu için component

💻 Kod

<x-muzibu.song-queue-item
    :song="$song"
    :isPlaying="false"
/>

4. song-sidebar-item

📍 Nerede Kullanılır?

  • ✓ sidebar-right.blade.php (preview track list)
  • • Playlist/Album preview için

💻 Kod

<x-muzibu.song-sidebar-item
    :song="$song"
    :index="1"
/>

KART COMPONENTS (7 adet)

Albüm, Playlist, Sanatçı, Tür, Sektör, Radyo

5. album-card

📍 Kullanım:

  • • home.blade.php (featured)
  • • albums/index.blade.php
  • • favorites/index.blade.php
  • • artists/show.blade.php
<x-muzibu.album-card
    :album="$album"
/>

6. playlist-card

📍 Kullanım:

  • • home.blade.php (featured)
  • • playlists/index.blade.php
  • • playlists/my-playlists.blade.php
  • • favorites/index.blade.php
<x-muzibu.playlist-card
    :playlist="$playlist"
/>

7. playlist-quick-card

📍 Kullanım:

  • • home.blade.php (2x4 grid)
  • • Yatay kart (Spotify tarzı)
<x-muzibu.playlist-quick-card
    :playlist="$playlist"
/>

8. artist-card

📍 Kullanım:

  • • artists/index.blade.php
  • • search results
  • • Yuvarlak foto
<x-muzibu.artist-card
    :artist="$artist"
/>

9. genre-card

📍 Kullanım:

  • • home.blade.php
  • • genres/index.blade.php
  • • Gradient + emoji
<x-muzibu.genre-card
    :genre="$genre"
/>

10. sector-card

📍 Kullanım:

  • • sectors/index.blade.php
  • • Gradient + ikon
<x-muzibu.sector-card
    :sector="$sector"
/>

11. radio-card

📍 Kullanım:

  • • radios/index.blade.php
  • • Tıklayınca direkt çalar
<x-muzibu.radio-card
    :radio="$radio"
/>

UNIVERSAL COMPONENTS (3 adet)

Her yerde kullanılan genel parçalar

12. context-menu

📍 Kullanım:

  • ✓ Tüm kartlarda
  • ✓ Tüm satırlarda
  • ✓ Sağ tık + mobil long-press
@contextmenu.prevent="
  openMenu($event, 'song', $song)
"

13. empty-state

📍 Kullanım:

  • ✓ Tüm liste sayfalarında
  • ✓ Boş favoriler
  • ✓ Boş queue
<x-muzibu.empty-state
    icon="heart"
    title="Boş"
    message="Favori yok"
/>

14. loading-skeleton

📍 Kullanım:

  • ✓ Lazy loading grid
  • ✓ Sidebar preview
  • ✓ Liste yükleme
<x-muzibu.loading-skeleton
    type="card"
    count="6"
/>

MODAL COMPONENTS (3 adet)

Popup pencereler

15. rating-modal

Şarkıya puan verme (1-5 yıldız)

<x-muzibu.rating-modal
    :song="$song"
/>

16. playlist-select-modal

Hangi playlist'e eklenecek seç

<x-muzibu.playlist-select-modal
    :song="$song"
/>

17. create-playlist-modal

Yeni playlist oluştur

<x-muzibu.create-playlist-modal
/>

❌ DETAY SAYFALARI (Component DEĞİL!)

Bunlar zaten birer sayfa - direkt düzenlenecek, component yapılmayacak

Direkt Düzenlenecek Sayfalar:

  • albums/show.blade.php
  • playlists/show.blade.php
  • artists/show.blade.php
  • genres/show.blade.php
  • sectors/show.blade.php

Neden Component Değil?

  • Her biri sadece 1 yerde kullanılıyor
  • Zaten hazır sayfa dosyaları var
  • Component yapmak gereksiz karmaşıklık olur
  • Direkt sayfayı düzenlemek daha kolay

Bu Sayfalarda İçinde Kullanılacak Component'ler:

• albums/show.blade.php içinde → <x-muzibu.song-row /> kullanılacak

• playlists/show.blade.php içinde → <x-muzibu.song-row /> kullanılacak

• artists/show.blade.php içinde → <x-muzibu.album-card /> + <x-muzibu.song-row /> kullanılacak

HANGİ SIRADA YAPILACAK?

1

FAZ 1: En Çok Kullanılanlar (3-4 gün)

  • ✓ song-row → En çok kullanılan!
  • ✓ song-card
  • ✓ album-card
  • ✓ playlist-card
  • ✓ playlist-quick-card
  • ✓ context-menu → Universal
2

FAZ 2: Diğer Kartlar (2 gün)

  • ✓ artist-card
  • ✓ genre-card
  • ✓ sector-card
  • ✓ radio-card
3

FAZ 3: Özel Parçalar (2-3 gün)

  • ✓ song-queue-item
  • ✓ song-sidebar-item
  • ✓ empty-state
  • ✓ loading-skeleton
  • ✓ rating-modal
  • ✓ playlist-select-modal
  • ✓ create-playlist-modal

TOPLAM SÜRE

17 component yapılacak

7-9 GÜN

HEMEN BAŞLAMAK İÇİN

1

Git Branch

git checkout -b feature/muzibu-components
2

Klasör Oluştur

resources/views/components/muzibu/
3

İlk Component

song-row.blade.php ile başla

<!-- song-row.blade.php -->
<div class="flex items-center gap-3 p-2 hover:bg-white/5 rounded group">
    <span class="w-6 text-center">{{ $index }}</span>
    <img src="{{ $song->cover }}" class="w-10 h-10 rounded">
    <div class="flex-1">
        <div class="text-white">{{ $song->title }}</div>
        <div class="text-slate-400 text-sm">{{ $song->artist->name }}</div>
    </div>
    <span class="text-slate-500">{{ $song->duration }}</span>
</div>
4

Test Et

albums/show.blade.php içinde kullan:
<x-muzibu.song-row :song="$song" :index="$loop->iteration" />