### Install Dependencies and Run Theme Locally

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/getting-started/introduction.md

After creating your theme, navigate to its directory, install the necessary dependencies using yarn, and start the development server.

```bash
cd your-theme
yarn install
yarn dev

```

--------------------------------

### Scaffold a New ikas Theme

Source: https://context7.com/areyoudev/ikasthemedevmcp/llms.txt

Use the command-line interface to bootstrap a new theme project. Follow the prompts, install dependencies, and start the development server. The theme will be live at http://localhost:3333.

```bash
npx create-ikas-theme@latest
# Follow prompts, then:
cd your-theme
yarn install
yarn dev
# Theme is now live at http://localhost:3333
# Open the editor at: https://dev-your-store.myikas.com/admin/storefront/partner/theme/edit
```

--------------------------------

### Create ikas Theme Project

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/README.md

Use this command to generate a new ikas theme project template. Ensure you have Node.js installed.

```bash
npx create-ikas-theme@latest
```

--------------------------------

### Create a New ikas Theme

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/getting-started/introduction.md

Execute this command in your terminal to scaffold a new ikas theme project. Follow the on-screen prompts to complete the setup.

```bash
npx create-ikas-theme@latest

```

--------------------------------

### Example Locale File Structure

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/translations.md

Define translations for a specific component in its corresponding JSON file. Use nested objects for structure and {{curly braces}} for variables.

```json
{
  "detail": {
    "addToCart": {
      "text": "ADD TO CART"
    }
  },
  "settings": {
    "required": "This field is required",
    "minMax": "Must be a minimum of {{min}} characters and a maximum of {{max}} characters",
    "min": "Must be a minimum of {{min}} characters",
    "max": "Must be a minimum of {{max}} characters",
    "selectMinMax": "Minimum {{min}}, maximum {{max}} selections should be made",
    "selectMin": "Minimum {{min}} selections should be made",
    "selectMax": "Maximum {{max}} selections should be made",
    "maxFileSizeInfoText": "You can upload files up to 3 MB in size."
  }
}
```

--------------------------------

### Basic Banner Component Structure

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/getting-started/creating-your-second-component.md

Initial setup for a React Banner component using MobX-React-Lite and CSS Modules. This serves as a foundational structure before adding props and dynamic behavior.

```typescript
import {
  observer
} from 'mobx-react-lite';
import styles from './style.module.css';

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

export default observer(Banner);

```

--------------------------------

### Define Component List Props

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/prop-types/component-list.md

Example of defining props for a component that accepts a list of components. Ensure the 'components' prop is typed as an array of IkasComponentRenderer.

```typescript
export type ComponentListExampleProps = {
  ... 
  components: IkasComponentRenderer[];
};
```

--------------------------------

### Image Component with Responsive Layout

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/prop-types/image.md

Example of using the Ikas Image component with layout='responsive', specifying width and height to define an aspect ratio (16:9). The objectFit='cover' ensures the image covers the area, and sizes='500px' is provided for performance.

```html
<Image image={image} layout="responsive" width={16} height={9} sizes="500px" objectFit="cover" />
```

--------------------------------

### Blog Category List Props Type

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/prop-types/blog-category-list.md

Defines the props type for the blog category list example, including the blogList property which is an instance of IkasBlogCategoryList.

```typescript
export type BlogCategoryListExampleProps = {
    ...    blogList: IkasBlogCategoryList;
};
```

--------------------------------

### Link Component Usage in React

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/prop-types/link.md

Demonstrates how to use the `Link` component from `@ikas/storefront` to render a navigation link. Ensure the `link` prop is correctly structured according to the `IkasNavigationLink` model. This example shows a basic button-like link.

```tsx
import { Link } from '@ikas/storefront';
import { observer } from 'mobx-react-lite';
import { LinkPropProps } from '../__generated__/types';
import styles from './style.module.css';

const LinkPropDemo: React.FC<LinkPropProps> = (props) => {
  const { link } = props;

  // Normaly it doesn't make much sense to display only a button in a component
  // This is just to demonstrate the Link prop type
  return (
    <div className={styles.container}>
      <Link href={link.href} passHref>
        <a className={styles.button}>{link.label}</a>
      </Link>
      {/* {link.subLinks.map((sl) => (
        ...
      ))} */}
    </div>
  );
};

export default observer(LinkPropDemo);
```

--------------------------------

### Image Component with Responsive Layout and Sizes Attribute

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/prop-types/image.md

Illustrates the use of the 'sizes' attribute with a responsive Image component. This attribute informs the browser about the image's display width across different viewport sizes, optimizing loading performance. The example specifies different widths for viewports below 768px, 1440px, and above.

```html
<Image
  image={image}
  layout="responsive"
  width={16}
  height={9}
  sizes="(max-width: 768px) 120px, (max-width: 1440px) 360px, 540px"
  objectFit="cover"
/>
```

--------------------------------

### Responsive Image with Sizes Attribute

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/prop-types/image.md

Use the `sizes` attribute to inform the browser about the image's responsive size relative to the viewport width. This example shows an image taking up the full viewport width.

```jsx
<Image image={image} layout="responsive" width={16} height={9} sizes="100vw" objectFit="cover" />
```

--------------------------------

### CSS for Link Button Styling

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/prop-types/link.md

Provides CSS styles for a button-like navigation link. This CSS is intended to be used with a module CSS file as shown in the React example.

```css
.container {
  padding: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  padding: 8px 12px;
  background-color: #6f55ff;
  color: white;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
}
```

--------------------------------

### Open Theme Editor URL

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/getting-started/editor.md

Use this URL to open the theme project running on your localhost in the editor. Replace 'dev-your-store' with your development store name.

```url
https://dev-your-store.myikas.com/admin/storefront/partner/theme/edit
```

--------------------------------

### JSON Locale File for Product Detail

Source: https://context7.com/areyoudev/ikasthemedevmcp/llms.txt

Defines translations for product detail elements, including static text and a string with dynamic variables for minimum and maximum character limits.

```jsonc
// public/locales/en/product-detail.json
{
  "detail": {
    "addToCart": { "text": "ADD TO CART" }
  },
  "settings": {
    "required": "This field is required",
    "minMax": "Must be between {{min}} and {{max}} characters"
  }
}
```

--------------------------------

### Implement Promo Component with Boolean Prop

Source: https://context7.com/areyoudev/ikasthemedevmcp/llms.txt

Create a React component that conditionally renders a 'SALE' badge based on the 'showBadge' boolean prop. This prop is controlled by a toggle switch in the Theme Editor. Ensure the component is a default export wrapped with 'observer'.

```tsx
// export type PromoProps = { showBadge: boolean; };

import { observer } from 'mobx-react-lite';
import { PromoProps } from '../__generated__/types';

const Promo: React.FC<PromoProps> = ({ showBadge }) => (
  <div>
    {showBadge && <span className="badge">SALE</span>}
    <p>Product info here</p>
  </div>
);

export default observer(Promo);
```

--------------------------------

### Render Hero Image with IkasImage

Source: https://context7.com/areyoudev/ikasthemedevmcp/llms.txt

Use the Image component from '@ikas/storefront' for rendering hero images. Ensure the 'sizes' attribute is provided for responsive or fill layouts to optimize loading.

```tsx
import { observer } from 'mobx-react-lite';
import { Image } from '@ikas/storefront';
import { HeroProps } from '../__generated__/types';
import styles from './style.module.css';

const Hero: React.FC<HeroProps> = ({ heroImage }) => (
  <div className={styles.container}>
    {/* fill layout — container must have position:relative and explicit dimensions */}
    <Image
      image={heroImage}
      layout="fill"
      objectFit="cover"
      sizes="(max-width: 768px) 100vw, 1440px"
      priority   // preload the largest above-the-fold image
      useBlur    // show blurred placeholder while loading
    />
  </div>
);

export default observer(Hero);
```

```css
/* style.module.css */
.container {
  position: relative;
  width: 100%;
  height: 600px;
}
```

--------------------------------

### Two Column Layout with Component Renderer

Source: https://context7.com/areyoudev/ikasthemedevmcp/llms.txt

Renders two merchant-selected components side-by-side using IkasComponentRenderer. Ensure 'TwoColumnProps' and 'IkasComponentRenderer' types are correctly defined.

```tsx
import { observer } from 'mobx-react-lite';
import { TwoColumnProps } from '../__generated__/types';
import styles from './style.module.css';

const TwoColumn: React.FC<TwoColumnProps> = ({ leftCol, rightCol }) => (
  <div className={styles.row}>
    <div className={styles.col}>
      {/* IkasComponentRenderer renders the merchant-selected component */}
      <leftCol.Component {...leftCol.componentProps} />
    </div>
    <div className={styles.col}>
      <rightCol.Component {...rightCol.componentProps} />
    </div>
  </div>
);

export default observer(TwoColumn);
```

--------------------------------

### Display Featured Product Details

Source: https://context7.com/areyoudev/ikasthemedevmcp/llms.txt

Renders a featured product, including its image, name, price, and a link to the product page. It prioritizes the main variant's image and price.

```tsx
import { observer } from 'mobx-react-lite';
import { Image, Link } from '@ikas/storefront';
import { FeaturedProductProps } from '../__generated__/types';
import styles from './style.module.css';

const FeaturedProduct: React.FC<FeaturedProductProps> = ({ product }) => {
  const mainVariant = product.variants?.[0];
  const mainImage = mainVariant?.mainImage ?? product.images?.[0];

  return (
    <div className={styles.card}>
      {mainImage && (
        <Image image={mainImage} layout="responsive" width={4} height={3} sizes="400px" objectFit="cover" />
      )}
      <h2>{product.name}</h2>
      <p>{mainVariant?.price?.formattedPriceWithCurrency}</p>
      <Link href={product.href} passHref>
        <a>View Product</a>
      </Link>
    </div>
  );
};

export default observer(FeaturedProduct);
```

--------------------------------

### Project Structure Overview

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/README.md

This is a representation of the ikas theme MCP project's directory structure. It outlines the organization of documentation files for different aspects of theme development.

```tree
ikasthememcp/
├── theme/
│   ├── getting-started/          # Başlangıç kılavuzları
│   │   ├── introduction.md       # Giriş ve genel bakış
│   │   ├── creating-your-first-component.md
│   │   ├── creating-your-second-component.md
│   │   ├── editor.md             # Tema editörü kullanımı
│   │   └── summary.md
│   │
│   ├── prop-types/                # Prop type dokümantasyonları
│   │   ├── introduction.md       # Prop type'lar hakkında genel bilgi
│   │   ├── text.md                # Metin prop type'ı
│   │   ├── rich-text.md           # Zengin metin prop type'ı
│   │   ├── boolean.md             # Boolean prop type'ı
│   │   ├── image.md               # Görsel prop type'ı
│   │   ├── image-list.md          # Görsel listesi prop type'ı
│   │   ├── link.md                # Link prop type'ı
│   │   ├── link-list.md           # Link listesi prop type'ı
│   │   ├── product.md             # Ürün prop type'ı
│   │   ├── product-list.md        # Ürün listesi prop type'ı
│   │   ├── attribute.md           # Özellik prop type'ı
│   │   ├── attribute-list.md      # Özellik listesi prop type'ı
│   │   ├── brand.md               # Marka prop type'ı
│   │   ├── brand-list.md          # Marka listesi prop type'ı
│   │   ├── category.md            # Kategori prop type'ı
│   │   ├── category-list.md       # Kategori listesi prop type'ı
│   │   ├── color.md               # Renk prop type'ı
│   │   ├── component.md           # Bileşen prop type'ı
│   │   ├── component-list.md      # Bileşen listesi prop type'ı
│   │   ├── blog.md                # Blog prop type'ı
│   │   ├── blog-list.md           # Blog listesi prop type'ı
│   │   ├── blog-category.md       # Blog kategori prop type'ı
│   │   ├── blog-category-list.md  # Blog kategori listesi prop type'ı
│   │   ├── number-select-slider.md # Sayı seçim kaydırıcısı prop type'ı
│   │   └── custom-data.md         # Özel veri tipleri
│   │
│   ├── theme-settings/            # Tema ayarları dokümantasyonu
│   │   ├── introduction.md        # Tema ayarları giriş
│   │   ├── generic-settings.md    # Genel ayarlar
│   │   ├── colors.md              # Renk ayarları
│   │   ├── fonts.md               # Font ayarları
│   │   └── translations.md        # Çeviri ayarları
│   │
│   └── translations.md             # Çeviri ve lokalizasyon rehberi
│
└── README.md                       # Bu dosya
```

--------------------------------

### Render Gallery of Images with IkasImage

Source: https://context7.com/areyoudev/ikasthemedevmcp/llms.txt

Iterate over an array of IkasImage objects and render each using the Image component for a gallery. Set width and height to 1 for a 1:1 aspect ratio.

```tsx
import { observer } from 'mobx-react-lite';
import { Image } from '@ikas/storefront';
import { GalleryProps } from '../__generated__/types';
import styles from './style.module.css';

const Gallery: React.FC<GalleryProps> = ({ images }) => (
  <div className={styles.grid}>
    {images.map((img, i) => (
      <div key={i} className={styles.cell}>
        <Image image={img} layout="responsive" width={1} height={1} sizes="300px" objectFit="cover" />
      </div>
    ))}
  </div>
);

export default observer(Gallery);
```

--------------------------------

### Product Grid Component

Source: https://context7.com/areyoudev/ikasthemedevmcp/llms.txt

Displays a list of products with images and names, including pagination controls. Requires an IkasProductList object.

```tsx
import { observer } from 'mobx-react-lite';
import { Image, Link } from '@ikas/storefront';
import { ProductGridProps } from '../__generated__/types';
import styles from './style.module.css';

const ProductGrid: React.FC<ProductGridProps> = ({ productList }) => {
  const products = productList.data;

  return (
    <section>
      <div className={styles.grid}>
        {products.map((p) => (
          <div key={p.id} className={styles.item}>
            {p.images?.[0] && (
              <Image image={p.images[0]} layout="responsive" width={1} height={1} sizes="280px" objectFit="cover" />
            )}
            <p>{p.name}</p>
          </div>
        ))}
      </div>
      <div className={styles.pagination}>
        <button onClick={() => productList.getPrev()}>Prev</button>
        <button onClick={() => productList.getNext()}>Next</button>
      </div>
    </section>
  );
};

export default observer(ProductGrid);
```

--------------------------------

### Basic Title Component Structure

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/getting-started/creating-your-first-component.md

This snippet shows the initial structure of a 'Title' component. It requires importing `observer` from 'mobx-react-lite' and exporting the component as a default export wrapped in `observer` to be compatible with the ikas editor.

```typescript
import {
  observer
} from 'mobx-react-lite';
import styles from './style.module.css';

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

export default observer(Title);

```

--------------------------------

### Define Product Prop Type

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/prop-types/product.md

Define the props for a component that accepts a product. The `product` field expects an instance of `IkasProduct`.

```typescript
export type ProductExampleProps = {
    ... 
    product: IkasProduct;
};
```

--------------------------------

### Product Detail Component Using useTranslation

Source: https://context7.com/areyoudev/ikasthemedevmcp/llms.txt

Fetches and displays translated strings for a product detail view using the 'useTranslation' hook. Supports dynamic variable interpolation for messages.

```tsx
// src/components/product-detail/index.tsx
import { observer } from 'mobx-react-lite';
import { useTranslation } from '@ikas/storefront';

const ProductDetail = () => {
  const { t } = useTranslation();
  return (
    <div>
      <button>{t('product-detail:detail.addToCart.text')}</button>
      <p>{t('product-detail:settings.minMax', { min: 3, max: 100 })}</p>
    </div>
  );
};

export default observer(ProductDetail);
```

--------------------------------

### Create Minimal Component with Text Prop

Source: https://context7.com/areyoudev/ikasthemedevmcp/llms.txt

Implement a basic React component that accepts a 'title' string prop. Ensure the component is a default export wrapped with MobX's 'observer'. The 'TitleProps' type is auto-generated based on Theme Editor definitions.

```tsx
// src/components/title/index.tsx
import { observer } from 'mobx-react-lite';
import styles from './style.module.css';
import { TitleProps } from '../__generated__/types';

// Auto-generated type — define the prop in the editor first
// export type TitleProps = { title: string; };

const Title: React.FC<TitleProps> = ({ title }) => {
  return <div className={styles.title}>{title}</div>;
};

export default observer(Title);
```

```css
/* src/components/title/style.module.css */
.title {
  padding: 36px 0;
  font-size: 48px;
  font-weight: 500;
  text-align: center;
}
```

--------------------------------

### Display Image Component with Layout Fill

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/prop-types/image.md

Demonstrates a React component using the Ikas Image component with layout='fill' to display an image within a container. Ensure the parent container has defined dimensions.

```tsx
import { observer } from 'mobx-react-lite';
import { Image } from '@ikas/storefront';
import { ImagePropProps } from '../__generated__/types';

import styles from './style.module.css';

const ImagePropDemo: React.FC<ImagePropProps> = (props) => {
  const { image } = props;
  return (
    <div className={styles['img-container']}>
      <Image image={image} layout="fill" sizes="500px" objectFit="contain" />
    </div>
  );
};

export default observer(ImagePropDemo);
```

--------------------------------

### Render Footer Navigation Links

Source: https://context7.com/areyoudev/ikasthemedevmcp/llms.txt

Iterate over an array of IkasNavigationLink objects to render a list of navigation links, suitable for menus or footer navigation. Uses the Link component for consistent navigation.

```tsx
import { observer } from 'mobx-react-lite';
import { Link } from '@ikas/storefront';
import { FooterLinksProps } from '../__generated__/types';

const FooterLinks: React.FC<FooterLinksProps> = ({ links }) => (
  <nav>
    <ul>
      {links.map((link, i) => (
        <li key={i}>
          <Link href={link.href} passHref>
            <a>{link.label}</a>
          </Link>
        </li>
      ))}
    </ul>
  </nav>
);

export default observer(FooterLinks);
```

--------------------------------

### BrandListExampleProps Type Definition

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/prop-types/brand-list.md

Defines the props for a component that uses the Brand List. It includes the 'brandList' property which is an instance of IkasBrandList.

```typescript
export type BrandListExampleProps = {
    ... 
    brandList: IkasBrandList;
};
```

--------------------------------

### Title Component with Props and Styling

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/getting-started/creating-your-first-component.md

This updated 'Title' component demonstrates how to use props, specifically a 'title' string, and apply CSS module styling. It imports `TitleProps` for type safety and renders the title within a styled div.

```typescript
import {
  observer
} from 'mobx-react-lite';
import styles from './style.module.css';
import { TitleProps } from '../__generated__/types';

const Title: React.FC<TitleProps> = (props) => {
  const { title } = props;
  return <div className={styles.title}>{title}</div>;
};

export default observer(Title);

```

--------------------------------

### Blog Post Prop Type Definition

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/prop-types/blog.md

Defines the TypeScript prop types for a component that displays blog post information, including the IkasBlog instance.

```typescript
export type BlogTestProps = {
  ... your other props
  blog: IkasBlog;
}

```

--------------------------------

### Configure Locales in next.config.js

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/translations.md

Define the available locales and the default locale for your theme within the `i18n` configuration section of your `next.config.js` file. Restart your theme after making changes.

```javascript
...
i18n: {
  defaultLocale: "en",
  locales: ["en", "tr"],
  localeDetection: false,
},
...
```

--------------------------------

### Next.js Configuration for Internationalization

Source: https://context7.com/areyoudev/ikasthemedevmcp/llms.txt

Configures Next.js for internationalization by defining supported locales, setting a default locale, and disabling automatic locale detection.

```js
// next.config.js — add locales and change defaultLocale to test
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'tr', 'fr', 'de'],
    localeDetection: false,
  },
  // ...rest of config
};
```

--------------------------------

### Image Styling for Container

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/prop-types/image.md

CSS module for styling the image container, setting its position, dimensions, and margin. This is used in conjunction with layout='fill' to define the image's boundaries.

```css
.img-container {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 48px auto;
}
```

--------------------------------

### Brand Showcase Component

Source: https://context7.com/areyoudev/ikasthemedevmcp/llms.txt

Displays a brand's name. Expects an IkasBrand object as input.

```tsx
import { observer } from 'mobx-react-lite';
import { BrandShowcaseProps } from '../__generated__/types';

const BrandShowcase: React.FC<BrandShowcaseProps> = ({ brand }) => (
  <div>
    <h3>{brand.name}</h3>
  </div>
);

export default observer(BrandShowcase);
```

--------------------------------

### Implement Heading Component with Text Prop

Source: https://context7.com/areyoudev/ikasthemedevmcp/llms.txt

Create a React component that uses the 'heading' prop for an HTML h1 element. The 'HeadingProps' type is auto-generated from the Theme Editor. Components must be default exported and wrapped with 'observer'.

```tsx
// Auto-generated types.ts:
// export type HeadingProps = { heading: string; };

import { observer } from 'mobx-react-lite';
import { HeadingProps } from '../__generated__/types';

const Heading: React.FC<HeadingProps> = ({ heading }) => (
  <h1>{heading}</h1>
);

export default observer(Heading);
```

--------------------------------

### Brand List Component

Source: https://context7.com/areyoudev/ikasthemedevmcp/llms.txt

Renders an unordered list of brand names. Requires an array of IkasBrand objects.

```tsx
import { observer } from 'mobx-react-lite';
import { BrandListProps } from '../__generated__/types';

const BrandList: React.FC<BrandListProps> = ({ brands }) => (
  <ul>
    {brands.map((b) => <li key={b.id}>{b.name}</li>)}
  </ul>
);

export default observer(BrandList);
```

--------------------------------

### Render Navigation Link with IkasNavigationLink

Source: https://context7.com/areyoudev/ikasthemedevmcp/llms.txt

Use the Link component from '@ikas/storefront' to render navigation links, ensuring client-side navigation and editor preview integrity. Supports nested sub-links for dropdowns.

```tsx
import { observer } from 'mobx-react-lite';
import { Link } from '@ikas/storefront';
import { NavButtonProps } from '../__generated__/types';
import styles from './style.module.css';

const NavButton: React.FC<NavButtonProps> = ({ link }) => (
  <div className={styles.container}>
    <Link href={link.href} passHref>
      <a className={styles.button}>{link.label}</a>
    </Link>
    {/* Render sub-links for dropdown menus */}
    {link.subLinks?.map((sub, i) => (
      <Link key={i} href={sub.href} passHref>
        <a className={styles.subLink}>{sub.label}</a>
      </Link>
    ))}
  </div>
);

export default observer(NavButton);
```

--------------------------------

### Category Menu Component

Source: https://context7.com/areyoudev/ikasthemedevmcp/llms.txt

Generates a list of category links. Requires an array of IkasCategory objects.

```tsx
import { observer } from 'mobx-react-lite';
import { Link } from '@ikas/storefront';
import { CategoryMenuProps } from '../__generated__/types';

const CategoryMenu: React.FC<CategoryMenuProps> = ({ categories }) => (
  <ul>
    {categories.map((cat) => (
      <li key={cat.id}>
        <Link href={cat.href} passHref><a>{cat.name}</a></Link>
      </li>
    ))}
  </ul>
);

export default observer(CategoryMenu);
```

--------------------------------

### Spacer Component for Spacing

Source: https://context7.com/areyoudev/ikasthemedevmcp/llms.txt

Creates vertical spacing using a div with a dynamic height based on IkasSlider configuration (value and unit). Defaults to 40px if no value or unit is provided.

```tsx
import { observer } from 'mobx-react-lite';
import { SpacerProps } from '../__generated__/types';

const Spacer: React.FC<SpacerProps> = ({ spacing }) => (
  <div style={{ height: `${spacing?.value ?? 40}${spacing?.unit ?? 'px'}` }} />
);

export default observer(Spacer);
```

--------------------------------

### Badge Component Using Global Primary Color

Source: https://context7.com/areyoudev/ikasthemedevmcp/llms.txt

Displays a 'NEW' badge with a background color dynamically set from theme settings. Falls back to a default color if '--color-primary' is not found.

```tsx
import { observer } from 'mobx-react-lite';
import { AnyProps } from '../__generated__/types';

const Badge: React.FC<AnyProps> = ({ settings }) => {
  const primary = settings.colors.find((c) => c.cssKey === '--color-primary');
  return (
    <span style={{ backgroundColor: primary?.value ?? '#6f55ff', color: '#fff', padding: '4px 8px' }}>
      NEW
    </span>
  );
};

export default observer(Badge);
```

--------------------------------

### CSS Module for Title Component

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/getting-started/creating-your-first-component.md

This CSS module defines the styling for the 'Title' component, including padding, font size, font weight, and text alignment.

```css
.title {
  padding: 36px 0;
  font-size: 48px;
  font-weight: 500;
  text-align: center;
}

```

--------------------------------

### Slider Component with Custom Slide Type

Source: https://context7.com/areyoudev/ikasthemedevmcp/llms.txt

Implements a responsive slider component using custom 'Slide' and 'SliderProps' types. Ensure 'IkasImage' and 'IkasNavigationLink' types are correctly defined.

```tsx
import React from 'react';
import { observer } from 'mobx-react-lite';
import { Image, Link } from '@ikas/storefront';
import { SliderProps } from '../__generated__/types';
import styles from './style.module.css';

const Slider: React.FC<SliderProps> = ({ slides, autoPlayInterval }) => {
  const [current, setCurrent] = React.useState(0);

  React.useEffect(() => {
    const ms = (autoPlayInterval?.value ?? 3) * 1000;
    const t = setInterval(() => setCurrent((c) => (c + 1) % slides.length), ms);
    return () => clearInterval(t);
  }, [slides.length, autoPlayInterval]);

  const slide = slides[current];
  return (
    <div className={styles.slider}>
      <Image image={slide.image} layout="responsive" width={16} height={9} sizes="100vw" objectFit="cover" />
      {slide.title && <h2 className={styles.title}>{slide.title}</h2>}
      {slide.buttonLink && (
        <Link href={slide.buttonLink.href} passHref>
          <a className={styles.btn}>{slide.buttonLink.label}</a>
        </Link>
      )}
    </div>
  );
};

export default observer(Slider);
```

--------------------------------

### Define Single Slide Props

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/prop-types/custom-data.md

Defines the properties for a single slide, including an image, an optional title, and an optional button link.

```typescript
export type SlideTestProps = {
  ... your other props
  image: IkasImage;
  title?: string;
  buttonLink?: IkasNavigationLink;
}
```

--------------------------------

### CSS Custom Property for Primary Color

Source: https://context7.com/areyoudev/ikasthemedevmcp/llms.txt

Demonstrates using the '--color-primary' CSS custom property directly in a stylesheet for consistent theming. Includes a fallback color.

```css
/* Use the CSS variable directly in any stylesheet */
.badge {
  background-color: var(--color-primary, #6f55ff);
}
```

--------------------------------

### Implement Article Component with Rich Text Prop

Source: https://context7.com/areyoudev/ikasthemedevmcp/llms.txt

Develop a React component to render HTML content provided via the 'body' prop. This prop is populated from the Theme Editor's rich-text input. Render the HTML using 'dangerouslySetInnerHTML'.

```tsx
// Auto-generated:
// export type ArticleProps = { body: string; };

import { observer } from 'mobx-react-lite';
import { ArticleProps } from '../__generated__/types';

const Article: React.FC<ArticleProps> = ({ body }) => (
  <div dangerouslySetInnerHTML={{ __html: body }} />
);

export default observer(Article);
```

--------------------------------

### Define Blog Category Prop Type

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/prop-types/blog-category.md

Defines the TypeScript type for blog category props, including the IkasBlogCategory object. This is used when integrating blog category data into your components.

```typescript
export type BlogCategoryTestProps = {
  ... your other props
  blogCategory: IkasBlogCategory;
}

```

--------------------------------

### Product List Prop Type Definition

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/prop-types/product-list.md

Defines the TypeScript props for a component that uses the Product List. It expects an IkasProductList object.

```typescript
export type ProductListExampleProps = {
    ... 
    productList: IkasProductList;
};
```

--------------------------------

### Banner Component with Props and Conditional Rendering

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/getting-started/creating-your-second-component.md

A functional React component for a Banner that accepts various props for image, button visibility, link, and colors. It dynamically styles the button and conditionally renders it based on the 'showButton' prop.

```typescript
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);

```

--------------------------------

### Blog List Props Type Definition

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/prop-types/blog-list.md

Defines the TypeScript props for a component that utilizes the IkasBlogList.

```typescript
export type BlogListExampleProps = {
    ... 
    blogList: IkasBlogList;
};
```

--------------------------------

### Define Image List Prop Type

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/prop-types/image-list.md

Define the props for a component that uses the Image List prop type. It expects an array of IkasImage objects.

```typescript
export type ImageListExampleProps = {
    ... 
    imageList: IkasImage[];
};
```

--------------------------------

### Category Banner Component

Source: https://context7.com/areyoudev/ikasthemedevmcp/llms.txt

Renders a banner displaying a category's name and description. Accepts an IkasCategory object.

```tsx
import { observer } from 'mobx-react-lite';
import { CategoryBannerProps } from '../__generated__/types';

const CategoryBanner: React.FC<CategoryBannerProps> = ({ category }) => (
  <div>
    <h2>{category.name}</h2>
    <p>{category.description}</p>
  </div>
);

export default observer(CategoryBanner);
```

--------------------------------

### Define Link List Prop Type

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/prop-types/link-list.md

Defines the TypeScript type for a component that accepts a list of navigation links. This type extends other properties with a required array of IkasNavigationLink.

```typescript
export type LinkListDemoProps = {
    ... 
    linkList: IkasNavigationLink[];
};
```

--------------------------------

### Pass Variables to Translation Function

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/translations.md

Provide an object as the second argument to the `t` function to substitute variables defined in your locale files (e.g., {{min}}).

```javascript
t('product-detail:settings.min', {
  min: 10,
});
```

--------------------------------

### Define Color Prop Type

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/prop-types/color.md

Use this type definition to specify that a prop expects a color value. The received value will be a hex color string.

```typescript
export type ColorExampleProps = {
    ... 
    color: string;
};
```

--------------------------------

### Banner Component CSS Styling

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/getting-started/creating-your-second-component.md

CSS module styles for the Banner component, defining layout, positioning for elements like the button container, and the appearance of the button itself, including hover effects.

```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);
}

```

--------------------------------

### Apply Accent Color with Inline Styles

Source: https://context7.com/areyoudev/ikasthemedevmcp/llms.txt

Use a hex color string provided by the merchant for inline styles. A fallback color is applied if no accentColor is specified.

```tsx
import { observer } from 'mobx-react-lite';
import { CardProps } from '../__generated__/types';

const Card: React.FC<CardProps> = ({ accentColor }) => (
  <div style={{ borderLeft: `4px solid ${accentColor ?? '#6f55ff'}` }}>
    <p>Card content</p>
  </div>
);

export default observer(Card);
```

--------------------------------

### Define Brand Prop Type

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/prop-types/brand.md

Defines the TypeScript type for component props, including the `IkasBrand` type for brand information.

```typescript
export type BrandTestProps = {
  ... your other props
  brand: IkasBrand;
}

```

--------------------------------

### Use useTranslation Hook in React Component

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/translations.md

Import and use the `useTranslation` hook to access translations within your React components. The `t` function takes a namespace and path to retrieve the translated string.

```javascript
import { useTranslation } from '@ikas/storefront';

const Address = ({ order }: Props) => {
  const { t } = useTranslation();
  return (
    <S.Address>
      <S.DeliveryAddress>{t('common:orderDetail.deliveryAddress')}</S.DeliveryAddress>
      <S.Text>
        <div>
          {order.shippingAddress?.firstName} {order.shippingAddress?.lastName}
        </div>
        <div>{order.shippingAddress?.addressText}</div>
      </S.Text>
    </S.Address>
  );
};
```

--------------------------------

### Define AttributeList Props

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/prop-types/attribute-list.md

Define the TypeScript props for a component that accepts an AttributeList. Ensure the `attributeList` prop is of type `IkasAttributeList`.

```typescript
export type AttributeListTestProps = {
  ... your other props
  attributeList: IkasAttributeList;
}
```

--------------------------------

### Category List Prop Type Definition

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/prop-types/category-list.md

Defines the TypeScript props for a component that accepts a category list. The `categoryList` field is an instance of `IkasCategoryList`.

```typescript
export type CategoryListExampleProps = {
    ... 
    categoryList: IkasCategoryList;
};
```

--------------------------------

### Attribute Prop Type Definition

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/prop-types/attribute.md

Defines the TypeScript props for a component utilizing the attribute prop. Ensure 'IkasAttributeDetail' is correctly imported.

```typescript
export type AttributeTestProps = {
  ... your other props
  attribute: IkasAttributeDetail;
}
```

--------------------------------

### Define Category Prop Type

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/prop-types/category.md

Defines the TypeScript type for component props, including the `category` prop which expects an `IkasCategory` instance.

```typescript
export type CategoryTestProps = {
  ... your other props
  category: IkasCategory;
}
```

--------------------------------

### Generated TypeScript Props for Title Component

Source: https://github.com/areyoudev/ikasthemedevmcp/blob/main/theme/getting-started/creating-your-first-component.md

This snippet shows the auto-generated TypeScript type definition for the 'Title' component's props, specifying that it expects a 'title' property of type string.

```typescript
... 
export type TitleProps = {
  title: string;
};
... 

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.