---
title: İkinci Component'inizi Oluşturma
description: Daha fazla prop içeren bir Banner component'i oluşturup prop gruplamayı ve koşullu prop'ları öğrenin.
---

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

İlk component'inizi oluşturduğunuza ve editörde component tanımlamayı öğrendiğinize göre, artık daha fazla prop ve özelleştirme seçeneği sunan bir component oluşturabiliriz. Bu sayfada **Add Prop** penceresindeki **Conditional Prop Type** ve **Group** alanlarını da açıklayacağız.

Bir görsel ve bir buton gösteren bir **Banner** component'i oluşturacağız. Butonun renklerini satıcı özelleştirebilecek.

Önce bu component için **banner** klasörünü ve içinde **index.tsx** ile **style.module.css** dosyalarını oluşturun.

```tsx title="src/components/banner/index.tsx"
import { observer } from 'mobx-react-lite';
import styles from './style.module.css';

const Banner = () => {
  return <div></div>;
};

export default observer(Banner);
```

## Banner component'ini tanımlama

<iframe src="https://demo.arcade.software/rs1OtK2BeCgbeiF2xqyT?embed" title="Banner component'ini tanımlama" loading="lazy" allowFullScreen style={{ width: '100%', aspectRatio: '16 / 9', border: 0, borderRadius: 12 }} />

Banner component'imizi tanımladığımıza göre kodumuzu, az önce tanımladığımız prop'ları kullanacak şekilde değiştirebiliriz.

<iframe src="https://demo.arcade.software/bvULSsgpZ3YfgId3ZYyl?embed" title="Banner prop'larını kullanma" loading="lazy" allowFullScreen style={{ width: '100%', aspectRatio: '16 / 9', border: 0, borderRadius: 12 }} />

## Banner component'ini sayfaya ekleme

<iframe src="https://demo.arcade.software/KVPRCqQfgHphU5dHTity?embed" title="Banner component'ini sayfaya ekleme" loading="lazy" allowFullScreen style={{ width: '100%', aspectRatio: '16 / 9', border: 0, borderRadius: 12 }} />

## Prop'ları gruplama

<iframe src="https://demo.arcade.software/H6hBeHqTc7EfZsgyLVf1?embed" title="Prop'ları gruplama" loading="lazy" allowFullScreen style={{ width: '100%', aspectRatio: '16 / 9', border: 0, borderRadius: 12 }} />

## Koşullu prop'lar

**Show button** prop'unun değeri kapalıysa (false) diğer üç buton prop'unu göstermemize gerek yoktur. Özelleştirme prop'larını **Show button** prop'unun değerine göre gösterip gizleyebiliriz.

<iframe src="https://demo.arcade.software/lG2uqPveMWQOiZD6NYkv?embed" title="Koşullu prop'lar" loading="lazy" allowFullScreen style={{ width: '100%', aspectRatio: '16 / 9', border: 0, borderRadius: 12 }} />

Aynı sonuca [custom data](https://builders.ikas.com/docs/headless-theme/prop-types/custom-data) tiplerindeki enum'larla da ulaşabilirsiniz. Örneğin **Left**, **Right** ve **Center** değerlerine sahip bir **Position** enum prop'unuz varsa, satıcı **Left**'i seçtiğinde bazı prop'ları, **Right**'ı seçtiğinde ise başka prop'ları gösterebilirsiniz.

## Banner kaynak kodu

```tsx title="src/components/banner/index.tsx"
import React from 'react';
import { observer } from 'mobx-react-lite';
import styles from './style.module.css';
import { BannerProps } from '../__generated__/types';
import { Image, Link } from '@ikas/storefront';

const Banner: React.FC<BannerProps> = (props) => {
  const { image, showButton, buttonLink, buttonBgColor, buttonTextColor } = props;

  const buttonStyle = React.useMemo(() => {
    return {
      backgroundColor: buttonBgColor ?? 'black',
      color: buttonTextColor ?? 'white',
    };
  }, [buttonBgColor, buttonTextColor]);

  return (
    <div className={styles.banner}>
      <Image image={image} layout="responsive" width={16} height={9} objectFit={'cover'} />
      <div className={styles.buttonContainer}>
        {showButton && buttonLink && (
          <Link href={buttonLink?.href} passHref>
            <a className={styles.button} style={buttonStyle}>
              {buttonLink.label}
            </a>
          </Link>
        )}
      </div>
    </div>
  );
};

export default observer(Banner);
```

```css title="src/components/banner/style.module.css"
.banner {
  width: 100%;
  position: relative;
}

.buttonContainer  {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;

  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
}

.button {
  padding: 0 12px;
  height: 50px;
  border-radius: 4px;
  background-color: black;
  color: white;
  font-weight: bold;
  transition: all .3s;

  display: flex;
  justify-content: center;
  align-items: center;
}

.button:hover {
  transform: scale(1.05);
}
```