content.tsx77 lines · main

1	import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
2
3	import type { ContentFileProps } from '@/components/interfaces/Connect/Connect.types'
4	import {
5	ConnectTabContent,
6	ConnectTabs,
7	ConnectTabTrigger,
8	ConnectTabTriggers,
9	} from '@/components/interfaces/Connect/ConnectTabs'
10
11	const ContentFile = ({ connectionStringPooler }: ContentFileProps) => {
12	return (
13	<ConnectTabs>
14	<ConnectTabTriggers>
15	<ConnectTabTrigger value=".env" />
16	<ConnectTabTrigger value="drizzle/schema.tsx" />
17	<ConnectTabTrigger value="index.tsx" />
18	</ConnectTabTriggers>
19
20	<ConnectTabContent value=".env">
21	<SimpleCodeBlock className="bash" parentClassName="min-h-72">
22	{connectionStringPooler.ipv4SupportedForDedicatedPooler &&
23	connectionStringPooler.transactionDedicated
24	? `
25	DATABASE_URL="${connectionStringPooler.transactionDedicated}"
26	`
27	: connectionStringPooler.transactionDedicated &&
28	!connectionStringPooler.ipv4SupportedForDedicatedPooler
29	? `
30	# Use Shared connection pooler (supports both IPv4/IPv6)
31	DATABASE_URL="${connectionStringPooler.transactionShared}"
32
33	# If your network supports IPv6 or you purchased IPv4 addon, use dedicated pooler
34	# DATABASE_URL="${connectionStringPooler.transactionDedicated}"
35	`
36	: `
37	DATABASE_URL="${connectionStringPooler.transactionShared}"
38	`}
39	</SimpleCodeBlock>
40	</ConnectTabContent>
41
42	<ConnectTabContent value="drizzle/schema.tsx">
43	<SimpleCodeBlock className="tsx" parentClassName="min-h-72">
44	{`
45	import { pgTable, serial, text, varchar } from "drizzle-orm/pg-core";
46
47	export const users = pgTable('users', {
48	id: serial('id').primaryKey(),
49	fullName: text('full_name'),
50	phone: varchar('phone', { length: 256 }),
51	});
52	`}
53	</SimpleCodeBlock>
54	</ConnectTabContent>
55
56	<ConnectTabContent value="index.tsx">
57	<SimpleCodeBlock className="tsx" parentClassName="min-h-72">
58	{`
59	import { drizzle } from 'drizzle-orm/postgres-js'
60	import postgres from 'postgres'
61	import { users } from './schema'
62
63	const connectionString = process.env.DATABASE_URL
64
65	// Disable prefetch as it is not supported for "Transaction" pool mode
66	const client = postgres(connectionString, { prepare: false })
67	const db = drizzle(client);
68
69	const allUsers = await db.select().from(users);
70	`}
71	</SimpleCodeBlock>
72	</ConnectTabContent>
73	</ConnectTabs>
74	)
75	}
76
77	export default ContentFile