---
import AppList from "@/components/AppList";
import BasicLayout from "@/layouts/BasicLayout.astro";
---

<BasicLayout title="Linux Applications">
	<main class="my-8 mx-16">
		<section id="appList">
			<h1>I need to do ..., Does Linux have an app for it?</h1>
			<p>
				Below is a short list of common tasks and native Linux apps that
				can be used for it.
			</p>
			<div class="mb-4">
				<span class="text-amber-600 dark:text-yellow-400">Warning:</span
				> This is not and can never be a 100% complete list.
			</div>
			<AppList lang="en" client:load />
		</section>
		<section id="compatQuestions" class="mt-4">
			<h1>Software Compatibility</h1>
			<p>A short section about software compatibility in Linux.</p>
			<details>
				<summary
					>Does web applications work? (Canva, Google Docs, Notion,
					etc.)</summary
				>
				<p>
					These apps are the least concerning and if you use these
					apps, you'll do just fine.
				</p>
			</details>
			<details>
				<summary>Does Adobe apps work?</summary>
				<p>
					It is known to not work very well, however, you can try if
					you wish.
				</p>
			</details>
			<details>
				<summary
					>Can I run Windows apps/games that aren't native on Linux?</summary
				>
				<p>
					It is possible, however, not everything will work perfectly.
					See the
					<a href="https://appdb.winehq.org/"
						>Wine Application Database</a
					> for regular applications and
					<a href="https://www.protondb.com/">ProtonDB</a> for Steam games.
				</p>
			</details>
		</section>
	</main>
</BasicLayout>

<style>
	@reference "@/styles/global.css";

	h1 {
		@apply text-4xl font-bold mb-4;
	}

	p {
		@apply my-2;
	}

	details {
		@apply border dark:border-slate-700 border-gray-300 px-4 py-2 rounded mb-2;
	}
</style>
