frontend/app/(deploy)/[workspace]/databases/page.tsx

55 lines
1.7 KiB
TypeScript

import { Database } from 'lucide-react';
import DatabaseNewForm from './database-new-form';
import prisma from '@/lib/prisma';
import { DatabaseTable } from './database-table';
import { columns } from './database-column';
export default async function Databases({ params }: { params: { workspace: string } }) {
const workspaceSlug = params.workspace;
const workspace = await prisma.workspace.findUniqueOrThrow({
where: {
slug: workspaceSlug,
},
include: {
Database: true,
},
});
if (workspace?.Database.length == 0) {
return (
<div className="mt-12">
<h1 className="text-3xl font-semibold">Databases</h1>
<div className="bg-white py-6 flex flex-col items-center rounded-lg mt-6 gap-4">
<Database size={64} className="text-gray-300" />
<div className="text-center">
<h3 className="font-semibold">No database</h3>
<p className="text-gray-700">Get started by creating a new database.</p>
</div>
<DatabaseNewForm />
</div>
</div>
);
}
return (
<div className="mt-12">
<div className="flex flex-row justify-between items-center">
<h1 className="text-3xl font-semibold">Databases</h1>
<DatabaseNewForm />
</div>
<div className="bg-white flex flex-col items-center rounded-lg mt-6 gap-4 mb-6">
{/* {workspace.Database.map((database) => (
<div key={database.id} className="flex flex-row">
<Database size={64} className="text-gray-300" />
<div className="text-center">
<h3 className="font-semibold">{database.name}</h3>
<p className="text-gray-700">{database.provider}</p>
</div>
</div>
))} */}
<DatabaseTable columns={columns} data={workspace.Database} />
</div>
</div>
);
}