طراحی یک کامپوننت مدیا لایبری جامع برای نکست جی اس (nextjs)

🎯 پروژه: ساخت مدیا لایبرری با ارتباط با بک‌اند (Next.js + TypeScript) 📝 توضیح کلی: هدف از این پروژه، پیاده‌سازی یک Media Library تحت وب است که کاربران بتوانند از طریق آن فایل‌های مختلف (تصاویر، ویدیوها، اسناد و...) را مشاهده، آپلود، دسته‌بندی و مدیریت کنند. این لایبرری باید به صورت کامل با API بک‌اند ارتباط داشته باشد و اطلاعات مربوط به فایل‌ها را از سرور دریافت و به‌روزرسانی کند. 🛠 تکنولوژی‌های مورد نیاز: Next.js (نسخه 13 یا 14+ با App Router) TypeScript Tailwind CSS / Shadcn UI React Query (برای مدیریت داده‌های async و کش) React Hook Form / Zod (برای فرم‌ها) Axios یا fetch (برای درخواست‌های API) Drag & Drop (dnd-kit یا react-dropzone) برای آپلود ساده‌تر 📦 امکانات مورد انتظار: 1. نمایش گالری مدیا نمایش فایل‌های دریافت‌شده از API با دسته‌بندی (مثلاً: تصاویر محصولات، بنرها، فایل‌های PDF) نمایش پیش‌نمایش (thumbnail)، سایز فایل، نام فایل و تاریخ آپلود پشتیبانی از Grid / List View 2. آپلود فایل جدید امکان آپلود با drag & drop یا دکمه "انتخاب فایل" اتصال به API برای آپلود فایل (با ارسال FormData) نمایش وضعیت آپلود (در حال ارسال، موفق، خطا) پس از آپلود موفق، ریفرش لیست فایل‌ها (invalidate query) 3. جستجو و فیلتر فایل‌ها فیلتر بر اساس دسته‌بندی، نوع فایل (image, video, pdf, etc) جستجو بر اساس نام فایل 4. حذف یا ویرایش فایل‌ها ارسال درخواست حذف به API با تأیید کاربر نمایش پیغام موفقیت یا خطا 5. امکان استفاده در پروژه‌های دیگر طراحی به صورت Component-based Export کردن فایل‌های انتخاب‌شده (برای استفاده در فرم‌های دیگر)