-
Notifications
You must be signed in to change notification settings - Fork 0
/
page.tsx
109 lines (105 loc) · 3.03 KB
/
page.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
"use client";
import { CodatLink } from "./components/CodatLink";
import Image from "next/image";
import styles from "./page.module.css";
import { useState } from "react";
import {
ConnectionCallbackArgs,
ErrorCallbackArgs,
} from "@codat/sdk-link-types";
export default function Home() {
const [companyId, setCompanyId] = useState("");
const [modalOpen, setModalOpen] = useState(false);
const onConnection = (connection: ConnectionCallbackArgs) =>
alert(`On connection callback - ${connection.connectionId}`);
const onClose = () => setModalOpen(false);
const onFinish = () => alert("On finish callback");
const onError = (error: ErrorCallbackArgs) =>
alert(`On error callback - ${error.message}`);
return (
<main className={styles.main}>
<div className={styles.description}>
<div>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
By{" "}
<Image
src="/vercel.svg"
alt="Vercel Logo"
className={styles.vercelLogo}
width={100}
height={24}
priority
/>
</a>
</div>
</div>
<header>
<h1 className={styles.mainHeader}>
<a
target="_blank"
rel="noreferrer"
href="https://github.com/codatio/sdk-link/tree/main/examples/next/README.md"
>
Link SDK X NextJS
</a>
</h1>
</header>
<div className={styles.content}>
<p>
An example of embedding Link SDK within a brand new create-next-app
project
</p>
<ol>
<li>
<a
href="https://github.com/codatio/sdk-link/tree/main#create-a-new-company"
target="_blank"
rel="noreferrer"
>
Create a company
</a>
</li>
<li>
<a>Paste the company ID below</a>
</li>
</ol>
<div className={styles.inputWrapper}>
<input
value={companyId}
placeholder="Provide a valid company ID"
onChange={(e) => {
setCompanyId(e.target.value);
}}
/>
<button onClick={() => setModalOpen(!modalOpen)}>
{modalOpen ? "Exit" : "Start authing"}
</button>
</div>
</div>
<div className={styles.center}>
<Image
className={styles.logo}
src="/next.svg"
alt="Next.js Logo"
width={180}
height={37}
/>
{modalOpen && (
<div className={styles.modalWrapper}>
<CodatLink
companyId={companyId}
onConnection={onConnection}
onError={onError}
onClose={onClose}
onFinish={onFinish}
/>
</div>
)}
</div>
</main>
);
}