Component center img

[YUUU23]

• In docs/assets/center_img.jsx: Create new component <CenterImg /> that follows JSX original issue

<div textAlign="center">
  <image src={src} alt="alt" />
</div>

suggested (passed in as props) with additional prop item imgStyle specifying any style attributes (such as height) the image should take

• in mdx files in /docs: those that contain image tags (originally <img />) are changed to <CenterImg /> for uniformed centering image component

[github-actions]

Visit the preview URL for this PR (updated for commit 834e37b):

https://ccv-honeycomb-docs--pr143-component-center-img-01ozszps.web.app

_{(expires Thu, 18 Jul 2024 15:08:18 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: d403a110fede5b0308678a87537bf61d0597aef6}

[RobertGemmaJr]

Can you do the git merge main fix here as well?

[RobertGemmaJr]

A great way of doing prop delegation is by using the spread operator

[YUUU23]

I see! This looks really nice and makes more sense to keep things clean. I tried to modify the current CenteredImage component to use this! Thank you!

[RobertGemmaJr]

This is an example of how you could set up the component with prop delegation

Suggested change

	export default function CenterImg(props) {
	export default function CenterImg({src, alt, ...delegated}) {

[RobertGemmaJr]

There's an extra empty line here

Suggested change

[RobertGemmaJr]

A couple semantic things here

1. I would call this component CenteredImage as component are things ("A centered image") and not an action ("a function that centers an image") - hope that makes sense!
2. After this could you rename the file itself to be CenteredImage.jsx? Different companies may have different naming conventions but it's generally best to give the file the same exact name as the component

[YUUU23]

I see! This makes so much sense; thank you so much :) ! Just went in and refactored the semantics.

[RobertGemmaJr]

If you destructure the delegated prop object into the image it will handle all of the style props for you!

Suggested change

	return (
	<div style={{ textAlign: "center" }}>
	<img src={src} alt={alt} style={imgStyleString} />
	</div>
	);
	return (
	<div style={{ textAlign: "center" }}>
	<img src={src} alt={alt} {...delegated} />
	</div>
	);

[RobertGemmaJr]

This means you can delete lines 13-21

[RobertGemmaJr]

So sorry but I'm gonna be super annoying 🫣

Can you move the CenteredImage.jsx file from docs/assets/ to /components/? You'll have to create the components folder. From there you can import it as :

import CenteredImage from '@site/components/CenteredImage';

So sorry I didn't catch this sooner!

[RobertGemmaJr]

🚀 Thanks for all the little fixes!