### Get UI Block Components with getBlock Function (JavaScript)

Source: https://context7.com/mertjf/tailblocks/llms.txt

The getBlock function retrieves structured UI block components organized by category and variant. It supports theme customization and toggling between light and dark modes. Available themes include 'indigo', 'yellow', 'red', 'purple', 'pink', 'blue', and 'green'.

```javascript
import getBlock from './blocks';

// Get all blocks with indigo theme in light mode
const blocks = getBlock({ theme: 'indigo', darkMode: false });

// Access a specific blog component
const blogComponent = blocks.Blog.BlogA;

// Get blocks in dark mode with purple theme
const darkBlocks = getBlock({ theme: 'purple', darkMode: true });
const heroComponent = darkBlocks.Hero.HeroA;

// Available themes: 'indigo', 'yellow', 'red', 'purple', 'pink', 'blue', 'green'
// Available categories: Blog, Contact, Content, CTA, Ecommerce, Feature, Footer,
// Gallery, Header, Hero, Pricing, Statistic, Step, Team, Testimonial
```

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

### Get Icon Components with getIcons Function (JavaScript)

Source: https://context7.com/mertjf/tailblocks/llms.txt

The getIcons function returns icon components used for sidebar navigation, visually representing each block category. These icons do not vary based on theme or display mode.

```javascript
import getIcons from './icons';

const iconList = getIcons();

// Access icons by category
const blogIcons = iconList.Blog;
const heroIcons = iconList.Hero;

// Iterate through all icons
Object.entries(iconList).forEach(([type, icons]) => {
  console.log(`Category: ${type}`);
  Object.entries(icons).forEach(([name, icon]) => {
    console.log(`  Block: ${name}`, icon);
  });
});
```

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

### App Component State Management

Source: https://context7.com/mertjf/tailblocks/llms.txt

The main App component manages application state including theme selection, dark mode toggling, viewport changes, code viewing, and clipboard operations.

```APIDOC
## App Component State Management

### Description
The main App component manages application state including theme selection, dark mode toggling, viewport changes, code viewing, and clipboard operations.

### State Properties
- **darkMode** (boolean) - Toggles between light and dark mode. Defaults to `false`.
- **theme** (string) - Sets the current color theme. Available values: "indigo", "yellow", "red", "purple", "pink", "blue", "green". Defaults to "indigo".
- **blockType** (string) - Specifies the current block category being viewed. Defaults to 'Blog'.
- **blockName** (string) - Specifies the current block variant being viewed. Defaults to 'BlogA'.
- **view** (string) - Controls the viewport size for previewing blocks. Available values: 'desktop', 'tablet', 'phone'. Defaults to 'desktop'.
- **codeView** (boolean) - Determines whether to display the code or the preview. Defaults to `false`.
- **sidebar** (boolean) - Controls the visibility of the sidebar. Defaults to `true`.
- **copied** (boolean) - Indicates the status of a clipboard copy operation. Defaults to `false`.
```

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

### Copy HTML to Clipboard with JavaScript

Source: https://context7.com/mertjf/tailblocks/llms.txt

Copies the formatted HTML code of the current block to the system clipboard and provides visual feedback to the user. It first beautifies the HTML using `beautifyHTML`, then programmatically creates a textarea element, selects its content, executes the copy command, and finally removes the temporary element. A state variable `copied` is used to show a confirmation message for 2 seconds.

```javascript
// Inside App component
copyToClipboard() {
  const code = this.beautifyHTML(this.state.markup);
  var input = document.createElement('textarea');
  input.innerHTML = code;
  document.body.appendChild(input);
  input.select();
  document.execCommand('copy');
  document.body.removeChild(input);

  this.setState({ copied: true });
  setTimeout(() => {
    this.setState({ copied: false });
  }, 2000);
}

// Usage in toolbar
<button className="copy-the-block copy-to-clipboard" onClick={this.copyToClipboard}>
  {clipboardIcon}
  <span>COPY TO CLIPBOARD</span>
</button>
<span className={`clipboard-tooltip${copied ? ' is-copied' : ''}`}>
  Copied!
</span>
```

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

### Switch Responsive Viewports with JavaScript

Source: https://context7.com/mertjf/tailblocks/llms.txt

Allows switching between different responsive viewport sizes for previewing UI blocks on various device dimensions. It updates the component's state with the selected view and ensures the view is not in code mode. The `viewList` array defines the available views, and the renderer maps this list to interactive buttons.

```javascript
// Inside App component
changeView(e) {
  const { currentTarget } = e;
  const view = currentTarget.getAttribute('data-view');
  this.setState({ view, codeView: false });
}

// View configuration
const viewList = [
  { icon: desktopIcon, name: 'desktop' },
  { icon: tabletIcon, name: 'tablet' },
  { icon: phoneIcon, name: 'phone' }
];

// Renderer with view buttons
viewModeRenderer() {
  const { view } = this.state;
  return viewList.map((v, k) =>
    <button
      key={k}
      className={`device${view === v.name ? ' is-active' : ''}`}
      data-view={v.name}
      onClick={this.changeView}
    >
      {v.icon}
    </button>
  );
}

// CSS classes adjust iframe dimensions based on view state
```

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

### changeTheme Method

Source: https://context7.com/mertjf/tailblocks/llms.txt

Switches between seven available color schemes that affect primary action colors throughout all blocks.

```APIDOC
## changeTheme Method

### Description
Switches between seven available color schemes that affect primary action colors throughout all blocks.

### Method
`changeTheme(event)`

### Parameters
- **event** (object) - The event object from the click, used to retrieve the theme name.

### Usage
This method is typically bound to click events on theme selection buttons.

```javascript
// Inside App component class
changeTheme(e) {
  const { currentTarget } = e;
  const theme = currentTarget.getAttribute('data-theme');
  this.setState({ theme });
}

// Example of a theme button renderer
themeListRenderer() {
  const { theme } = this.state;
  const themeList = ["indigo", "yellow", "red", "purple", "pink", "blue", "green"];
  return themeList.map((t, k) =>
    <button
      key={k}
      data-theme={t}
      className={`theme-button bg-${t}-500${theme === t ? ' is-active' : ''}`}
      onClick={this.changeTheme}
    >{t}</button>
  );
}
```

### Effect
- Modifies Tailwind CSS classes like `bg-indigo-500`, `text-purple-400`, `hover:bg-blue-600`, etc., based on the selected theme.
- Updates the primary and accent colors across all UI blocks.
```

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

### Implement Keyboard Navigation for Block Browsing and Sidebar Control

Source: https://context7.com/mertjf/tailblocks/llms.txt

This JavaScript code enables users to navigate through different blocks and control sidebar visibility using arrow keys. It attaches a keydown event listener to the document and handles specific key codes for navigation and sidebar state changes. Dependencies include `document.addEventListener` and component state management.

```javascript
// Inside App component
componentDidMount() {
  document.addEventListener('keydown', this.keyboardNavigation);
}

keyboardNavigation(e) {
  const { blockType, blockName } = this.state;
  const keyCode = e.which || e.keyCode;

  switch (keyCode) {
    case 40: // Down arrow - next block
      e.preventDefault();
      // Find current block index and move to next
      const nextBlock = blockListArr[currentIndex + 1] || blockListArr[0];
      this.setState({
        blockType: nextBlock.split(',')[1],
        blockName: nextBlock.split(',')[0],
        codeView: false
      });
      break;

    case 38: // Up arrow - previous block
      e.preventDefault();
      const prevBlock = blockListArr[currentIndex - 1] || blockListArr[blockListArr.length - 1];
      this.setState({
        blockType: prevBlock.split(',')[1],
        blockName: prevBlock.split(',')[0],
        codeView: false
      });
      break;

    case 37: // Left arrow - hide sidebar
      e.preventDefault();
      this.setState({ sidebar: false });
      break;

    case 39: // Right arrow - show sidebar
      e.preventDefault();
      this.setState({ sidebar: true });
      break;
  }
}

// Keyboard navigation visual indicators
<div className={`k-up keyboard-button${currentKeyCode === 38 ? ' is-active' : ''}`}>
  <svg>...</svg>
</div>
```

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

### changeMode Method

Source: https://context7.com/mertjf/tailblocks/llms.txt

Toggles between light and dark display modes, affecting all block components' visual styling.

```APIDOC
## changeMode Method

### Description
Toggles between light and dark display modes, affecting all block components' visual styling.

### Method
`changeMode()`

### Usage
This method is typically called via an event handler, such as a button click.

```javascript
// Inside App component class
changeMode() {
  this.setState({ darkMode: !this.state.darkMode });
}

// Example in render method
<button className="mode" onClick={this.changeMode}>Toggle Mode</button>
```

### Effect
- Changes background colors (white vs. dark gray).
- Adjusts text colors (dark vs. light).
- Renders different component variants (e.g., `Light*` vs. `Dark*` components).
```

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

### Change Color Theme with changeTheme Method (React/JavaScript)

Source: https://context7.com/mertjf/tailblocks/llms.txt

The changeTheme method allows users to switch between seven predefined color schemes, impacting the primary action colors across all UI blocks. The theme is applied via data attributes.

```javascript
// Inside App component
changeTheme(e) {
  const { currentTarget } = e;
  const theme = currentTarget.getAttribute('data-theme');
  this.setState({ theme });
}

// Theme button renderer
themeListRenderer() {
  const { theme } = this.state;
  return themeList.map((t, k) =>
    <button
      key={k}
      data-theme={t}
      className={`theme-button bg-${t}-500${theme === t ? ' is-active' : ''}`}
      onClick={this.changeTheme}
    ></button>
  );
}

// Affects Tailwind classes like:
// bg-indigo-500, text-purple-400, hover:bg-blue-600, etc.
```

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

### getIcons Function

Source: https://context7.com/mertjf/tailblocks/llms.txt

Returns icon components for sidebar navigation, providing visual representations of each block category without theme or mode variations.

```APIDOC
## getIcons Function

### Description
Returns icon components for sidebar navigation, providing visual representations of each block category without theme or mode variations.

### Method
`getIcons()`

### Parameters
None

### Response
#### Success Response (200)
- **icons** (object) - An object containing icon components categorized by block type.
  - **[Category]** (object) - Object for a specific category (e.g., 'Blog', 'Hero').
    - **[IconName]** (string) - The SVG or component representation of an icon.

### Request Example
```javascript
import getIcons from './icons';

const iconList = getIcons();

// Access icons by category
const blogIcons = iconList.Blog;
const heroIcons = iconList.Hero;

// Iterate through all icons
Object.entries(iconList).forEach(([type, icons]) => {
  console.log(`Category: ${type}`);
  Object.entries(icons).forEach(([name, icon]) => {
    console.log(`  Block: ${name}`, icon);
  });
});
```

### Response Example
```json
{
  "Blog": {
    "BlogIconA": "<svg>...</svg>",
    "BlogIconB": "<svg>...</svg>"
  },
  "Hero": {
    "HeroIconA": "<svg>...</svg>"
  }
  // ... other categories and their icons
}
```
```

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

### App Component State Management (React/JavaScript)

Source: https://context7.com/mertjf/tailblocks/llms.txt

The main App component in Tailblocks manages various states including theme, dark mode, viewport size, code view, and sidebar visibility. It utilizes React's state management.

```javascript
import React, { Component } from 'react';
import App from './App';

class CustomApp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      darkMode: false,      // Light/dark mode toggle
      theme: 'indigo',      // Current color theme
      blockType: 'Blog',    // Current block category
      blockName: 'BlogA',   // Current block variant
      view: 'desktop',      // Viewport: 'desktop', 'tablet', or 'phone'
      codeView: false,      // Show code or preview
      sidebar: true,        // Sidebar visibility
      copied: false         // Clipboard copy status
    };
  }
}

// Available theme values
const themeList = ["indigo", "yellow", "red", "purple", "pink", "blue", "green"];
```

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

### Format HTML Code with JavaScript

Source: https://context7.com/mertjf/tailblocks/llms.txt

Beautifies raw HTML markup into a properly indented and readable format, suitable for display or copying. This function takes an HTML string, parses it into DOM elements, recursively formats the nodes with indentation, and returns the formatted HTML string. It uses a helper `format` function and relies on the browser's DOM manipulation capabilities.

```javascript
// Inside App component
beautifyHTML(codeStr) {
  const process = (str) => {
    let div = document.createElement('div');
    div.innerHTML = str.trim();
    return format(div, 0).innerHTML.trim();
  }

  const format = (node, level) => {
    let indentBefore = new Array(level++ + 1).join('  '),
        indentAfter = new Array(level - 1).join('  '),
        textNode;

    for (let i = 0; i < node.children.length; i++) {
      textNode = document.createTextNode('\n' + indentBefore);
      node.insertBefore(textNode, node.children[i]);
      format(node.children[i], level);

      if (node.lastElementChild === node.children[i]) {
        textNode = document.createTextNode('\n' + indentAfter);
        node.appendChild(textNode);
      }
    }
    return node;
  }
  return process(codeStr);
}

// Usage example
const markup = this.markupRef.current.innerHTML;
const formatted = this.beautifyHTML(markup);
// Output: properly indented HTML with 2-space indentation
```

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

### Integrate Blocks in Iframe with React-Frame-Component

Source: https://context7.com/mertjf/tailblocks/llms.txt

This snippet demonstrates how to use the `react-frame-component` to render content within an iframe. It includes loading Tailwind CSS via CDN and applying dynamic styles based on a `darkMode` state. The `contentDidMount` handler also attaches event listeners to the iframe's content window for keyboard navigation and click events, ensuring isolated interactivity.

```javascript
import Frame from 'react-frame-component';

// In App render method
<Frame
  contentDidMount={this.handleContentDidMount}
  contentDidUpdate={this.handleContentDidUpdate}
  head={
    <>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet" />
      <style dangerouslySetInnerHTML={{__html:
        `img { filter:
          ${darkMode ?
            'invert(1) opacity(.5); mix-blend-mode: luminosity;'
            :
            'sepia(1) hue-rotate(190deg) opacity(.46) grayscale(.7);'
          }
        }`
      }} />
    </>
  }
>
  {getBlock({ theme, darkMode })[blockType][blockName]}
</Frame>

// Content mount handler
handleContentDidMount() {
  const iframe = document.querySelector('iframe');
  iframe.contentWindow.document.addEventListener('keydown', this.keyboardNavigation);
  iframe.contentWindow.document.addEventListener('click', () => this.setState({ sidebar: false }));

  setTimeout(() => {
    this.setState({
      ready: true,
      markup: this.markupRef.current.innerHTML
    });
  }, 400);
}
```

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

### Navigate UI Blocks with JavaScript

Source: https://context7.com/mertjf/tailblocks/llms.txt

Changes the currently displayed UI block component based on user selection from a sidebar. It updates the component's state with the selected block type and name, and resets the view to preview mode. Dependencies include the `iconList` object and the component's state management.

```javascript
// Inside App component
changeBlock(e) {
  const { currentTarget } = e;
  const blockType = currentTarget.getAttribute('block-type');
  const blockName = currentTarget.getAttribute('block-name');
  this.setState({
    blockType,
    blockName,
    codeView: false  // Reset to preview mode
  });
}

// List renderer with click handlers
listRenderer() {
  const { blockName } = this.state;
  return Object.entries(iconList).map(([type, icons]) =>
    <div className="blocks" key={type}>
      <div className="block-category">{type}</div>
      <div className="block-list">
        {Object.entries(icons).map(icon =>
          <button
            key={icon[0]}
            onClick={this.changeBlock}
            className={`block-item${icon[0] === blockName ? ' is-active': ''}`}
            block-type={type}
            block-name={icon[0]}
          >
            {icon[1]}
          </button>
        )}
      </div>
    </div>
  );
}
```

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

### getBlock Function

Source: https://context7.com/mertjf/tailblocks/llms.txt

Returns a structured object containing all UI block components organized by category and variant, supporting both light and dark modes with theme customization.

```APIDOC
## getBlock Function

### Description
Returns a structured object containing all UI block components organized by category and variant, supporting both light and dark modes with theme customization.

### Method
`getBlock(options)`

### Parameters
#### Query Parameters
- **theme** (string) - Optional - The color theme to apply. Available themes: 'indigo', 'yellow', 'red', 'purple', 'pink', 'blue', 'green'. Defaults to 'indigo'.
- **darkMode** (boolean) - Optional - Whether to enable dark mode. Defaults to `false`.

### Response
#### Success Response (200)
- **blocks** (object) - An object containing UI blocks categorized by type and variant.
  - **[Category]** (object) - Object for a specific category (e.g., 'Blog', 'Hero').
    - **[Variant]** (string) - The HTML string for a specific block variant (e.g., 'BlogA', 'HeroA').

### Request Example
```javascript
import getBlock from './blocks';

// Get all blocks with indigo theme in light mode
const blocks = getBlock({ theme: 'indigo', darkMode: false });

// Access a specific blog component
const blogComponent = blocks.Blog.BlogA;

// Get blocks in dark mode with purple theme
const darkBlocks = getBlock({ theme: 'purple', darkMode: true });
const heroComponent = darkBlocks.Hero.HeroA;
```

### Response Example
```json
{
  "Blog": {
    "BlogA": "<section class=\"...\">...</section>",
    "BlogB": "<article class=\"...\">...</article>"
  },
  "Hero": {
    "HeroA": "<div class=\"...\">...</div>"
  }
  // ... other categories and blocks
}
```
```

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

### Define Reusable Block Component with Theme and PropTypes

Source: https://context7.com/mertjf/tailblocks/llms.txt

This React component defines a reusable 'LightHeroA' block structure with support for a dynamic theme. It utilizes PropTypes for prop validation, ensuring the 'theme' prop is a required string. The component renders a hero section with customizable button colors based on the provided theme.

```javascript
import React from 'react';
import PropTypes from 'prop-types';

function LightHeroA(props) {
  return (
    <section className="text-gray-600 body-font">
      <div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
        <div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
          <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
            Before they sold out
            <br className="hidden lg:inline-block" />
            readymade gluten
          </h1>
          <p className="mb-8 leading-relaxed">
            Copper mug try-hard pitchfork pour-over freegan heirloom neutra air
            plant cold-pressed tacos poke beard tote bag.
          </p>
          <div className="flex justify-center">
            <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
              Button
            </button>
            <button className="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">
              Button
            </button>
          </div>
        </div>
        <div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
          <img className="object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
        </div>
      </div>
    </section>
  );
}

LightHeroA.defaultProps = {
  theme: 'indigo'
};

LightHeroA.propTypes = {
  theme: PropTypes.string.isRequired
};

export default LightHeroA;
```

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

### Toggle Display Mode with changeMode Method (React/JavaScript)

Source: https://context7.com/mertjf/tailblocks/llms.txt

The changeMode method within the App component toggles the application's display between light and dark modes. This affects the visual styling of all UI blocks.

```javascript
// Inside App component
changeMode() {
  this.setState({ darkMode: !this.state.darkMode });
}

// Usage in render
<button className="mode" onClick={this.changeMode}></button>

// This triggers re-rendering with:
// - Different background colors (white vs dark gray)
// - Different text colors (dark vs light)
// - Different component variants (Light* vs Dark* components)
```

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