mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 20:35:07 +03:00
Ivan Vasilov
ee8eae7309
This PR moves several components which rely on `next` out of the `ui` package to the `ui-patterns` package. `ui-patterns` package is intented to be imported with specific imports so it's ok if there are components reliant on `next` in there. The `SonnerToaster` component has removed its dependency by requiring a prop for `theme`.
78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
|
|
|
|
import type { ContentFileProps } from '@/components/interfaces/Connect/Connect.types'
|
|
import {
|
|
ConnectTabContent,
|
|
ConnectTabs,
|
|
ConnectTabTrigger,
|
|
ConnectTabTriggers,
|
|
} from '@/components/interfaces/Connect/ConnectTabs'
|
|
|
|
const ContentFile = ({ connectionStringPooler }: ContentFileProps) => {
|
|
return (
|
|
<ConnectTabs>
|
|
<ConnectTabTriggers>
|
|
<ConnectTabTrigger value=".env" />
|
|
<ConnectTabTrigger value="drizzle/schema.tsx" />
|
|
<ConnectTabTrigger value="index.tsx" />
|
|
</ConnectTabTriggers>
|
|
|
|
<ConnectTabContent value=".env">
|
|
<SimpleCodeBlock className="bash" parentClassName="min-h-72">
|
|
{connectionStringPooler.ipv4SupportedForDedicatedPooler &&
|
|
connectionStringPooler.transactionDedicated
|
|
? `
|
|
DATABASE_URL="${connectionStringPooler.transactionDedicated}"
|
|
`
|
|
: connectionStringPooler.transactionDedicated &&
|
|
!connectionStringPooler.ipv4SupportedForDedicatedPooler
|
|
? `
|
|
# Use Shared connection pooler (supports both IPv4/IPv6)
|
|
DATABASE_URL="${connectionStringPooler.transactionShared}"
|
|
|
|
# If your network supports IPv6 or you purchased IPv4 addon, use dedicated pooler
|
|
# DATABASE_URL="${connectionStringPooler.transactionDedicated}"
|
|
`
|
|
: `
|
|
DATABASE_URL="${connectionStringPooler.transactionShared}"
|
|
`}
|
|
</SimpleCodeBlock>
|
|
</ConnectTabContent>
|
|
|
|
<ConnectTabContent value="drizzle/schema.tsx">
|
|
<SimpleCodeBlock className="tsx" parentClassName="min-h-72">
|
|
{`
|
|
import { pgTable, serial, text, varchar } from "drizzle-orm/pg-core";
|
|
|
|
export const users = pgTable('users', {
|
|
id: serial('id').primaryKey(),
|
|
fullName: text('full_name'),
|
|
phone: varchar('phone', { length: 256 }),
|
|
});
|
|
`}
|
|
</SimpleCodeBlock>
|
|
</ConnectTabContent>
|
|
|
|
<ConnectTabContent value="index.tsx">
|
|
<SimpleCodeBlock className="tsx" parentClassName="min-h-72">
|
|
{`
|
|
import { drizzle } from 'drizzle-orm/postgres-js'
|
|
import postgres from 'postgres'
|
|
import { users } from './schema'
|
|
|
|
const connectionString = process.env.DATABASE_URL
|
|
|
|
// Disable prefetch as it is not supported for "Transaction" pool mode
|
|
const client = postgres(connectionString, { prepare: false })
|
|
const db = drizzle(client);
|
|
|
|
const allUsers = await db.select().from(users);
|
|
`}
|
|
</SimpleCodeBlock>
|
|
</ConnectTabContent>
|
|
</ConnectTabs>
|
|
)
|
|
}
|
|
|
|
export default ContentFile
|