search

mintlify / components

UI components for documentation made with React and TailwindCSS.
MIT License
79 stars 12 forks source link

Make components to show images side by side #56

Open ghost opened 1 year ago

ghost commented 1 year ago

Developers frequently need to show images side by side. That's fine on regular websites but manually specifying widths and padding is annoying when you just want to write docs.

We want to provide components that lets Mintlify users show multiple images side by side taking up equal amounts of space. For example:

<ImageRow count={2}>
  <img />
  <img />
</Row>

Should show two images side by side like on this page. The HTML for those two images is:

<div className="flex flex-row justify-between">
  <img src="/img/activity_small.png" width={"48%"} />
  <img src="/img/sleep_small.png" width={"48%"} />
</div>

However, we cannot directly modify child components inside the proposed ImageRow component. Whoever attempts this could use the children: variant to modify the CSS of Row's children like we do in CodeBlock

Vishrut19 commented 1 year ago

Hi! Can i work on this issue ?

ghost commented 1 year ago

Yes! Let me know if you have any questions.

internetdrew commented 1 year ago

Has anyone found a solution to this? I would love to take a crack at it, if not.