Error State
Tekrar deneme aksiyonlarına sahip kurtarılabilir hata sunumu.
ErrorState.tsx
Bileşen Bağımlılık Ağacı Ayrıştırılamadı
Yüklenen JSON manifestosundaki düğüm tanımları geçerli React 19 prop arayüzleriyle uyuşmuyor.
Kurulum
shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:
$
npx shadcn@latest add https://ui.cagriozay.com.tr/r/error-state.jsonKullanım Örneği
import { ErrorState } from "@/components/feedback/ErrorState"
<ErrorState
code="API-503"
title="Servise ulaşılamıyor"
message="Bağlantıyı kontrol edip yeniden deneyin."
details={error.message}
onRetry={refetch}
/>Özellikler & Parametreler (API)
| Prop | Tür | Varsayılan | Açıklama |
|---|---|---|---|
| code | string | — | HTTP veya uygulama hata kodu. |
| title | ReactNode | "Bir Sorun Oluştu" | Hata başlığı. |
| message | ReactNode | — | Alert bölgesine bağlanan hata açıklaması. |
| details | string | — | Açılıp kapanabilen teknik hata detayı. |
| onRetry | () => void | — | Tekrar deneme callback'i. |
| retryLabel | string | "Tekrar Dene" | Tekrar deneme düğmesi etiketi. |
| secondaryAction | { label: string; onClick?: () => void; href?: string } | — | Callback veya rota kullanan ikincil aksiyon. |
| variant | "card" | "minimal" | "banner" | "card" | Hata yüzeyinin görsel sunumu. |
| as | "section" | "div" | "article" | "section" | Semantik kapsayıcı. |
| headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Başlık seviyesi. |