create-better-t-stack/apps/web/src/app/(home)/_components/CodeContainer.tsx

"use client";
import { useEffect, useRef, useState } from "react";

const CodeContainer = () => {
	const [isOpen, setIsOpen] = useState(false);
	const [selectedPM, setSelectedPM] = useState<"npm" | "pnpm" | "bun">("npm");
	const [copied, setCopied] = useState(false);
	const menuRef = useRef<HTMLDivElement>(null);
	const [typingComplete, setTypingComplete] = useState(false);
	const [currentStep, setCurrentStep] = useState(0);

	useEffect(() => {
		const handleClickOutside = (event: MouseEvent) => {
			if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
				setIsOpen(false);
			}
		};

		document.addEventListener("mousedown", handleClickOutside);
		return () => document.removeEventListener("mousedown", handleClickOutside);
	}, []);

	const commands = {
		npm: "npx create-better-t-stack@latest",
		pnpm: "pnpm create better-t-stack@latest",
		bun: "bun create better-t-stack@latest",
	};

	const copyToClipboard = async (pm: "npm" | "pnpm" | "bun") => {
		await navigator.clipboard.writeText(commands[pm]);
		setSelectedPM(pm);
		setCopied(true);
		setIsOpen(false);
		setTimeout(() => setCopied(false), 2000);
	};

	useEffect(() => {
		if (!typingComplete) {
			const timer = setTimeout(() => {
				setTypingComplete(true);
			}, 1000);
			return () => clearTimeout(timer);
		}

		if (typingComplete && currentStep < 5) {
			const timer = setTimeout(() => {
				setCurrentStep((prev) => prev + 1);
			}, 800);
			return () => clearTimeout(timer);
		}
	}, [typingComplete, currentStep]);

	return (
		<div className="w-full max-w-3xl mx-auto mt-8">
			<div className="rounded-md bg-gray-50/90 dark:bg-gray-950/50 backdrop-blur-3xl border border-gray-300 dark:border-blue-500/30 overflow-hidden">
				<div className="flex items-center justify-between bg-gray-200/80 dark:bg-blue-900/10 px-4 py-2 border-b border-gray-300 dark:border-blue-800/30">
					<div className="flex items-center">
						<div className="flex space-x-2">
							<div className="w-3 h-3 rounded-full bg-red-500/60" />
							<div className="w-3 h-3 rounded-full bg-yellow-500/60" />
							<div className="w-3 h-3 rounded-full bg-green-500/60" />
						</div>
						<div className="ml-4 text-sm text-gray-700 dark:text-blue-300 font-mono">
							terminal
						</div>
					</div>

					{/* Package Manager Selector */}
					<div className="relative" ref={menuRef}>
						<button
							type="button"
							onClick={() => setIsOpen(!isOpen)}
							className="flex items-center px-2 py-1 text-sm bg-white/50 dark:bg-black/50 rounded border border-gray-300 dark:border-blue-500/30 hover:bg-gray-200/80 dark:hover:bg-blue-900/20"
						>
							<span className="text-gray-700 dark:text-blue-400 mr-2">
								{selectedPM}
							</span>
							<svg
								className="w-4 h-4 text-gray-700 dark:text-blue-400"
								fill="none"
								stroke="currentColor"
								viewBox="0 0 24 24"
							>
								<title>Toggle Dropdown</title>
								<path
									strokeLinecap="round"
									strokeLinejoin="round"
									strokeWidth={2}
									d={isOpen ? "M5 15l7-7 7 7" : "M19 9l-7 7-7-7"}
								/>
							</svg>
						</button>

						{isOpen && (
							<div className="absolute right-0 mt-2 w-36 bg-white dark:bg-black border border-gray-300 dark:border-blue-500/30 rounded-md shadow-lg z-50">
								<ul>
									{(Object.keys(commands) as Array<"npm" | "pnpm" | "bun">).map(
										(pm) => (
											<li key={pm}>
												<button
													type="button"
													className={`block w-full text-left px-4 py-2 text-sm ${
														selectedPM === pm
															? "bg-gray-200 dark:bg-blue-900/30 text-gray-800 dark:text-blue-400"
															: "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-blue-900/20"
													}`}
													onClick={() => copyToClipboard(pm)}
												>
													{pm}
												</button>
											</li>
										),
									)}
								</ul>
							</div>
						)}
					</div>
				</div>

				<div className="p-4 font-mono text-sm bg-white dark:bg-transparent">
					<div className="flex items-center">
						<div className="flex-grow">
							<span className="text-blue-600 dark:text-blue-500 mr-2">$</span>
							<span className="text-gray-800 dark:text-white">
								{commands[selectedPM]}
							</span>
							<span
								className={
									typingComplete
										? "hidden"
										: "text-blue-600 dark:text-blue-500 animate-pulse ml-1"
								}
							>
								▌
							</span>
						</div>
						<button
							type="button"
							onClick={() => copyToClipboard(selectedPM)}
							className="text-gray-600 dark:text-blue-400 hover:text-gray-800 dark:hover:text-blue-300"
							title="Copy to clipboard"
						>
							{copied ? (
								<CheckIcon className="w-5 h-5" />
							) : (
								<CopyIcon className="w-5 h-5" />
							)}
						</button>
					</div>

					{typingComplete && (
						<>
							<div className="mt-2 pl-4 text-amber-600 dark:text-yellow-400">
								{currentStep >= 1 && (
									<p
										className={`transition-opacity duration-300 ${
											currentStep >= 1 ? "opacity-100" : "opacity-0"
										}`}
									>
										Creating a new Better-T-Stack project
									</p>
								)}
								{currentStep >= 2 && (
									<div className="mt-2">
										<p className="text-gray-800 dark:text-white">
											Project name:{" "}
											<span className="text-amber-600 dark:text-yellow-400">
												my-t-stack
											</span>
										</p>
										<p className="text-gray-800 dark:text-white">
											Database:{" "}
											<span className="text-amber-600 dark:text-yellow-400">
												postgres
											</span>
										</p>
										<p className="text-gray-800 dark:text-white">
											ORM:{" "}
											<span className="text-amber-600 dark:text-yellow-400">
												drizzle
											</span>
										</p>
										<p className="text-gray-800 dark:text-white">
											Authentication:{" "}
											<span className="text-amber-600 dark:text-yellow-400">
												yes
											</span>
										</p>
										<p className="text-gray-800 dark:text-white">
											Addons:{" "}
											<span className="text-amber-600 dark:text-yellow-400">
												docker, github-actions, SEO
											</span>
										</p>
									</div>
								)}
							</div>

							{currentStep >= 3 && (
								<div className="mt-3 pl-4">
									<p className="text-blue-600 dark:text-blue-400">
										✓ Creating project structure
									</p>
									{currentStep >= 4 && (
										<p className="text-blue-600 dark:text-blue-400">
											✓ Installing dependencies
										</p>
									)}
									{currentStep >= 5 && (
										<>
											<p className="text-blue-600 dark:text-blue-400">
												✓ Setting up database
											</p>
											<p className="text-blue-600 dark:text-blue-400">
												✓ Configuring authentication
											</p>
											<p className="text-gray-800 dark:text-white mt-2">
												Project ready! Happy coding!
											</p>
										</>
									)}
								</div>
							)}
						</>
					)}

					<div className={`flex mt-4 ${typingComplete ? "" : "hidden"}`}>
						<span className="text-blue-600 dark:text-blue-500 mr-2">$</span>
						<span className="text-blue-600 dark:text-blue-500 animate-pulse">
							▌
						</span>
					</div>
				</div>
			</div>
		</div>
	);
};

const CopyIcon = ({ className = "" }) => (
	<svg
		className={className}
		fill="none"
		stroke="currentColor"
		viewBox="0 0 24 24"
		xmlns="http://www.w3.org/2000/svg"
	>
		<title>copy</title>
		<path
			strokeLinecap="round"
			strokeLinejoin="round"
			strokeWidth={2}
			d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
		/>
	</svg>
);

const CheckIcon = ({ className = "" }) => (
	<svg
		className={className}
		fill="none"
		stroke="currentColor"
		viewBox="0 0 24 24"
		xmlns="http://www.w3.org/2000/svg"
	>
		<title>check</title>
		<path
			strokeLinecap="round"
			strokeLinejoin="round"
			strokeWidth={2}
			d="M5 13l4 4L19 7"
		/>
	</svg>
);

export default CodeContainer;