feature(bento): make it RTL compatible

[zaaakher]

This PR simply replaces ml-2 to ms-2 and also rotates the arrow 180 degrees on RTL

[vercel]

@zaaakher is attempting to deploy a commit to the product-studio Team on Vercel.

A member of the Team first needs to authorize it.

[itsarghyadas]

@zaaakher Hey, I didn’t quite get what this is for.

Could you show me what changes it makes and what you’re trying to achieve here?

[zaaakher]

@zaaakher Hey, I didn’t quite get what this is for.

Could you show me what changes it makes and what you’re trying to achieve here?

Sure, here's a way to try out the difference:

This will not look correct in RTL

        <a href={href} dir="ltr">
          This is LTR
          <ArrowRightIcon className="ml-2 h-4 w-4" />
        </a>
        <a href={href} dir="rtl">
          This is RTL
          <ArrowRightIcon className="ml-2 h-4 w-4" />
        </a>

Notice the dir property. In the second tag, the text and the icon will not have space between them. That's because it will always do margin-left regardless of the document direction.

This will work correctly regardless of direction

        <a href={href} dir="ltr">
          This is LTR
          <ArrowRightIcon className="ms-2 h-4 w-4" />
        </a>
        <a href={href} dir="rtl">
          This is RTL
          <ArrowRightIcon className="ms-2 h-4 w-4" />
        </a>

In the old days, we used to conditionally pass different css if the current language is "ar" (an RTL language) or if it's "en" and adjust our padding and margins accordingly. But with margin-inline-start and margin-inline-end it will work the same regardless of the direction of the document.

Learn more in tailwind: https://tailwindcss.com/docs/padding#using-logical-properties
and MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start

TLDR: These properties are direction agnostic. So whenever we use MagicUI in a RTL website, the UI won't break because we're using these properties:

ms-* instead of ml-*
me-* instead of mr-*
ps-* instead of pl-*
pe-* instead of pr-*
start-* instead of left-*
end-* instead of right-*

Try setting the dir property to rtl in MagicUI and you'll see some UI break (but it's easy to fix)

I noticed OriginUI already use the logical properties so whenever I use their components in my Arabic website it works correctly out of the box.

[zaaakher]

Here are some visuals:

Before

Notice in the second image (Arabic) the space between the arrow icon and the text is wrong, and also the arrow is pointing in the wrong direction.

After

Notice the first image (English) is unaffected while the second one (Arabic) is fixed.

Learn more about the rtl: modifier in tailwind: https://tailwindcss.com/docs/hover-focus-and-other-states#rtl-support

[itsarghyadas]

Thank you for making the PR and suggesting this change. It was a great suggestion!