feat: new install methods
This commit is contained in:
@@ -3,17 +3,58 @@
|
|||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import { Download, Copy, Check } from 'lucide-react'
|
import { Download, Copy, Check } from 'lucide-react'
|
||||||
|
|
||||||
const installCmd = 'curl -fsSL https://raw.githubusercontent.com/GreyhavenHQ/greywall/main/install.sh | sh'
|
const methods = [
|
||||||
|
{
|
||||||
|
label: 'Homebrew (macOS)',
|
||||||
|
cmd: 'brew tap greyhavenhq/tap\nbrew install greywall',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Linux / Mac',
|
||||||
|
cmd: 'curl -fsSL https://raw.githubusercontent.com/GreyhavenHQ/greywall/main/install.sh | sh',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Go install',
|
||||||
|
cmd: 'go install github.com/GreyhavenHQ/greywall/cmd/greywall@latest',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Build from source',
|
||||||
|
cmd: 'git clone https://github.com/GreyhavenHQ/greywall\ncd greywall\nmake setup && make build',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
export function GettingStarted() {
|
function CodeBlock({ cmd, label }: { cmd: string; label: string }) {
|
||||||
const [copied, setCopied] = useState(false)
|
const [copied, setCopied] = useState(false)
|
||||||
|
|
||||||
function copy() {
|
function copy() {
|
||||||
navigator.clipboard.writeText(installCmd)
|
navigator.clipboard.writeText(cmd)
|
||||||
setCopied(true)
|
setCopied(true)
|
||||||
setTimeout(() => setCopied(false), 2000)
|
setTimeout(() => setCopied(false), 2000)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="text-xs font-sans font-medium text-muted-foreground mb-2">{label}</div>
|
||||||
|
<div className="code-block px-4 sm:px-5 py-3.5 flex items-start justify-between gap-3">
|
||||||
|
<div className="overflow-x-auto min-w-0 flex-1 scrollbar-hide">
|
||||||
|
<pre className="font-mono text-xs sm:text-sm text-greyhaven-offwhite whitespace-pre">{cmd}</pre>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={copy}
|
||||||
|
className="shrink-0 p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/30 transition-all mt-0.5"
|
||||||
|
title="Copy to clipboard"
|
||||||
|
>
|
||||||
|
{copied ? (
|
||||||
|
<Check className="h-4 w-4 text-primary" />
|
||||||
|
) : (
|
||||||
|
<Copy className="h-4 w-4" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function GettingStarted() {
|
||||||
return (
|
return (
|
||||||
<section id="getting-started" className="py-24 px-4 sm:px-6 border-t border-border/30">
|
<section id="getting-started" className="py-24 px-4 sm:px-6 border-t border-border/30">
|
||||||
<div className="mx-auto max-w-5xl text-center">
|
<div className="mx-auto max-w-5xl text-center">
|
||||||
@@ -24,32 +65,16 @@ export function GettingStarted() {
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<h2 className="font-serif text-3xl sm:text-4xl font-semibold tracking-tight mb-4">
|
<h2 className="font-serif text-3xl sm:text-4xl font-semibold tracking-tight mb-4">
|
||||||
Install in one command
|
Install in one command.
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-muted-foreground font-serif text-lg leading-relaxed mb-10">
|
<p className="text-muted-foreground font-serif text-lg leading-relaxed mb-10">
|
||||||
Wrap any agent and it runs sandboxed.
|
Wrap any agent and it runs sandboxed.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="inline-block max-w-full">
|
<div className="mx-auto max-w-2xl text-left space-y-6">
|
||||||
<div className="code-block glow-orange px-4 sm:px-5 py-3.5 flex items-center gap-3">
|
{methods.map((m) => (
|
||||||
<div className="overflow-x-auto min-w-0 flex-1 scrollbar-hide">
|
<CodeBlock key={m.label} label={m.label} cmd={m.cmd} />
|
||||||
<code className="font-mono text-xs sm:text-sm text-greyhaven-offwhite whitespace-nowrap">
|
))}
|
||||||
<span className="text-muted-foreground">$ </span>
|
|
||||||
{installCmd}
|
|
||||||
</code>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={copy}
|
|
||||||
className="shrink-0 p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/30 transition-all"
|
|
||||||
title="Copy to clipboard"
|
|
||||||
>
|
|
||||||
{copied ? (
|
|
||||||
<Check className="h-4 w-4 text-primary" />
|
|
||||||
) : (
|
|
||||||
<Copy className="h-4 w-4" />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Reference in New Issue
Block a user