GitHubCallout

[erunion]

<GitHubCallout>

I've always been very fond of the way that GitHub renders callouts:

Tip

Like this!

This replicates that with a new component.

Usage

Please add a usage example, as well as any other pertinent details, here.

<GitHubCallout type="tip">
  Like this!
</GitHubCallout>

[gkoberger]

This may or may not work, just make sure it does! (I can see it working in the preview but not working when used)

The reason is that Tailwind compiles down the strings for performance reasons, so it doesn't understand interpolation like this.

If it doesn't work, the way to fix it is to do this:

color  = 'border-green-500';
...
<div className={`pl-3 border-l-1 ${color}`}>

(Tailwind just uses a regex to find everything that fits, so as long as it's written SOMEWHERE in the code it'll catch it. But it can't deal with variables like this.)

(If it works in the preview, it should work everywhere! If not that's a bigger issue we should address.)

[gkoberger]

(If you get stuck here, just ping me and I can help out! Both for this PR and ReadMe in general)

[erunion]

My eyes may be deceiving because of the minor difference I put in for the light vs dark colors but it seems to be working as-is?

[erunion]

@kellyjosephprice is doing a small tweak to the Markdown library in readmeio/markdown#1075 to allow for this to override our core Callout component. will refactor this with those prop changes when that lands. moving to draft for now!