45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import Avatar from "@/components/ui/avatar"
|
||
|
|
import { Button } from "@/components/ui/button"
|
||
|
|
import { unshareSandbox } from "@/lib/actions"
|
||
|
|
import { Loader2, X } from "lucide-react"
|
||
|
|
import { useState } from "react"
|
||
|
|
|
||
|
|
export default function SharedUser({
|
||
|
|
user,
|
||
|
|
sandboxId,
|
||
|
|
}: {
|
||
|
|
user: { id: string; name: string }
|
||
|
|
sandboxId: string
|
||
|
|
}) {
|
||
|
|
const [loading, setLoading] = useState(false)
|
||
|
|
|
||
|
|
async function handleUnshare(id: string) {
|
||
|
|
setLoading(true)
|
||
|
|
|
||
|
|
await unshareSandbox(sandboxId, user.id)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div className="flex items-center">
|
||
|
|
<Avatar name={user.name} className="mr-2" />
|
||
|
|
{user.name}
|
||
|
|
</div>
|
||
|
|
<Button
|
||
|
|
disabled={loading}
|
||
|
|
onClick={() => handleUnshare(user.id)}
|
||
|
|
variant="ghost"
|
||
|
|
size="smIcon"
|
||
|
|
>
|
||
|
|
{loading ? (
|
||
|
|
<Loader2 className="animate-spin w-4 h-4" />
|
||
|
|
) : (
|
||
|
|
<X className="w-4 h-4" />
|
||
|
|
)}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|