Initial Commit

ITEM_COMPONENT.md

@@ -0,0 +1,83 @@
+# 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.