Skip to content

Commit 8323c54

Browse files
DLeylandDLeyland
committed
fetch threads
1 parent b8b0917 commit 8323c54

File tree

4 files changed

+209
-324
lines changed

4 files changed

+209
-324
lines changed

‎app/page.module.css‎

Lines changed: 0 additions & 222 deletions
Original file line numberDiff line numberDiff line change
@@ -6,225 +6,3 @@
66
padding: 6rem;
77
min-height: 100vh;
88
}
9-
10-
.description {
11-
display: inherit;
12-
justify-content: inherit;
13-
align-items: inherit;
14-
font-size: 0.85rem;
15-
max-width: var(--max-width);
16-
width: 100%;
17-
z-index: 2;
18-
font-family: var(--font-mono);
19-
}
20-
21-
.description a {
22-
display: flex;
23-
justify-content: center;
24-
align-items: center;
25-
gap: 0.5rem;
26-
}
27-
28-
.description p {
29-
position: relative;
30-
margin: 0;
31-
padding: 1rem;
32-
background-color: rgba(var(--callout-rgb), 0.5);
33-
border: 1px solid rgba(var(--callout-border-rgb), 0.3);
34-
border-radius: var(--border-radius);
35-
}
36-
37-
.code {
38-
font-weight: 700;
39-
font-family: var(--font-mono);
40-
}
41-
42-
.grid {
43-
display: grid;
44-
grid-template-columns: repeat(4, minmax(25%, auto));
45-
max-width: 100%;
46-
width: var(--max-width);
47-
}
48-
49-
.card {
50-
padding: 1rem 1.2rem;
51-
border-radius: var(--border-radius);
52-
background: rgba(var(--card-rgb), 0);
53-
border: 1px solid rgba(var(--card-border-rgb), 0);
54-
transition: background 200ms, border 200ms;
55-
}
56-
57-
.card span {
58-
display: inline-block;
59-
transition: transform 200ms;
60-
}
61-
62-
.card h2 {
63-
font-weight: 600;
64-
margin-bottom: 0.7rem;
65-
}
66-
67-
.card p {
68-
margin: 0;
69-
opacity: 0.6;
70-
font-size: 0.9rem;
71-
line-height: 1.5;
72-
max-width: 30ch;
73-
text-wrap: balance;
74-
}
75-
76-
.center {
77-
display: flex;
78-
justify-content: center;
79-
align-items: center;
80-
position: relative;
81-
padding: 4rem 0;
82-
}
83-
84-
.center::before {
85-
background: var(--secondary-glow);
86-
border-radius: 50%;
87-
width: 480px;
88-
height: 360px;
89-
margin-left: -400px;
90-
}
91-
92-
.center::after {
93-
background: var(--primary-glow);
94-
width: 240px;
95-
height: 180px;
96-
z-index: -1;
97-
}
98-
99-
.center::before,
100-
.center::after {
101-
content: "";
102-
left: 50%;
103-
position: absolute;
104-
filter: blur(45px);
105-
transform: translateZ(0);
106-
}
107-
108-
.logo {
109-
position: relative;
110-
}
111-
/* Enable hover only on non-touch devices */
112-
@media (hover: hover) and (pointer: fine) {
113-
.card:hover {
114-
background: rgba(var(--card-rgb), 0.1);
115-
border: 1px solid rgba(var(--card-border-rgb), 0.15);
116-
}
117-
118-
.card:hover span {
119-
transform: translateX(4px);
120-
}
121-
}
122-
123-
@media (prefers-reduced-motion) {
124-
.card:hover span {
125-
transform: none;
126-
}
127-
}
128-
129-
/* Mobile */
130-
@media (max-width: 700px) {
131-
.content {
132-
padding: 4rem;
133-
}
134-
135-
.grid {
136-
grid-template-columns: 1fr;
137-
margin-bottom: 120px;
138-
max-width: 320px;
139-
text-align: center;
140-
}
141-
142-
.card {
143-
padding: 1rem 2.5rem;
144-
}
145-
146-
.card h2 {
147-
margin-bottom: 0.5rem;
148-
}
149-
150-
.center {
151-
padding: 8rem 0 6rem;
152-
}
153-
154-
.center::before {
155-
transform: none;
156-
height: 300px;
157-
}
158-
159-
.description {
160-
font-size: 0.8rem;
161-
}
162-
163-
.description a {
164-
padding: 1rem;
165-
}
166-
167-
.description p,
168-
.description div {
169-
display: flex;
170-
justify-content: center;
171-
position: fixed;
172-
width: 100%;
173-
}
174-
175-
.description p {
176-
align-items: center;
177-
inset: 0 0 auto;
178-
padding: 2rem 1rem 1.4rem;
179-
border-radius: 0;
180-
border: none;
181-
border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
182-
background: linear-gradient(
183-
to bottom,
184-
rgba(var(--background-start-rgb), 1),
185-
rgba(var(--callout-rgb), 0.5)
186-
);
187-
background-clip: padding-box;
188-
backdrop-filter: blur(24px);
189-
}
190-
191-
.description div {
192-
align-items: flex-end;
193-
pointer-events: none;
194-
inset: auto 0 0;
195-
padding: 2rem;
196-
height: 200px;
197-
background: linear-gradient(
198-
to bottom,
199-
transparent 0%,
200-
rgb(var(--background-end-rgb)) 40%
201-
);
202-
z-index: 1;
203-
}
204-
}
205-
206-
/* Tablet and Smaller Desktop */
207-
@media (min-width: 701px) and (max-width: 1120px) {
208-
.grid {
209-
grid-template-columns: repeat(2, 50%);
210-
}
211-
}
212-
213-
@media (prefers-color-scheme: dark) {
214-
.vercelLogo {
215-
filter: invert(1);
216-
}
217-
218-
.logo {
219-
filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
220-
}
221-
}
222-
223-
@keyframes rotate {
224-
from {
225-
transform: rotate(360deg);
226-
}
227-
to {
228-
transform: rotate(0deg);
229-
}
230-
}

‎app/page.tsx‎

Lines changed: 23 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,29 @@
1-
import Image from "next/image";
21
import styles from "./page.module.css";
2+
import { PlainClient } from "@team-plain/typescript-sdk";
33

4-
export default function Home() {
5-
return (
6-
<main className={styles.main}>
7-
<div className={styles.description}>
8-
<p>
9-
Get started by editing&nbsp;
10-
<code className={styles.code}>app/page.tsx</code>
11-
</p>
12-
<div>
13-
<a
14-
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
By{" "}
19-
<Image
20-
src="/vercel.svg"
21-
alt="Vercel Logo"
22-
className={styles.vercelLogo}
23-
width={100}
24-
height={24}
25-
priority
26-
/>
27-
</a>
28-
</div>
29-
</div>
4+
export default async function Home({
5+
params,
6+
searchParams,
7+
}: {
8+
params: { slug: string };
9+
searchParams: { [key: string]: string | string[] | undefined };
10+
}) {
11+
console.log(searchParams);
3012

31-
<div className={styles.center}>
32-
<Image
33-
className={styles.logo}
34-
src="/next.svg"
35-
alt="Next.js Logo"
36-
width={180}
37-
height={37}
38-
priority
39-
/>
40-
</div>
13+
const apiKey = process.env.PLAIN_API_KEY;
14+
if (!apiKey) {
15+
return (
16+
<main className={styles.main}>
17+
Please set the `PLAIN_API_KEY` environment variable
18+
</main>
19+
);
20+
}
21+
const client = new PlainClient({
22+
apiKey,
23+
});
24+
const threads = await client.getThreads({});
4125

42-
<div className={styles.grid}>
43-
<a
44-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
45-
className={styles.card}
46-
target="_blank"
47-
rel="noopener noreferrer"
48-
>
49-
<h2>
50-
Docs <span>-&gt;</span>
51-
</h2>
52-
<p>Find in-depth information about Next.js features and API.</p>
53-
</a>
26+
console.log(threads);
5427

55-
<a
56-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
57-
className={styles.card}
58-
target="_blank"
59-
rel="noopener noreferrer"
60-
>
61-
<h2>
62-
Learn <span>-&gt;</span>
63-
</h2>
64-
<p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
65-
</a>
66-
67-
<a
68-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
69-
className={styles.card}
70-
target="_blank"
71-
rel="noopener noreferrer"
72-
>
73-
<h2>
74-
Templates <span>-&gt;</span>
75-
</h2>
76-
<p>Explore starter templates for Next.js.</p>
77-
</a>
78-
79-
<a
80-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
81-
className={styles.card}
82-
target="_blank"
83-
rel="noopener noreferrer"
84-
>
85-
<h2>
86-
Deploy <span>-&gt;</span>
87-
</h2>
88-
<p>
89-
Instantly deploy your Next.js site to a shareable URL with Vercel.
90-
</p>
91-
</a>
92-
</div>
93-
</main>
94-
);
28+
return <main className={styles.main}>Hello</main>;
9529
}

0 commit comments

Comments
 (0)