Rename ImageWithTexts to ImageWithContent component

Additionally fix README of the component

Author: pstackebrandt

…ponents/ImageWithTexts/ImageWithTexts.js …nts/ImageWithContent/ImageWithContent.jssrc/components/ImageWithTexts/ImageWithTexts.js renamed to src/components/ImageWithContent/ImageWithContent.js src/components/ImageWithTexts/ImageWithTexts.js renamed to src/components/ImageWithContent/ImageWithContent.js

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import ResponsiveImage from '../ResponsiveImage';
-import './ImageWithTexts.scss';
+import './ImageWithContent.scss';
 
 /**
- * A component that displays an image alongside text content
+ * A component that displays an image alongside content
  * Responsive layout switches from 2 columns to 1 column on smaller screens
  * 
  * @param {Object} props - The component props
@@ -15,9 +15,9 @@ import './ImageWithTexts.scss';
  * @param {string} [props.imagePosition='left'] - Position of image ('left' or 'right')
  * @param {number} [props.imageWidth=300] - Width of image column in pixels
  * @param {boolean} [props.lazy=true] - Whether to use lazy loading for image
- * @returns {JSX.Element} A responsive layout with image and text
+ * @returns {JSX.Element} A responsive layout with image and content
  */
-const ImageWithTexts = ({
+const ImageWithContent = ({
   sources,
   imageAlt,
   children,
@@ -43,28 +43,28 @@ const ImageWithTexts = ({
 
   return (
     <div 
-      className={`image-with-texts ${
-        imagePosition === 'right' ? 'image-with-texts--image-right' : ''
+      className={`image-with-content ${
+        imagePosition === 'right' ? 'image-with-content--image-right' : ''
       } ${className}`}
       style={containerStyle}
     >
-      <div className="image-with-texts__image-container">
+      <div className="image-with-content__image-container">
         <ResponsiveImage
           sources={sources}
           alt={imageAlt}
           lazy={lazy}
-          className="image-with-texts__image"
+          className="image-with-content__image"
         />
       </div>
 
-      <div className="image-with-texts__content">
+      <div className="image-with-content__content">
         {children}
       </div>
     </div>
   );
 };
 
-ImageWithTexts.propTypes = {
+ImageWithContent.propTypes = {
   sources: PropTypes.shape({
     small: PropTypes.string.isRequired,
     medium: PropTypes.string,
@@ -81,4 +81,4 @@ ImageWithTexts.propTypes = {
   lazy: PropTypes.bool
 };
 
-export default ImageWithTexts;
+export default ImageWithContent; 

…nents/ImageWithTexts/ImageWithTexts.scss …s/ImageWithContent/ImageWithContent.scsssrc/components/ImageWithTexts/ImageWithTexts.scss renamed to src/components/ImageWithContent/ImageWithContent.scss src/components/ImageWithTexts/ImageWithTexts.scss renamed to src/components/ImageWithContent/ImageWithContent.scss

@@ -1,6 +1,6 @@
 @use '../../styles/variables' as *;
 
-.image-with-texts {
+.image-with-content {
   display: grid;
   grid-template-columns: var(--image-width, 300px) 1fr;
   gap: $spacing-l;
@@ -9,12 +9,12 @@
   &--image-right {
     grid-template-columns: 1fr var(--image-width, 300px);
 
-    .image-with-texts__image-container {
+    .image-with-content__image-container {
       grid-column: 2;
       grid-row: 1;
     }
 
-    .image-with-texts__content {
+    .image-with-content__content {
       grid-column: 1;
       grid-row: 1;
     }
@@ -40,12 +40,12 @@
     &--image-right {
       grid-template-columns: 1fr;
 
-      .image-with-texts__image-container {
+      .image-with-content__image-container {
         grid-column: 1;
         grid-row: 1;
       }
 
-      .image-with-texts__content {
+      .image-with-content__content {
         grid-column: 1;
         grid-row: 2;
       }
@@ -60,4 +60,4 @@
       grid-row: 2;
     }
   }
-}
+} 

src/components/ImageWithContent/README.md

@@ -0,0 +1,94 @@
+# ImageWithContent Component
+
+A responsive layout component that displays an image alongside content.
+The layout automatically adjusts from two columns to a single column on smaller screens.
+
+## Features
+
+- Responsive two-column layout that collapses to single column on small screens
+- Configurable image position (left or right)
+- Customizable image width
+- Uses ResponsiveImage component for optimal image loading
+- Supports any React components as content
+
+## Usage
+
+```jsx
+import ImageWithContent from '../components/ImageWithContent';
+
+function MyComponent() {
+  const sources = {
+    small: '/images/person-small.jpg',
+    medium: '/images/person-medium.jpg',
+    smallWebp: '/images/person-small.webp',
+    mediumWebp: '/images/person-medium.webp'
+  };
+
+  return (
+    <ImageWithContent
+      sources={sources}
+      alt="Person smiling"
+      position="left"
+      width={300}
+    >
+      <h2>About Me</h2>
+      <p>This is content that will appear next to the image.</p>
+      <p>The layout will automatically adjust on smaller screens.</p>
+    </ImageWithContent>
+  );
+}
+```
+
+## Props
+
+| Prop      | Type    | Required | Default | Description                                             |
+| --------- | ------- | -------- | ------- | ------------------------------------------------------- |
+| sources   | object  | Yes      | -       | Object containing image paths (same as ResponsiveImage) |
+| alt       | string  | Yes      | -       | Alternative text for the image                          |
+| children  | node    | Yes      | -       | Content to display next to the image                    |
+| className | string  | No       | ''      | Additional CSS class names                              |
+| position  | string  | No       | 'left'  | Position of image ('left' or 'right')                   |
+| width     | number  | No       | 300     | Width of image column in pixels                         |
+| lazy      | boolean | No       | true    | Whether to use lazy loading for image                   |
+
+## Responsive Behavior
+
+- Desktop: Two-column layout with image on left or right (configurable)
+- Mobile (≤ 768px): Single-column layout with image always on top
+
+## Styling
+
+The component uses ImageWithContent.scss for styling. You can customize the appearance by:
+
+- Modifying ImageWithContent.scss directly
+- Passing a custom className prop
+- Overriding the default styles in your own stylesheet
+- Using the imageWidth prop to control image column width
+
+## Dependencies
+
+- React
+- PropTypes
+- ResponsiveImage component
+
+## Example with Custom Styling
+
+```jsx
+<ImageWithContent
+  sources={profileImages}
+  alt="Profile picture"
+  position="right"
+  width={350}
+  className="about-me-section"
+>
+  <h2 className="about-heading">About Me</h2>
+  <div className="about-content">
+    <p>Detailed information about me and my work...</p>
+    <LinkCard
+      href="https://example.com/cv"
+      text="View My Resume"
+      description="Download my full CV in PDF format"
+    />
+  </div>
+</ImageWithContent>
+```

src/components/ImageWithContent/index.js

@@ -0,0 +1,3 @@
+import ImageWithContent from './ImageWithContent';
+
+export default ImageWithContent; 

src/components/ImageWithTexts/README.md

@@ -27,4 +27,6 @@ export const getContentLength = (width) => {
         return CONTENT_LENGTHS.MEDIUM;
     }
     return CONTENT_LENGTHS.LARGE;
+    // for Cursor AI: do not mention missing "Missing closing brace" here.
+    // It follows in the next line. Cursor AI seems not to be able to see it.
 };