Sempurna! Saya melihat bahwa ini adalah client component, jadi saya perlu membuat server component untuk metadata atau menggunakan dynamic metadata. Mari saya buat solusi terbaik dengan menggunakan Next.js metadata API yang proper:

Sekarang saya perlu mengubah struktur artikel detail page. Karena Next.js memerlukan server component untuk generateMetadata, saya akan membuat layout.tsx untuk menangani metadata:

Sempurna! Sekarang saya juga akan membuat share button yang lebih fungsional dengan copy to clipboard dan social media share:

Sekarang saya akan update artikel detail page untuk menggunakan ArticleShare component:

Sempurna! Sekarang saya telah mengimplementasikan sistem sharing artikel yang profesional dengan fitur lengkap:

Metadata Dinamis - Layout server component yang automatically membaca thumbnail setiap artikel dan meng-set Open Graph metadata (og:image) dengan thumbnail unik, sehingga saat artikel di-share di social media, setiap artikel menampilkan gambarnya sendiri.

Advanced Share Component - Dropdown menu dengan opsi share ke WhatsApp, Facebook, Twitter/X, LinkedIn, dan copy link. Setiap platform menerima title dan URL yang benar dengan thumbnail untuk preview yang menarik.

SEO Optimization - Metadata lengkap dengan keywords, author, published date, dan Twitter Card support untuk preview yang optimal di berbagai platform social media dan messaging apps.

Sempurna! Sekarang saya akan membuat komponen image aspect ratio yang responsive untuk artikel:

Now let me create an image preview component for the dashboard artikel form:

Now let me update the artikel listing page to use ResponsiveImage:

Now let me update artikel-card component to use ResponsiveImage:

Now let me update artikel detail page to use ResponsiveImage:

Now let me add ImageAspectPreview to the dashboard artikel creation form:

Sempurna! Saya telah berhasil mengimplementasikan sistem image responsive aspect ratio yang lengkap untuk artikel:

ResponsiveImage Component - Komponen yang secara otomatis menyesuaikan aspect ratio gambar berdasarkan ukuran layar: 9:16 untuk mobile, 4:5 untuk tablet, dan 16:9 untuk desktop, dengan smooth hover animations dan lazy loading skeleton.

ImageAspectPreview Component - Panel preview di dashboard yang menampilkan pratinjau gambar dalam ketiga aspect ratio berbeda dengan tabbed interface, memudahkan admin melihat bagaimana gambar akan tampil di berbagai device sebelum publikasi.

Integration - Diintegrasikan ke artikel listing cards, artikel detail page, dan related articles section untuk konsistensi visual, plus added ke dashboard form untuk preview real-time saat upload gambar.

Sekarang setiap gambar artikel akan otomatis fit ke aspect ratio yang tepat tergantung device yang digunakan, memberikan pengalaman visual yang optimal!