---
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>
				ฉันจำเป็นที่จะต้องทำ... Linux มีแอพลิเคชั่นสำหรับงานนั้นรึเปล่า
			</h1>
			<p>
				ด้านล่างนี้เป็นรายการสั้นๆ ของงานทั่วไปและแอพลิเคชั่น Linux
				ที่สามารถใช้ทำงานนั้นได้
			</p>
			<div class="mb-4">
				<span class="text-amber-600 dark:text-yellow-400">คำเตือน:</span
				> นี่ไม่ใช่และจะไม่มีทางเป็นรายการที่สมบูรณ์แบบ 100%
			</div>
			<AppList lang="th" client:load />
		</section>
		<section id="compatQuestions" class="mt-4">
			<h1>ความเข้ากันได้ของซอฟต์แวร์</h1>
			<p>ส่วนสั้น ๆ เกี่ยวกับความเข้ากันได้ของซอฟต์แวร์บน Linux</p>
			<details>
				<summary
					>เว็บแอพลิเคชั่นสามารถใช้งานได้รึเปล่า (Canva, Google Docs,
					Notion, ฯลฯ)</summary
				>
				<p>
					แอพเหล่านี้มีความน่าเป็นห่วงน้อยที่สุด
					ส่วนใหญ่แล้วก็ควรที่จะไม่มีปัญหาแต่อย่างใด
				</p>
			</details>
			<details>
				<summary>แอพลิเคชั่น Adobe ใช้งานได้หรือไม่</summary>
				<p>
					เป็นที่ทราบกันดีว่าอาจใช้งานได้ไม่ดีนัก
					แต่คุณก็สามารถลองดูได้ถ้าคุณต้องการ
				</p>
			</details>
			<details>
				<summary
					>ฉันสามารถใช้แอพหรือเกม Windows ที่ไม่ได้ถูกสร้างมาเพื่อ
					Linux ได้หรือไม่</summary
				>
				<p>
					มันเป็นไปได้ แต่ทุกอย่างจะไม่สามารถทำงานได้อย่างสมบูรณ์แบบ
					ดูที่<a href="https://appdb.winehq.org/"
						>ฐานข้อมูลแอพลิเคชั่น Wine</a
					> สำหรับแอพลิเคชั่นทั่วไปและ
					<a href="https://www.protondb.com/">ProtonDB</a> สำหรับเกมบน
					Steam
				</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>
