Function CopyableCommand

apps/baseai.dev/src/components/home/hero.tsx:180–248

({ command }: CopyableCommandProps)

}

function CopyableCommand({ command }: CopyableCommandProps) {
	const [copied, setCopied] = useState(false);

	const copyToClipboard = async () => {
		try {
			await navigator.clipboard.writeText(command);
			setCopied(true);
			setTimeout(() => setCopied(false), 2000);
		} catch (err) {
			console.error('Failed to copy text: ', err);
		}
	};

	return (
		<div
			className="group my-4 flex w-full cursor-pointer items-center justify-center font-mono text-sm transition-colors lg:items-start lg:justify-start "
			// "mx-auto mt-8 flex w-full items-center justify-center space-x-2 lg:items-start lg:justify-start"
			onClick={copyToClipboard}
			role="button"
			tabIndex={0}
			onKeyDown={e => e.key === 'Enter' && copyToClipboard()}
			aria-label={`Copy command: ${command}`}
		>
			<div className="group flex items-center space-x-2 transition-colors group-hover:text-indigo-400">
				<span className="text-muted-foreground/50 group-hover:text-indigo-400 sm:text-sm 2xl:text-[1vw] 2xl:leading-[1.5vw]">
					<span className="xtext-indigo-400">⌘</span>
					<span className="group-hover:text-muted-foreground/50">
						{' '}
						~
					</span>
				</span>
				<span className="font-mono text-muted-foreground/50 transition-colors group-hover:text-indigo-400 sm:text-sm 2xl:leading-[1.5vw] ">
					{command}
				</span>
				<div className="ml-2 text-muted-foreground/50 transition-colors group-hover:text-indigo-400 sm:text-sm 2xl:leading-[1.5vw]">
					{copied ? (
						<svg
							xmlns="http://www.w3.org/2000/svg"
							className="h-[1em] w-[1em]"
							viewBox="0 0 20 20"
							fill="currentColor"
						>
							<path
								fillRule="evenodd"
								d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
								clipRule="evenodd"
							/>
						</svg>
					) : (
						<svg
							xmlns="http://www.w3.org/2000/svg"
							className="h-[1em] w-[1em]"
							fill="none"
							viewBox="0 0 24 24"
							stroke="currentColor"
						>
							<path
								strokeLinecap="round"