2024-10-21 13:57:45 -06:00

102 lines
2.6 KiB
TypeScript

"use client"
import { Button } from "@/components/ui/button"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover"
import { useTerminal } from "@/context/TerminalContext"
import { Sandbox, User } from "@/lib/types"
import { Globe } from "lucide-react"
import { useState } from "react"
export default function DeployButtonModal({
userData,
data,
}: {
userData: User
data: Sandbox
}) {
const { deploy } = useTerminal()
const [isDeploying, setIsDeploying] = useState(false)
const handleDeploy = () => {
if (isDeploying) {
console.log("Stopping deployment...")
setIsDeploying(false)
} else {
console.log("Starting deployment...")
setIsDeploying(true)
deploy(() => {
setIsDeploying(false)
})
}
}
return (
<>
<Popover>
<PopoverTrigger asChild>
<Button variant="outline">
<Globe className="w-4 h-4 mr-2" />
Deploy
</Button>
</PopoverTrigger>
<PopoverContent
className="p-4 w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl rounded-lg shadow-lg"
style={{ backgroundColor: "rgb(10,10,10)", color: "white" }}
>
<h3 className="font-semibold text-gray-300 mb-2">Domains</h3>
<div className="flex flex-col gap-4">
<DeploymentOption
icon={<Globe className="text-gray-500 w-5 h-5" />}
domain={`${data.id}.gitwit.app`}
timestamp="Deployed 1h ago"
user={userData.name}
/>
</div>
<Button
variant="outline"
className="mt-4 w-full bg-[#0a0a0a] text-white hover:bg-[#262626]"
onClick={handleDeploy}
>
{isDeploying ? "Deploying..." : "Update"}
</Button>
</PopoverContent>
</Popover>
</>
)
}
function DeploymentOption({
icon,
domain,
timestamp,
user,
}: {
icon: React.ReactNode
domain: string
timestamp: string
user: string
}) {
return (
<div className="flex flex-col gap-2 w-full text-left p-2 rounded-md border border-gray-700 bg-gray-900">
<div className="flex items-start gap-2 relative">
<div className="flex-shrink-0">{icon}</div>
<a
href={`https://${domain}`}
target="_blank"
rel="noopener noreferrer"
className="font-semibold text-gray-300 hover:underline"
>
{domain}
</a>
</div>
<p className="text-sm text-gray-400 mt-0 ml-7">
{timestamp} {user}
</p>
</div>
)
}