From a0606e56611b9ffd0d6583a32e229603fd86c2f3 Mon Sep 17 00:00:00 2001
From: fgrreloaded <nk.nitish.nk500@gmail.com>
Date: Mon, 17 Feb 2025 21:16:41 +0530
Subject: [PATCH] added custom command view for flow

---
 .../app/(home)/_components/CommandDisplay.tsx | 37 +++++++++++++++++++
 .../(home)/_components/CustomizableStack.tsx  | 24 +++++++++++-
 2 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/src/app/(home)/_components/CommandDisplay.tsx

diff --git a/apps/web/src/app/(home)/_components/CommandDisplay.tsx b/apps/web/src/app/(home)/_components/CommandDisplay.tsx
new file mode 100644
index 0000000..6ec4686
--- /dev/null
+++ b/apps/web/src/app/(home)/_components/CommandDisplay.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { Check, Copy } from "lucide-react";
+import { useState } from "react";
+
+interface CommandDisplayProps {
+	command: string;
+}
+
+export function CommandDisplay({ command }: CommandDisplayProps) {
+	const [copied, setCopied] = useState(false);
+
+	const copyToClipboard = async () => {
+		await navigator.clipboard.writeText(command);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2000);
+	};
+
+	return (
+		<div className="relative group">
+			<div className="bg-gray-950/90 border border-gray-800 rounded-lg p-4 font-mono text-sm text-gray-300 overflow-x-auto">
+				<button
+					type="button"
+					onClick={copyToClipboard}
+					className="absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-md hover:bg-gray-800 transition-colors"
+				>
+					{copied ? (
+						<Check className="w-4 h-4 text-green-500" />
+					) : (
+						<Copy className="w-4 h-4 text-gray-400" />
+					)}
+				</button>
+				<pre className="pr-12">{command}</pre>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/web/src/app/(home)/_components/CustomizableStack.tsx b/apps/web/src/app/(home)/_components/CustomizableStack.tsx
index 5ac5993..d5ac571 100644
--- a/apps/web/src/app/(home)/_components/CustomizableStack.tsx
+++ b/apps/web/src/app/(home)/_components/CustomizableStack.tsx
@@ -12,6 +12,7 @@ import { useCallback, useState } from "react";
 import { TechSelector } from "./TechSelector";
 import "@xyflow/react/dist/style.css";
 import { initialNodes } from "@/lib/constant";
+import { CommandDisplay } from "./CommandDisplay";
 import { TechNodeComponent } from "./TechNodeComponent";
 
 const initialEdges = [
@@ -136,10 +137,29 @@ const CustomizableStack = () => {
 		[nodes, edges, setEdges, setNodes],
 	);
 
+	const generateCommand = useCallback(() => {
+		const flags: string[] = ["-y"];
+
+		if (activeNodes.database !== "libsql") {
+			flags.splice(flags.indexOf("-y"), 1);
+			flags.push(`--database ${activeNodes.database}`);
+		}
+
+		if (activeNodes.auth !== "better-auth") {
+			flags.splice(flags.indexOf("-y"), 1);
+			flags.push("--no-auth");
+		}
+
+		return `npx create-better-t-stack my-app ${flags.join(" ")}`;
+	}, [activeNodes]);
+
 	return (
-		<div className="relative w-full max-w-5xl mx-auto z-50">
+		<div className="relative w-full max-w-5xl mx-auto z-50 mt-24">
 			<TechSelector onSelect={handleTechSelect} activeNodes={activeNodes} />
-			<div className="absolute top-4 right-4 z-50 max-w-xs bg-gray-950/10 p-4 rounded-xl border border-gray-800 backdrop-blur-3xl">
+			<div className="absolute -top-16 left-1/2 -translate-x-1/2 z-50 w-96">
+				<CommandDisplay command={generateCommand()} />
+			</div>
+			<div className="bg-gray-950/10 p-4 absolute top-4 right-4 z-50 w-96 rounded-xl border border-gray-800 backdrop-blur-3xl">
 				<div className="text-sm text-gray-300">
 					Select technologies from the left panel to customize your stack. The
 					graph will automatically update connections.