e9f03d52fd
- added user avatars for each user - it will fetch user images from github or google and if there is no image then it will show initials
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; avatarUrl: 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} avatarUrl={user.avatarUrl} 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>
|
|
)
|
|
}
|