Skip to content

Commit b61fd96

Browse files
sdairssdairs
committed
readmes, new token prompt
1 parent 9a33401 commit b61fd96

File tree

15 files changed

+252
-191
lines changed

15 files changed

+252
-191
lines changed

‎apps/web/next.config.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import type { NextConfig } from "next";
2+
import withMarkdoc from '@markdoc/next.js';
23

3-
const nextConfig: NextConfig = {
4-
/* config options here */
5-
};
4+
const nextConfig: NextConfig = {};
65

7-
export default nextConfig;
6+
export default nextConfig;

‎apps/web/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
},
2424
"devDependencies": {
2525
"@eslint/eslintrc": "^3",
26+
"@tailwindcss/typography": "^0.5.15",
2627
"@types/node": "^20",
2728
"@types/react": "^19",
2829
"@types/react-dom": "^19",

‎apps/web/pnpm-lock.yaml‎

Lines changed: 35 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎apps/web/src/app/[id]/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default function AppPage({ params }: { params: Promise<{ id: string }> })
1414
async function checkInstallation() {
1515
if (!token) return;
1616
const sources = await listDataSources(token);
17-
setIsInstalled(sources.some(source => source.name === id));
17+
setIsInstalled(sources.some(source => source.name === TOOLS[id].ds));
1818
}
1919
checkInstallation();
2020
}, [token, id]);

‎apps/web/src/app/page.tsx‎

Lines changed: 48 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,20 @@ import { Card } from '@/components/ui/card';
88
import Link from 'next/link';
99
import { listDataSources } from '@/lib/tinybird';
1010
import { TOOLS, type AppGridItem } from '@/lib/constants';
11+
import TokenPrompt from '@/components/token-prompt';
1112

1213
function AppCard({ app, isInstalled, token }: { app: AppGridItem; isInstalled: boolean; token?: string }) {
1314
return (
14-
<Link
15-
key={app.id}
15+
<Link
16+
key={app.id}
1617
href={`/${app.id}${token ? `?token=${token}` : ''}`}
1718
>
18-
<Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
19+
<Card className={`p-4 hover:bg-accent ${isInstalled ? 'border-primary' : ''}`}>
1920
<div className="flex items-center gap-4">
20-
<div className="text-4xl">{app.icon}</div>
21+
<div className="text-2xl">{app.icon}</div>
2122
<div>
22-
<h2 className="text-xl font-semibold">{app.name}</h2>
23-
<p className="text-gray-500">{app.description}</p>
24-
<div className="mt-2">
25-
{isInstalled ? (
26-
<span className="text-green-500 text-sm">Installed</span>
27-
) : (
28-
<span className="text-gray-400 text-sm">Not installed</span>
29-
)}
30-
</div>
23+
<h3 className="font-semibold">{app.name}</h3>
24+
<p className="text-sm text-muted-foreground">{app.description}</p>
3125
</div>
3226
</div>
3327
</Card>
@@ -36,20 +30,17 @@ function AppCard({ app, isInstalled, token }: { app: AppGridItem; isInstalled: b
3630
}
3731

3832
export default function Home() {
39-
const [token, setToken] = useQueryState('token');
40-
const [inputToken, setInputToken] = useState(token || '');
33+
const [token] = useQueryState('token');
4134
const [installedApps, setInstalledApps] = useState<string[]>([]);
4235
const [isLoading, setIsLoading] = useState(false);
4336

4437
useEffect(() => {
4538
async function fetchDataSources() {
4639
if (!token) return;
47-
4840
setIsLoading(true);
4941
try {
5042
const sources = await listDataSources(token);
51-
const installed = sources.map(s => s.name);
52-
setInstalledApps(installed);
43+
setInstalledApps(sources.map(source => source.name));
5344
} catch (error) {
5445
console.error('Failed to fetch data sources:', error);
5546
} finally {
@@ -60,52 +51,48 @@ export default function Home() {
6051
fetchDataSources();
6152
}, [token]);
6253

63-
const handleSaveToken = () => {
64-
setToken(inputToken);
65-
};
66-
67-
if (!token) {
68-
return (
69-
<div className="flex min-h-screen items-center justify-center p-4">
70-
<Card className="w-full max-w-md p-6 space-y-4">
71-
<h1 className="text-2xl font-bold">Welcome to TinyNest</h1>
72-
<p className="text-gray-500">Please enter your Tinybird token to continue</p>
73-
<div className="flex gap-2">
74-
<Input
75-
value={inputToken}
76-
onChange={(e) => setInputToken(e.target.value)}
77-
placeholder="Enter your Tinybird token"
78-
/>
79-
<Button onClick={handleSaveToken}>Save</Button>
80-
</div>
81-
</Card>
82-
</div>
83-
);
84-
}
85-
86-
const installedAppsList = Object.values(TOOLS).filter(app => installedApps.includes(app.ds));
87-
const uninstalledAppsList = Object.values(TOOLS).filter(app => !installedApps.includes(app.ds));
88-
8954
return (
90-
<div className="space-y-8">
91-
{installedAppsList.length > 0 && (
92-
<div>
93-
<h2 className="text-2xl font-semibold mb-4">Installed Apps</h2>
94-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
95-
{installedAppsList.map((app) => (
96-
<AppCard key={app.id} app={app} isInstalled={true} token={token} />
97-
))}
98-
</div>
55+
<div className="container py-6">
56+
<TokenPrompt />
57+
{token && isLoading && (
58+
<div className="flex items-center justify-center">
59+
<p className="text-lg font-semibold">Loading...</p>
9960
</div>
10061
)}
101-
102-
{uninstalledAppsList.length > 0 && (
103-
<div>
104-
<h2 className="text-2xl font-semibold mb-4">Available Apps</h2>
105-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
106-
{uninstalledAppsList.map((app) => (
107-
<AppCard key={app.id} app={app} isInstalled={false} token={token} />
108-
))}
62+
{token && !isLoading && (
63+
<div className="space-y-8">
64+
{installedApps.length > 0 && (
65+
<div className="space-y-4">
66+
<h2 className="text-lg font-semibold">Installed Apps</h2>
67+
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
68+
{Object.values(TOOLS)
69+
.filter(app => installedApps.includes(app.ds))
70+
.map(app => (
71+
<AppCard
72+
key={app.id}
73+
app={app}
74+
isInstalled={true}
75+
token={token}
76+
/>
77+
))}
78+
</div>
79+
</div>
80+
)}
81+
82+
<div className="space-y-4">
83+
<h2 className="text-lg font-semibold">Available Apps</h2>
84+
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
85+
{Object.values(TOOLS)
86+
.filter(app => !installedApps.includes(app.ds))
87+
.map(app => (
88+
<AppCard
89+
key={app.id}
90+
app={app}
91+
isInstalled={false}
92+
token={token}
93+
/>
94+
))}
95+
</div>
10996
</div>
11097
</div>
11198
)}

‎apps/web/src/components/token-prompt.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
"use client"
2+
3+
import { SquareArrowOutUpRight } from 'lucide-react'
4+
import { useQueryState } from 'nuqs'
5+
import { useState } from 'react'
6+
import { Button } from './ui/button'
7+
import { Input } from './ui/input'
8+
import Link from 'next/link'
9+
10+
export default function TokenPrompt() {
11+
const [token, setToken] = useQueryState('token')
12+
const [inputToken, setInputToken] = useState('')
13+
14+
const handleSave = () => {
15+
setToken(inputToken)
16+
}
17+
18+
if (token) return null
19+
20+
return (
21+
<div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50">
22+
<div className="fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg">
23+
<div className="space-y-8">
24+
<div className="space-y-2">
25+
<h2 className="text-lg font-semibold tracking-tight">Already deployed?</h2>
26+
<p className="text-sm text-muted-foreground">
27+
Enter your Tinybird admin token to continue
28+
</p>
29+
<div className="flex w-full max-w-sm items-center space-x-2">
30+
<Input
31+
placeholder="tb_admin_xxxx"
32+
value={inputToken}
33+
onChange={(e) => setInputToken(e.target.value)}
34+
/>
35+
<Button onClick={handleSave}>Save</Button>
36+
</div>
37+
</div>
38+
39+
<div className="space-y-2">
40+
<h2 className="text-lg font-semibold tracking-tight">New here?</h2>
41+
<p className="text-sm text-muted-foreground">
42+
Deploy a new project to Tinybird to get started
43+
</p>
44+
<Link
45+
href="https://app.tinybird.co/?starter_kit=https://github.com/tinybirdco/tinynest/tinybird"
46+
target="_blank"
47+
className="inline-flex items-center gap-1 rounded-md bg-primary px-3 py-2 text-sm font-semibold text-primary-foreground shadow hover:bg-primary/90"
48+
>
49+
Deploy to Tinybird
50+
<SquareArrowOutUpRight className="h-4 w-4" />
51+
</Link>
52+
</div>
53+
</div>
54+
</div>
55+
</div>
56+
)
57+
}

‎apps/web/src/components/tools/auth0/dashboard.tsx‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -87,20 +87,6 @@ export default function Auth0Dashboard() {
8787
<div className="grid gap-4 md:grid-cols-2">
8888
<DauChart data={dauData} />
8989
<AuthMechChart data={authMechData} />
90-
<Card className="col-span-1">
91-
<CardHeader>
92-
<CardTitle>Something else</CardTitle>
93-
</CardHeader>
94-
<CardContent className="h-[300px]">
95-
</CardContent>
96-
</Card>
97-
<Card className="col-span-1">
98-
<CardHeader>
99-
<CardTitle>Something else</CardTitle>
100-
</CardHeader>
101-
<CardContent className="h-[300px]">
102-
</CardContent>
103-
</Card>
10490
</div>
10591
</div>
10692
)

‎apps/web/src/components/tools/clerk/dashboard.tsx‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -90,20 +90,6 @@ export default function ClerkDashboard() {
9090
<div className="grid gap-4 md:grid-cols-2">
9191
<DauChart data={dauData} />
9292
<AuthMechChart data={authMechData} />
93-
<Card className="col-span-1">
94-
<CardHeader>
95-
<CardTitle>Something else</CardTitle>
96-
</CardHeader>
97-
<CardContent className="h-[300px]">
98-
</CardContent>
99-
</Card>
100-
<Card className="col-span-1">
101-
<CardHeader>
102-
<CardTitle>Something else</CardTitle>
103-
</CardHeader>
104-
<CardContent className="h-[300px]">
105-
</CardContent>
106-
</Card>
10793
</div>
10894
</div>
10995
)

0 commit comments

Comments
 (0)