# Item Component

A small reusable UI component that shows an image on the left and three text areas on the right.

## Files

- `item-component.js` — ES module that exports `createItemComponent()` (default export).
- `index.html` — example usage (the project includes a demo where multiple items are laid out in a responsive grid).

## Import

Use as an ES module in a browser environment:

```html
<script type="module">
import createItemComponent from './item-component.js';

const el = createItemComponent({
  imgSrc: 'images/example.jpg',
  imgAlt: 'Item image',
  text1: 'Title',
  text2: 'Subtitle',
  text3: 'Description or note',
  editable: false
});

document.body.appendChild(el);
</script>
```

## Options

- `imgSrc` (string) — image URL. If omitted, an empty `<img>` is created.
- `imgAlt` (string) — image alt text.
- `text1` (string) — first text area (displayed as title by default).
- `text2` (string) — second text area (subtitle).
- `text3` (string) — third text area (description).
- `editable` (boolean) — when `true` the text areas are rendered as editable `<textarea>` elements instead of static text.
- `imgWidth`, `imgHeight` (number) — optional image dimensions in pixels (default 80 each).

## Layout & Styling

`item-component.js` injects a small stylesheet into the document head when first used. Key classes:

- `.item-component` — single item container.
- `.item-component__img img` — the image element.
- `.item-component__content` — wrapper for the three text lines.
- `.item-component__line--title`, `--subtitle`, `--desc` — line-specific classes.
- `.item-component-grid` — helper grid wrapper (3 columns by default). Wrap multiple item components in an element with this class to arrange them side-by-side.

Example: place components side-by-side by giving the parent `class="item-component-grid"` (see `index.html`). The stylesheet includes responsive breakpoints (3 → 2 → 1 column).

## Examples

Render multiple items in a grid (as used in `index.html`):

```html
<div id="items" class="item-component-grid"></div>
<script type="module">
import createItemComponent from './item-component.js';
const root = document.getElementById('items');
[
  { imgSrc: 'https://picsum.photos/seed/1/200/200', text1: 'A', text2: 'B', text3: 'C' },
  { imgSrc: 'https://picsum.photos/seed/2/200/200', text1: 'D', text2: 'E', text3: 'F' }
].forEach(data => root.appendChild(createItemComponent(data)));
</script>
```

## Customization

- To change image size, pass `imgWidth` and `imgHeight` when creating the component.
- To alter the default grid columns or spacing globally, add your own CSS targeting `.item-component-grid` (the injected styles are minimal and can be overridden by another stylesheet loaded later).
- To change the visual chrome (border, background, radius), override `.item-component` styles in `main.css` or another stylesheet loaded after the component.

## Notes

- The component is vanilla JS with no external dependencies.
- Works in modern browsers that support ES modules.

If you want, I can:
- Add a small README with screenshots.
- Add local example images under an `images/` folder and update `index.html` to use them.
- Export the component as a custom element (`<item-component>`) instead of a factory function.