Command Line

1. 1
2. 2
3. 3

<Text className="mt-4">
	Here's the inline component in action: <CommandLine command={`npx cowsay Hello world!`} />
</Text>

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26

<Text className="mt-4">
Here's the inline component with an array in action:{' '}
<CommandLine
	command={[
		{ type: 'command', text: 'npx cowsay Hello world!' },
		{
			type: 'log',
			text: ` ______________
< Hello world! >
 --------------
		\   ^__^
		\  (oo)\_______
			(__)\       )\/\
				||----w |
				||     ||`,
		},
		{ type: 'command', text: 'npx prisma db seed' },
		{
			type: 'log',
			text: `Need to install the following packages:
  prisma@5.3.0
Ok to proceed? (y) y`,
		},
		{ type: 'command', text: 'npm run dev' },
	]}
/>

1. 1
2. 2

<Text className="mt-4">Here's the block component in action.</Text>
<CommandLine variant="block" command={`npx cowsay Hello world!`} />

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26

<Text className="mt-4">Here's the block component with an array in action.</Text>
				<CommandLine
					variant="block"
					command={[
						{ type: 'command', text: 'npx cowsay Hello world!' },
						{
							type: 'log',
							text: ` ______________
< Hello world! >
 --------------
		   \   ^__^
			\  (oo)\_______
			   (__)\       )\/\
					||----w |
					||     ||`,
						},
						{ type: 'command', text: 'npx prisma db seed' },
						{
							type: 'log',
							text: `Need to install the following packages:
  prisma@5.3.0
Ok to proceed? (y) y`,
						},
						{ type: 'command', text: 'npm run dev' },
					]}
				/>

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85
86. 86
87. 87
88. 88
89. 89
90. 90
91. 91
92. 92

import { useState, type HTMLAttributes, useRef, useEffect } from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '~/utils/tailwind-merge.ts'
import { useCopyToClipboard } from 'usehooks-ts'
import { AccessibleIcon } from '~/components/ui/accessible-icon.tsx'
import { Tooltip } from '~/routes/_marketing+/ui+/components/ui/tooltip.tsx'

const commandLineVariants = cva('notranslate rounded-lg overflow-hidden text-white bg-[rgb(24,46,63)]', {
	variants: {
		variant: {
			inline: 'inline px-1 py-0.5',
			block: '',
		},
	},
})

export type CommandAndLogArray = { type: 'command' | 'log'; text: string }[]

type CommandLineProps = { command: string | CommandAndLogArray } & VariantProps<typeof commandLineVariants> &
	HTMLAttributes<HTMLPreElement> & {
		children?: never // Prevent receiving children
	}

export const CommandLine = ({ command = '', variant = 'inline', className, ...props }: CommandLineProps) => {
	// Copy to clipboard
	const [showCopyIcon, setShowCopyIcon] = useState(true)
	const [, copy] = useCopyToClipboard()
	// Extract commands
	const lines = Array.isArray(command) ? command : [{ type: 'command', text: command }]
	const linesWithoutLogs = lines.filter(line => line.type === 'command')
	const allCommandsString = linesWithoutLogs.map(line => line.text).join('\n')
	// Code overflows
	const ref = useRef<HTMLDivElement>(null)
	const [codeOverflows, setCodeOverflows] = useState(false)

	const handleCopy = (commandToCopy: string) => {
		copy(commandToCopy)
		if (showCopyIcon) {
			setShowCopyIcon(false)
			setTimeout(() => setShowCopyIcon(true), 1000)
		}
	}

	useEffect(() => {
		if (ref.current) {
			setCodeOverflows(ref.current.offsetHeight < ref.current.scrollHeight || ref.current.offsetWidth < ref.current.scrollWidth)
		}
	}, [ref])

	return variant === 'block' ? (
		<pre className={cn(commandLineVariants({ variant }), className)} {...props}>
			<div className="flex overflow-hidden">
				<div ref={ref} className="flex-grow overflow-x-scroll">
					{lines.map(({ type, text }, i) => (
						<div key={i} className="flex gap-4">
							{type === 'command' ? (
								<div className="flex select-none items-stretch justify-stretch">
									<div className="bg-blue-500 pl-2 pr-1.5">~</div>
									<div>
										<svg viewBox="0 0 30 100" className="h-full">
											<polygon points="0,0 30,50 0,100" className="fill-blue-500" />
										</svg>
									</div>
								</div>
							) : null}
							<code className="pr-4">{text}</code>
						</div>
					))}
				</div>
				<div className={codeOverflows ? `shadow-[rgba(0,0,15,0.5)_-10px_0_5px_0]` : ``}>
					{linesWithoutLogs.length > 0 ? (
						<button className={`min-h-tap min-w-tap rounded-lg px-4 hover:bg-muted-100/10 ${lines.length > 1 ? 'py-2' : ''}`} onClick={() => handleCopy(allCommandsString)}>
							{showCopyIcon ? <AccessibleIcon name="copy" label="Copy to clipboard" /> : <AccessibleIcon name="check" label="Saved to clipboard" />}
						</button>
					) : null}
				</div>
			</div>
		</pre>
	) : (
		linesWithoutLogs.map(({ text }, i) => (
			<Tooltip key={text} content={showCopyIcon ? 'Click to copy to clipboard' : 'Saved to clipboard!'}>
				<span onClick={() => handleCopy(text)} className="cursor-pointer">
					<pre className={cn(commandLineVariants({ variant }), className)} {...props}>
						<code>{text}</code>
					</pre>
					{linesWithoutLogs.length > 1 && i < linesWithoutLogs.length - 1 ? ' ' : ''}
				</span>
			</Tooltip>
		))
	)
}