A card for displaying a Postgres database connection with a pooled/direct toggle, role and database selectors, and switchable URI, psql, parameters, and agent-prompt views, with a shared password reveal and copy-to-clipboard.
import { DBConnectionCard } from "@/components/ui/db-connection-card";
const connections = [
{
role: "neondb_owner",
database: "neondb",
pooled: true,
uri: "postgres://neondb_owner:AbC123xyz@ep-cool-mountain-123456-pooler.us-east-2.aws.neon.tech/neondb?sslmode=require",
},
{
role: "neondb_owner",
database: "neondb",
pooled: false,
uri: "postgres://neondb_owner:AbC123xyz@ep-cool-mountain-123456.us-east-2.aws.neon.tech/neondb?sslmode=require",
},
{
role: "readonly",
database: "analytics",
pooled: true,
uri: "postgres://readonly:ZyX987abc@ep-cool-mountain-123456-pooler.us-east-2.aws.neon.tech/analytics?sslmode=require",
},
{
role: "readonly",
database: "analytics",
pooled: false,
uri: "postgres://readonly:ZyX987abc@ep-cool-mountain-123456.us-east-2.aws.neon.tech/analytics?sslmode=require",
},
];
export default function DemoDBConnectionCard() {
return (
<div className="w-full max-w-md">
<DBConnectionCard connections={connections} />
</div>
);
}