PrimeNG 20 Showcase Demo

🎨 PrimeNG 20 Component Showcase - Kod göster/gizle ve kopyalama özellikleri ile interaktif komponent vitrini

🚀 Özellikler

• ✅ Reusable Code Display Component - Kod tekrarını önleyen yapı
• ✅ Toggle Show/Hide - Kod bloklarını aç/kapat
• ✅ Copy to Clipboard - Tek tıkla kod kopyalama
• ✅ Syntax Highlighting - Renkli kod görünümü
• ✅ Toast Notifications - Başarı/hata bildirimleri
• ✅ PrimeNG 20 - En güncel PrimeNG bileşenleri
• ✅ Standalone Components - Modern Angular yapısı
• ✅ Data-Driven Architecture - Kolay örnek ekleme

📦 Kullanılan Teknolojiler

• Angular 18
• PrimeNG 20
• PrimeIcons 7
• TypeScript
• SCSS

🎯 Mimari

Code Display Component

// Reusable component - tüm showcase'lerde kullanılabilir
<app-code-display
  [code]="codeString"
  [label]="'HTML Template'"
  [language]="'html'"
/>

Showcase Data Service

// Merkezi veri yönetimi - yeni örnek eklemek çok kolay
getButtonExamples(): ShowcaseExample[] {
  return [
    {
      title: 'Basic Buttons',
      description: '...',
      codes: [...]
    }
  ];
}

📝 Yeni Örnek Eklemek

1. showcase-data.service.ts dosyasını aç
2. getButtonExamples() array'ine yeni bir obje ekle:

{
  title: 'Yeni Örnek',
  description: 'Açıklama...',
  codes: [
    {
      label: 'HTML Template',
      language: 'html',
      code: `<p-button label="Yeni" />`
    }
  ]
}

3. app.component.html'de @switch bloğuna yeni bir case ekle:

@case ('Yeni Örnek') {
  <p-button label="Yeni" />
}

🎨 Özelleştirme

Tema Değiştirme

src/styles.scss dosyasında tema importunu değiştir:

@import "primeng/resources/themes/lara-dark-blue/theme.css";

Custom Syntax Highlighting

code-display.component.ts dosyasında highlight* metodlarını düzenle

Yeni Dil Desteği

CodeBlock interface'ine yeni dil ekle:

language: 'typescript' | 'html' | 'css' | 'scss' | 'json'

🔧 Kod Tekrarını Önleme Stratejisi

Önceki Yaklaşım ❌

<!-- Her örnek için tekrarlanan kod -->
<div class="code-display">...</div>
<div class="code-display">...</div>
<div class="code-display">...</div>

Yeni Yaklaşım ✅

// Tek bir reusable component
<app-code-display [code]="..." />

// Data-driven approach
examples.forEach(example => render(example))

📚 Komponent Yapısı

src/
├── app/
│   ├── code-display.component.ts       # Reusable kod görüntüleme
│   ├── showcase-data.service.ts        # Örnek veri yönetimi
│   ├── app.component.ts                # Ana showcase container
│   ├── app.component.html              # Showcase template
│   └── app.component.scss              # Showcase stilleri
├── styles.scss                         # Global stiller
└── main.ts                            # Bootstrap

🚀 Geliştirme

npm install
npm start

📖 Daha Fazla Bilgi

• PrimeNG Dokümantasyonu
• Angular Dokümantasyonu

💡 İpuçları

1. Yeni Komponent Eklerken: Önce showcase-data.service.ts'e veri ekle
2. Stil Değişiklikleri: app.component.scss dosyasını kullan
3. Global Stiller: src/styles.scss dosyasını kullan
4. Kod Highlighting Geliştirme: code-display.component.ts'i düzenle

---

Made with ❤️ using PrimeNG 20