style: rename Image web-component (#238)

Having Image.astro be the image-block web component is confusing

# Changes

- Rename ImageBlock webcomponent to ImageComponent

# How to test

1. Verify if images still work

# Checklist

- [x] I have performed a self-review of my own code
- [x] I have made sure that my PR is easy to review (not too big,
includes comments)
- [x] I have made updated relevant documentation files (in project
README, docs/, etc)
- [ ] ~I have added a decision log entry if the change affects the
architecture or changes a significant technology~
- [x] I have notified a reviewer

<!-- Please strike through and check off all items that do not apply
(rather than removing them) -->

src/blocks/ImageBlock/Image.astro

@@ -27,7 +27,7 @@ const { image, loading = 'lazy' } = Astro.props;
 const altText = image.alt ? image.alt : ''; // default to empty string for accessibility
 const imageUnavailableMessage = t('image_unavailable');
 ---
-<image-block>
+<image-component>
   <figure>
     {
       image.responsiveImage
@@ -58,7 +58,7 @@ const imageUnavailableMessage = t('image_unavailable');
       <figcaption>{ image.title }</figcaption>
     )}
   </figure>
-</image-block>
+</image-component>
 
 <script src="./Image.client.ts"></script>
 

src/blocks/ImageBlock/Image.client.ts

@@ -2,7 +2,7 @@
  * A custom HTML element that enhances an `<img>` element with additional behavior.
  * Automatically removes the inline `background-image` style once the image is fully loaded.
  */
-class ImageBlock extends HTMLElement {
+class ImageComponent extends HTMLElement {
   imgElement: HTMLImageElement;
 
   handleImageLoad = (): void => {
@@ -28,4 +28,4 @@ class ImageBlock extends HTMLElement {
   }
 }
 
-customElements.define('image-block', ImageBlock);
+customElements.define('image-component', ImageComponent);