EmptyState

EmptyState, boş liste/boş sonuç/ilk kurulum gibi durumlarda tutarlı bir görünüm sağlar.

---

Import

import { EmptyState } from "@registry/components/ui/empty-state";

---

Props

• title: string (zorunlu)
• description: string (opsiyonel)
• icon: ReactNode (opsiyonel)
• primaryAction: { label: string; href: string } veya { label: string; onClick: () => void }
• secondaryAction: primaryAction ile aynı tip
• size: "sm" | "md" (default: md)
• className: string (opsiyonel)

---

Örnekler

Link aksiyonu (href)

import { EmptyState } from "@registry/components/ui/empty-state";
import { Archive } from "lucide-react";

<EmptyState
  icon={<Archive className="h-7 w-7" aria-hidden />}
  title="Arşiv boş"
  description="Henüz arşivlenmiş bir kursun yok."
  primaryAction={{ label: "Kurslarıma git", href: "/my-courses" }}
  className="max-w-md mx-auto"
/>;

Callback aksiyonu (onClick)

import { EmptyState } from "@registry/components/ui/empty-state";
import { Plus } from "lucide-react";

<EmptyState
  icon={<Plus className="h-7 w-7" aria-hidden />}
  title="Henüz öğe yok"
  description="İlk öğeni ekleyerek başlayabilirsin."
  primaryAction={{ label: "Yeni ekle", onClick: () => setOpen(true) }}
/>;

---

Kullanıldığı yerler

• app/routes/instructor._index.tsx → Deleted Courses (Trash) empty state
• app/routes/my-courses.wishlist.tsx → Wishlist empty state
• app/routes/my-courses.certifications.tsx → Certifications empty state
• app/routes/my-courses.archived.tsx → Archived empty state