feat: Compatilibity component

[vasfvitor]

OUTDATED read next comments

Opening this PR just so it can be seen live. I think this components could be like the "plugin links" that accepts the name of plugin as a prop and that's it. Example <PluginLinks plugin="clipboard-manager" />.

In this PR there are two versions of the compatibility component that implements Amr and Simon ideas, respectively:

1. Showing Linux distros inline: Sample pages: features/authenticator, features/autostart and features/barcode-scanner

2. Showing Linux distros in a tooltip, if necessary (needs to make mobile accessible): Sample pages: features/cli and features/clipboard

Aesthetically both can be improved, even more the tooltip by using JS (which I don't think should be done). Plus, neither version is supposed to be the definitive or the only possibles implementation of this feature

TODO: Take in account feedback sent by AlmostSenselessCoder in discord https://discord.com/channels/616186924390023171/662624589037436928/1211237670110629978

• [ ] Screen readers (sr-only). Colours and hover alone creates an inaccessible or hard to access UI. It needs to expand on click too, not just on hover
• [ ] Click targets, see minimum recommended

TODO: Rename component TODO: Consider icons

[netlify[bot]]

✅ Deploy Preview for tauri-v2 ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	a97da849870e3e99b1246823fc80dec80fb28df2
🔍 Latest deploy log	https://app.netlify.com/sites/tauri-v2/deploys/66ccd95ed34ce40008c8cf00
😎 Deploy Preview	https://deploy-preview-1881--tauri-v2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 99 (🔴 down 1 from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 92 (no change from production) PWA: 80 (no change from production) View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[vasfvitor]

CanIuse sample json, if need something alike. https://github.com/Fyrd/caniuse/blob/main/sample-data.json

For now I created a JSON with all the plugins and modified the component api to match the PluginLinks.astro api, so in the future we may consider combining them into a PluginsHeader.astro component

<CompatList plugin="authenticator" />

So there's no need to make changer per page, one json to rule them all

[vasfvitor]

Are we gonna use icons?

As of now I think it's ok to be reviewed. The JSON was made from the workspace/v2 table

About accessibility, is there any improvements that could be done?