content.tsx39 lines · main

1	import { Copy } from 'lucide-react'
2	import { useState } from 'react'
3	import { Button, copyToClipboard } from 'ui'
4
5	import type { StepContentProps } from '@/components/interfaces/ConnectSheet/Connect.types'
6
7	const SKILLS_COMMAND = 'npx skills add briven/agent-skills'
8
9	function SkillsInstallContent(_props: StepContentProps) {
10	const [copyLabel, setCopyLabel] = useState('Copy')
11
12	const handleCopy = () => {
13	copyToClipboard(SKILLS_COMMAND, () => {
14	setCopyLabel('Copied')
15	setTimeout(() => setCopyLabel('Copy'), 2000)
16	})
17	}
18
19	return (
20	<div className="relative group">
21	<div className="bg-surface-75 border rounded-lg p-3 pr-20 font-mono text-sm text-foreground-light overflow-x-auto">
22	<code>{SKILLS_COMMAND}</code>
23	</div>
24	<div className="absolute right-2 top-1/2 -translate-y-1/2">
25	<Button
26	type="default"
27	size="tiny"
28	icon={<Copy size={14} />}
29	onClick={handleCopy}
30	className="opacity-0 group-hover:opacity-100 transition-opacity"
31	>
32	{copyLabel}
33	</Button>
34	</div>
35	</div>
36	)
37	}
38
39	export default SkillsInstallContent