update

components/providers/DownloadDialog.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+import { Button } from "@/components/ui/button";
+import { X } from "lucide-react";
+import {
+	closeDownloadDialog,
+	getDownloadDialogState,
+	subscribeDownloadDialog
+} from "@/components/providers/download-dialog-store";
+import Link from "next/link";
+
+export function DownloadDialog() {
+	const state = useSyncExternalStore(
+		subscribeDownloadDialog,
+		getDownloadDialogState,
+		getDownloadDialogState
+	);
+
+	const isLinux =
+		typeof window !== "undefined" && navigator.userAgent.includes("Linux");
+	const downloadUrl = state.url ?? "https://www.roblox.com/download/client";
+
+	if (!state.isOpen) return null;
+
+	return (
+		<div
+			className="fixed inset-0 z-[90] flex items-center justify-center bg-mantle/70 backdrop-blur-sm"
+			onClick={closeDownloadDialog}
+		>
+			<div
+				className="relative w-[94vw] max-w-4xl rounded-2xl bg-crust/95 ring-1 ring-surface0/60 shadow-2xl"
+				onClick={(event) => event.stopPropagation()}
+			>
+				<Button
+					variant="ghost"
+					size="icon"
+					onClick={closeDownloadDialog}
+					aria-label="Close download"
+					className="absolute right-3 top-3"
+				>
+					<X className="h-4 w-4" />
+				</Button>
+				<div className="px-6 py-7 sm:px-8 sm:py-8">
+					<div className="max-w-3xl space-y-2">
+						<h2 className="text-2xl font-semibold text-text sm:text-3xl">
+							Thanks for downloading Roblox
+						</h2>
+						{isLinux ? (
+							<p className="text-sm text-subtext0">
+								Unfortunately, Roblox does not support Linux
+								natively. The only way to play Roblox on Linux
+								as of now is through{" "}
+								<Link
+									href="https://sober.vinegarhq.org"
+									target="_blank"
+									rel="noopener noreferrer"
+									className="text-text underline underline-offset-4"
+								>
+									Sober
+								</Link>
+								.
+							</p>
+						) : (
+							<p className="text-sm text-subtext0">
+								Just follow the steps below to install Roblox.
+								The download should start in a few seconds. If
+								it doesn't,{" "}
+								<a
+									href={downloadUrl}
+									target="_blank"
+									rel="noopener noreferrer"
+									className="text-text underline underline-offset-4"
+								>
+									restart the download
+								</a>
+								.
+							</p>
+						)}
+					</div>
+					<div className="mt-6 grid gap-6 md:grid-cols-[1.15fr,0.85fr] md:gap-8 md:divide-x md:divide-surface0/60">
+						<div className="space-y-4 md:pr-8">
+							<p className="text-sm font-semibold text-text">
+								Install Instructions
+							</p>
+							<ol className="list-decimal space-y-3 pl-5 text-sm text-subtext0">
+								{isLinux ? (
+									<>
+										<li>
+											<Link
+												href="https://flathub.org/en/setup"
+												target="_blank"
+												rel="noopener noreferrer"
+												className="text-text underline underline-offset-4"
+											>
+												Install Flatpak
+											</Link>{" "}
+											using the guide provided for your
+											distro.
+										</li>
+										<li>
+											Add the Flathub repository to your
+											system with following command:
+											<pre className="mt-2 rounded bg-surface0 p-2 text-xs text-text">
+												<code>
+													flatpak remote-add
+													--if-not-exists flathub
+													https://flathub.org/repo/flathub.flatpakrepo
+												</code>
+											</pre>
+										</li>
+										<li>
+											Install and run Sober with these
+											commands:
+											<pre className="mt-2 rounded bg-surface0 p-2 text-xs text-text">
+												<code>
+													flatpak install flathub
+													org.vinegarhq.Sober
+												</code>
+											</pre>
+											<pre className="mt-2 rounded bg-surface0 p-2 text-xs text-text">
+												<code>
+													flatpak run
+													org.vinegarhq.Sober
+												</code>
+											</pre>
+										</li>
+									</>
+								) : (
+									<>
+										<li>
+											Once downloaded, double-click the{" "}
+											<span className="font-semibold text-text">
+												Roblox.exe
+											</span>{" "}
+											file in your Downloads folder.
+										</li>
+										<li>
+											Double-click{" "}
+											<span className="font-semibold text-text">
+												RobloxPlayerInstaller
+											</span>{" "}
+											to install the app.
+										</li>
+										<li>
+											Follow the instructions to install
+											Roblox on your computer.
+										</li>
+										<li>
+											Now that Roblox is installed,{" "}
+											<a
+												href="https://www.roblox.com/discover"
+												target="_blank"
+												rel="noopener noreferrer"
+												className="text-text underline underline-offset-4"
+											>
+												join the experience
+											</a>
+											.
+										</li>
+									</>
+								)}
+							</ol>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}