---
title: Giriş
description: Giriş yapmış müşteriye özel bilgileri gösteren hesap detayı component'lerine genel bakış.
---

<Callout type="warn" title="Eski altyapı">
Bu sayfa, ikas Studio öncesindeki headless tema altyapısını anlatır. Yeni temalar için [ikas Studio](https://builders.ikas.com/docs/ikas-studio) dokümantasyonunu kullanın.
</Callout>

Hesap detayı component'leri, giriş yapmış bir müşteri gerektiren component'lerdir. Bu component'ler, giriş yapan müşterinin hesabına özel bilgileri gösterir.

Temamızın tasarımında bu alt component'lerin çoğu aynı layout'u paylaştığı için üst seviyede bir [AccountPage](https://github.com/ikascom/ikas-examples/blob/main/ikas-theme/src/components/account/index.tsx) component'i oluşturduk. Bu component şu şekilde görünüyor:

![Örnek temadaki hesap sayfası](https://builders.ikas.com/media/ikas-dev/example-theme-account-page-dc81ac8559c5db67bae8b0ac8f49be24.png)

Bu component'in oluşturduğu layout; solda bir navigasyon menüsünden, sağda ise seçilen bağlantının içeriğini gösteren bir component'ten oluşur.

```tsx
const AccountPage = () => {
  const { hasCustomer, isAccount, isFavoriteProducts, isAddresses, isOrderDetail, isOrders } = useAccount();

  if (!hasCustomer) return null;
  return (
    <Container>
      <S.InnerWrapper>
        <Menu />
        <S.Main>
          {isAccount && <AccountInfo />}
          {isAddresses && <Address />}
          {isFavoriteProducts && <FavoriteProducts />}
          {isOrders && <Orders />}
          {isOrderDetail && <OrderDetail />}
        </S.Main>
      </S.InnerWrapper>
    </Container>
  );
};
```

Hangi sayfada olduğumuzu [useAccount](https://github.com/ikascom/ikas-examples/blob/main/ikas-theme/src/components/account/useAccount.tsx) custom hook'unda `store.currentPageType` field'ı ile kontrol ediyoruz. Sayfaya göre de o sayfaya uygun component'i render ediyoruz.

Tüm alt component'ler şunlardır:

- [AccountInfo](https://builders.ikas.com/docs/headless-theme/example-theme/account/account-detail/info)
- [FavoriteProducts](https://builders.ikas.com/docs/headless-theme/example-theme/account/account-detail/favorite-products)
- [Orders](https://builders.ikas.com/docs/headless-theme/example-theme/account/account-detail/orders)
- [OrderDetail](https://builders.ikas.com/docs/headless-theme/example-theme/account/account-detail/order-detail)