content.tsx117 lines · main
1import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
2
3import type { ContentFileProps } from '@/components/interfaces/Connect/Connect.types'
4import {
5 ConnectTabContent,
6 ConnectTabs,
7 ConnectTabTrigger,
8 ConnectTabTriggers,
9} from '@/components/interfaces/Connect/ConnectTabs'
10
11const ContentFile = ({ projectKeys }: ContentFileProps) => {
12 return (
13 <ConnectTabs>
14 <ConnectTabTriggers>
15 <ConnectTabTrigger value=".env.local" />
16 <ConnectTabTrigger value="src/utility/brivenClient.ts" />
17 <ConnectTabTrigger value="src/App.tsx" />
18 </ConnectTabTriggers>
19
20 <ConnectTabContent value=".env.local">
21 <SimpleCodeBlock className="bash" parentClassName="min-h-72">
22 {[
23 '',
24 `BRIVEN_URL=${projectKeys.apiUrl ?? 'your-project-url'}`,
25 `BRIVEN_KEY=${projectKeys?.publishableKey ?? projectKeys?.anonKey ?? 'your-anon-key'}`,
26 '',
27 ].join('\n')}
28 </SimpleCodeBlock>
29 </ConnectTabContent>
30
31 <ConnectTabContent value="src/utility/brivenClient.ts">
32 <SimpleCodeBlock className="ts" parentClassName="min-h-72">
33 {`
34import { createClient } from "@refinedev/briven";
35
36const BRIVEN_URL = process.env.BRIVEN_URL;
37const BRIVEN_KEY = process.env.BRIVEN_KEY;
38
39export const brivenClient = createClient(BRIVEN_URL, BRIVEN_KEY, {
40 db: {
41 schema: "public",
42 },
43 auth: {
44 persistSession: true,
45 },
46});
47 `}
48 </SimpleCodeBlock>
49 </ConnectTabContent>
50
51 <ConnectTabContent value="src/App.tsx">
52 <SimpleCodeBlock className="tsx" parentClassName="min-h-72">
53 {`
54import { Refine } from "@refinedev/core";
55import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar";
56import routerProvider, {
57 DocumentTitleHandler,
58 NavigateToResource,
59 UnsavedChangesNotifier,
60} from "@refinedev/react-router";
61import { dataProvider, liveProvider } from "@refinedev/briven";
62import { BrowserRouter, Route, Routes } from "react-router-dom";
63
64import "./App.css";
65import authProvider from "./authProvider";
66import { brivenClient } from "./utility";
67import { CountriesCreate, CountriesEdit, CountriesList, CountriesShow } from "./pages/countries";
68
69function App() {
70 return (
71 <BrowserRouter>
72 <RefineKbarProvider>
73 <Refine
74 dataProvider={dataProvider(brivenClient)}
75 liveProvider={liveProvider(brivenClient)}
76 authProvider={authProvider}
77 routerProvider={routerProvider}
78 options={{
79 syncWithLocation: true,
80 warnWhenUnsavedChanges: true,
81 }}
82 resources={[{
83 name: "countries",
84 list: "/countries",
85 create: "/countries/create",
86 edit: "/countries/edit/:id",
87 show: "/countries/show/:id"
88 }]}>
89 <Routes>
90 <Route index
91 element={<NavigateToResource resource="countries" />}
92 />
93 <Route path="/countries">
94 <Route index element={<CountriesList />} />
95 <Route path="create" element={<CountriesCreate />} />
96 <Route path="edit/:id" element={<CountriesEdit />} />
97 <Route path="show/:id" element={<CountriesShow />} />
98 </Route>
99 </Routes>
100 <RefineKbar />
101 <UnsavedChangesNotifier />
102 <DocumentTitleHandler />
103 </Refine>
104 </RefineKbarProvider>
105 </BrowserRouter>
106 );
107}
108
109export default App;
110`}
111 </SimpleCodeBlock>
112 </ConnectTabContent>
113 </ConnectTabs>
114 )
115}
116
117export default ContentFile