---
title: Hero Banner
description: Görsel, başlık ve aksiyon butonu gösteren bir hero banner component'i oluşturun.
---

<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>

Şimdi temamız için bir hero banner component'i oluşturalım. Bu component bir görsel, bir başlık ve bir aksiyon (call to action) butonu gösterecek.

Kaynak kodun tamamı [burada](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme/src/components/hero-banner). Hero banner'ın son hali şöyle görünecek:

![Örnek temadaki hero banner](https://builders.ikas.com/media/ikas-dev/example-theme-hero-banner-b00e61ef9cd9f913460a428a367373f2.png)

## Prop'lar [#props]

Ekran görüntüsündeki sonuca ulaşmak için tema editöründe satıcıdan bazı prop değerleri istememiz gerekiyor: görsel, başlık ve aksiyon butonunu özelleştirmeye yarayan birkaç prop.

Buton isteğe bağlı olduğu için onu göstermek ya da gizlemek amacıyla bir **showButton** prop'u kullanıyoruz. Butonla ilgili diğer prop'ları ise koşullu prop olarak tanımlıyoruz; yani bu prop'lar editörde yalnızca **showButton** değeri `true` olduğunda görünür.

Oluşturulan type şöyle görünür:

```tsx title="src/components/__generated__/types.ts"
export type HeroBannerProps = {
  image: IkasImage;
  imageAspectRatio: ImageAspectRatio;
  title?: string;
  showButton?: boolean;
  link: IkasNavigationLink;
  buttonBackgroundColor: string;
  buttonTextColor: string;
};
```

Hero banner component'i ise şöyle:

```tsx title="src/components/hero-banner/index.ts"
function HeroBanner({
  image,
  link,
  title,
  imageAspectRatio,
  buttonBackgroundColor,
  buttonTextColor,
  showButton,
}: HeroBannerProps) {
  const isContentVisible = (showButton && !!link?.label && !!link?.href) || !!title;
  const contentProps = {
    title,
    showButton,
    link,
    buttonTextColor,
    buttonBackgroundColor,
  };

  return (
    <Container>
      <S.InnerContainer>
        <HeroBannerImage image={image} imageAspectRatio={imageAspectRatio} />
        {isContentVisible && <HeroBannerContent {...contentProps} />}
      </S.InnerContainer>
    </Container>
  );
}
```

Gördüğünüz gibi component, **HeroBannerImage** ve **HeroBannerContent** olmak üzere iki alt component'e ayrılıyor. Görseli render ediyor, buton özelleştirme prop'larıyla da butonu gösterip gizliyor ya da renklerini değiştiriyoruz.