TabPage Bileşeni ile Listeleme

Genel Yapı

TabPage, iki temel prop ile çalışır:

return (
  <TabPage title='İnsan Kaynakları' tabs={[usersTab, departmentsTab]} />
);

title: Sayfanın başlığı.
tabs: Her biri TabItemProps tipinde olan sekmeler dizisi.

TabItemProps Özellikleri (Props)

Prop Adı	Tip	Opsiyonel	Açıklama
`type`	`"list"` \	`"grid"`	Hayır	Sekme içeriğinin liste mi yoksa grid mi olduğunu belirtir.
`title`	`string`	Hayır	Sekmenin başlığı.
`path`	`string`	Hayır	Sekmenin veri çekeceği API endpoint yolu.
`actions`	`React.ReactNode`	Evet	Sekme başlığında gösterilecek özel butonlar veya bileşenler.
`isSearch`	`boolean`	Evet (false)	Sekmede arama kutusu gösterilsin mi?
`isPagination`	`boolean`	Evet (true)	Sekmede sayfalama aktif mi?
`errorMessage`	`string`	Evet	Veri çekilirken hata oluşursa gösterilecek mesaj.
`emptyMessage`	`string`	Evet	Veri olmadığında gösterilecek mesaj.
`item`	`(data: any) => React.ReactNode`	Hayır	API’dan gelen her öğenin nasıl render edileceğini belirten fonksiyon.
`leftArea`	`() => React.ReactNode`	Evet	Sekme içeriğinin sol tarafında gösterilecek özel içerik (örneğin filtre paneli).

Örnek TabItemProps: Kullanıcılar Sekmesi

const usersTab: TabItemProps = {
  type: "grid",
  title: 'Kullanıcılar',
  path: 'users',
  actions: (
    <a href='/employees/new-user' className="bg-white px-4 py-2 rounded-md border border-gray-300 text-sm font-medium text-gray-700 hover:bg-gray-50">
      Yeni Kullanıcı Oluştur
    </a>
  ),
  item: (user) => (
    <a key={user.id} href={`/employees/edit-user/${user.id}`} className="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
      <div className="flex items-start gap-3">
        <div className={`w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center relative flex-shrink-0`}>
          {user.media ? <img /> : <span className="text-white font-semibold text-lg">{getAvatar(user)}</span>}
        </div>
        <div className="flex-1 min-w-0">
          <h3 className="font-medium text-gray-900 truncate">{user.firstName} {user.lastName}</h3>
          <p className="text-sm text-gray-600 truncate">{user.department?.name}</p>
          {user.email && (
            <div className="flex items-center gap-1 mt-1">
              <Mail className="w-3 h-3 text-gray-400" />
              <span className="text-xs text-gray-600 truncate">{user.email}</span>
            </div>
          )}
        </div>
      </div>
    </a>
  )
};

Örnek TabItemProps: Departmanlar Sekmesi

const departmentsTab: TabItemProps = {
  type: "grid",
  title: 'Departmanlar',
  path: 'departments',
  actions: (
    <a href='/employees/new-department' className="bg-white px-4 py-2 rounded-md border border-gray-300 text-sm font-medium text-gray-700 hover:bg-gray-50">
      Yeni Departman Oluştur
    </a>
  ),
  item: (department) => (
    <a key={department.id} href={`/employees/edit-department/${department.id}`} className="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
      <div className="flex items-start gap-3">
        <div className={`w-12 h-12 bg-orange-500 rounded-lg flex items-center justify-center relative flex-shrink-0`}>
          <span className="text-white font-semibold text-lg">D</span>
        </div>
        <div className="flex-1 min-w-0">
          <h3 className="font-medium text-gray-900 truncate">{department.name}</h3>
          <p className="text-sm text-gray-600 truncate">{department.description}</p>
          {department.parent && (
            <div className="flex items-center gap-1 mt-1">
              <CaseUpper className="w-3 h-3 text-gray-400" />
              <span className="text-xs text-gray-600 truncate">{department.parent.name}</span>
            </div>
          )}
        </div>
      </div>
    </a>
  )
};

Görsel

Özet

TabPage, çok sekmeli sayfalar oluşturmak için kullanılır.
Her sekme bir TabItemProps nesnesidir.
type, path, actions ve item gibi özelliklerle yapılandırılır.
item fonksiyonu, her öğenin nasıl listeleneceğini belirler.

results matching ""

No results matching ""