2024-04-18 14:42:47 -04:00

72 lines
2.1 KiB
TypeScript

import { Sandbox } from "@/lib/types"
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table"
import Image from "next/image"
import Button from "../ui/customButton"
import { ChevronRight } from "lucide-react"
export default function DashboardSharedWithMe({
sandboxes,
}: {
sandboxes: Sandbox[]
}) {
return (
<div className="grow p-4 flex flex-col">
<div className="text-xl font-medium mb-8">Shared With Me</div>
<div className="grow w-full">
<Table>
<TableHeader>
<TableRow className="hover:bg-background">
<TableHead>Sandbox Name</TableHead>
<TableHead>Shared By</TableHead>
<TableHead>Opened</TableHead>
<TableHead className="text-right"></TableHead>
</TableRow>
</TableHeader>
<TableBody>
{sandboxes.map((sandbox) => (
<TableRow>
<TableCell>
<div className="font-medium flex items-center">
<Image
alt=""
src={
sandbox.type === "react"
? "/project-icons/react.svg"
: "/project-icons/node.svg"
}
width={20}
height={20}
className="mr-2"
/>
{sandbox.name}
</div>
</TableCell>
<TableCell>
<div className="flex items-center">
<div className="h-5 w-5 bg-red-500 rounded-full mr-2" />
Ishaan Dey
</div>
</TableCell>
<TableCell>{new Date().toLocaleDateString()}</TableCell>
<TableCell className="text-right">
<Button>
Open <ChevronRight className="w-4 h-4 ml-2" />
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
)
}