@bolttech/atoms-tile v0.15.0

Tile Component

The Tile component is a versatile React component that represents a selectable tile element, which can display an icon, image, or text, and allows user interaction.

Table of Contents

• Tile Component
  • Table of Contents
  • Installation
  • Usage
  • Props
  • Example
  • Contributing

Installation

To use the Tile component in your React application, follow these steps:

npm install @bolttech/frontend-foundations @bolttech/atoms-tile

or

yarn add @bolttech/frontend-foundations @bolttech/atoms-tile

Once you have the required dependencies installed, you can start using the Tile component in your React application.

Usage

The Tile component provides a flexible way to create selectable tiles with various content types, such as icons, images, and text. Users can interact with the tiles, and you can track the selected state using the onClick prop.

To use the component, import it and include it in your JSX:

import React from 'react';
import { Tile } from '@bolttech/atoms-tile';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations'; // You can import your Tile component here

function App() {
  const handleTileSelect = (isSelected) => {
    console.log(`Tile selected: ${isSelected}`);
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Tile icon="star" subtitle="sub" title="Favorite" onClick={handleTileSelect} dataTestId="favorite-tile" />
      <Tile image={<img src="image-url.jpg" alt="Image" />} title="Image Tile" onClick={handleTileSelect} dataTestId="image-tile" variant="image" />
    </BolttechThemeProvider>
  );
}

export default App;

Props

The Tile component accepts the following props:

Example

Here's an example of using the Tile component:

      <Tile
        icon="star"
        subtitle="sub"
        title="Favorite"
        onClick={handleTileSelect}
        dataTestId="favorite-tile"
      />
      <Tile
        image={<img src="image-url.jpg" alt="Image"/>}
        title="Image Tile"
        onClick={handleTileSelect}
        dataTestId="image-tile"
        variant="image"
      />

This will render two selectable tiles with different content types.

Contributing

Contributions to the Tile component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's Bitbucket repository.