Skip to content

Commit a7319d8

Browse files
ivancernjaivancernja
authored
added leap component for quick project generation (#123)
1 parent 301c97b commit a7319d8

File tree

4 files changed

+215
-588
lines changed

4 files changed

+215
-588
lines changed

‎apps/docs/components/docs/index.ts‎

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,33 +2,29 @@
22

33
// Accordion components
44
export {
5-
Accordion,
6-
AccordionContent,
7-
AccordionItem,
8-
Accordions,
9-
AccordionTrigger,
10-
} from './accordion';
11-
export { Callout } from './callout';
5+
Accordion,
6+
AccordionContent,
7+
AccordionItem,
8+
Accordions,
9+
AccordionTrigger,
10+
} from "./accordion";
11+
export { Callout } from "./callout";
1212
// Card components
1313
export {
14-
Card,
15-
CardContent,
16-
CardDescription,
17-
CardHeader,
18-
Cards,
19-
CardTitle,
20-
} from './card';
14+
Card,
15+
CardContent,
16+
CardDescription,
17+
CardHeader,
18+
Cards,
19+
CardTitle,
20+
} from "./card";
2121
// Code components
22-
export { CodeBlock, InlineCode } from './code-block';
22+
export { CodeBlock, InlineCode } from "./code-block";
2323

2424
// Steps components
25-
export { CompletedStep, Step, Steps } from './steps';
25+
export { CompletedStep, Step, Steps } from "./steps";
2626

2727
// Tabs components
28-
export {
29-
Tab,
30-
Tabs,
31-
TabsContent,
32-
TabsList,
33-
TabsTrigger,
34-
} from './tabs';
28+
export { Tab, Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
29+
30+
export { LeapComponent } from "./leap-component";

‎apps/docs/components/docs/leap-component.tsx‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
"use client";
2+
3+
import React from "react";
4+
5+
type ExampleType = "saas" | "merch store";
6+
7+
interface PromptMap {
8+
[key: string]: string;
9+
}
10+
11+
export const LeapComponent: React.FC = () => {
12+
// Handle button click
13+
const handleGenerateClick = (): void => {
14+
if (typeof document !== "undefined" && typeof window !== "undefined") {
15+
const input = document.querySelector(
16+
".leap-prompt-input",
17+
) as HTMLInputElement;
18+
if (input && input.value) {
19+
// Append "use Databuddy for analytics" to the user's prompt
20+
const enhancedPrompt = `${input.value} use Databuddy for analytics`;
21+
window.location.href = `https://leap.new/?build=${encodeURIComponent(enhancedPrompt)}`;
22+
} else {
23+
window.location.href = "https://leap.new/";
24+
}
25+
}
26+
};
27+
28+
// Handle example click
29+
const handleExampleClick = (exampleType: ExampleType): void => {
30+
if (typeof document !== "undefined" && typeof window !== "undefined") {
31+
const input = document.querySelector(
32+
".leap-prompt-input",
33+
) as HTMLInputElement;
34+
if (input) {
35+
// Set specific prompts based on the example type
36+
const prompts: PromptMap = {
37+
saas: "Build me a trip planning tool",
38+
"merch store": "Build me a t-shirt store",
39+
};
40+
input.value = prompts[exampleType] || exampleType;
41+
}
42+
}
43+
};
44+
45+
const examples: ExampleType[] = ["saas", "merch store"];
46+
47+
return (
48+
<div style={{ position: "relative", width: "100%" }}>
49+
<div
50+
style={{
51+
border: "1px solid #222",
52+
borderRadius: "0px",
53+
padding: "20px",
54+
margin: "36px 0",
55+
backgroundColor: "#ffffff",
56+
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.2)",
57+
width: "100%",
58+
maxWidth: "680px",
59+
boxSizing: "border-box",
60+
}}
61+
>
62+
<h3
63+
style={{
64+
margin: "0 0 12px 0",
65+
color: "#000",
66+
fontSize: "18px",
67+
fontWeight: "600",
68+
}}
69+
>
70+
Try Databuddy with Leap
71+
</h3>
72+
<div>
73+
<p
74+
style={{
75+
marginBottom: "16px",
76+
color: "#666",
77+
fontSize: "15px",
78+
lineHeight: "1.5",
79+
}}
80+
>
81+
Let Leap generate a complete application that uses Databuddy for
82+
analytics.
83+
</p>
84+
<div
85+
style={{
86+
display: "flex",
87+
gap: "12px",
88+
flexWrap: "nowrap",
89+
alignItems: "center",
90+
}}
91+
>
92+
<div style={{ flexGrow: 1, minWidth: 0 }}>
93+
<input
94+
type="text"
95+
className="leap-prompt-input"
96+
style={{
97+
width: "100%",
98+
padding: "12px 16px",
99+
border: "1px solid #333",
100+
borderRadius: "0px",
101+
fontSize: "14px",
102+
backgroundColor: "#fff",
103+
color: "#666",
104+
boxSizing: "border-box",
105+
}}
106+
placeholder="What do you want to build with Databuddy analytics?"
107+
/>
108+
</div>
109+
<div style={{ flexShrink: 0 }}>
110+
<button
111+
type="button"
112+
style={{
113+
backgroundColor: "#fff",
114+
color: "#000",
115+
border: "1px solid #000",
116+
borderRadius: "0px",
117+
padding: "12px 20px",
118+
cursor: "pointer",
119+
fontWeight: "600",
120+
fontSize: "14px",
121+
transition: "all 0.2s ease",
122+
whiteSpace: "nowrap",
123+
}}
124+
onClick={handleGenerateClick}
125+
>
126+
Generate
127+
</button>
128+
</div>
129+
</div>
130+
<div
131+
style={{
132+
display: "flex",
133+
gap: "12px",
134+
flexWrap: "wrap",
135+
marginTop: "8px",
136+
fontSize: "12px",
137+
}}
138+
>
139+
<span style={{ color: "#666", marginRight: "4px" }}>Examples:</span>
140+
{examples.map((example: ExampleType, index: number) => (
141+
<div
142+
key={index}
143+
onClick={() => handleExampleClick(example)}
144+
style={{
145+
color: "#999",
146+
cursor: "pointer",
147+
borderBottom: "1px dotted #555",
148+
padding: "0 2px",
149+
transition: "color 0.2s ease",
150+
}}
151+
className="hover:text-[#d5db04]"
152+
role="button"
153+
tabIndex={0}
154+
onKeyDown={(e: React.KeyboardEvent) => {
155+
if (e.key === "Enter" || e.key === " ") {
156+
e.preventDefault();
157+
handleExampleClick(example);
158+
}
159+
}}
160+
>
161+
{example}
162+
</div>
163+
))}
164+
</div>
165+
</div>
166+
</div>
167+
</div>
168+
);
169+
};
170+
171+
export default LeapComponent;

‎apps/docs/content/docs/getting-started.mdx‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,12 @@ import { Tab, Tabs } from "@/components/docs";
88
import { Callout } from "@/components/docs";
99
import { Card, Cards } from "@/components/docs";
1010
import { CodeBlock } from "@/components/docs";
11+
import { LeapComponent } from "@/components/docs";
1112

1213
This guide will help you set up Databuddy analytics in your application in just a few minutes.
1314

15+
<LeapComponent/>
16+
1417
<Steps>
1518
<Step>
1619

@@ -32,7 +35,7 @@ Choose your installation method based on your application type:
3235

3336
Install the official Databuddy SDK:
3437

35-
<CodeBlock
38+
<CodeBlock
3639
language="bash"
3740
code={`# Using bun (recommended)
3841
bun add @databuddy/sdk
@@ -45,11 +48,11 @@ yarn add @databuddy/sdk`}
4548
/>
4649

4750
</Tab>
48-
<Tab value="Script Tag">
51+
<Tab value="Script Tag">
4952

5053
For any website, use the script tag method:
5154

52-
<CodeBlock
55+
<CodeBlock
5356
language="html"
5457
code={`<script
5558
src="https://cdn.databuddy.cc/databuddy.js"
@@ -73,8 +76,8 @@ For any website, use the script tag method:
7376

7477
Add the `<Databuddy />` component to your root layout:
7578

76-
<CodeBlock
77-
language="tsx"
79+
<CodeBlock
80+
language="tsx"
7881
filename="app/layout.tsx"
7982
code={`import { Databuddy } from "@databuddy/sdk";
8083
@@ -103,8 +106,8 @@ export default function RootLayout({
103106

104107
**Environment Variables:**
105108

106-
<CodeBlock
107-
language="bash"
109+
<CodeBlock
110+
language="bash"
108111
filename=".env.local"
109112
code="NEXT_PUBLIC_DATABUDDY_CLIENT_ID=your-client-id-here"
110113
/>
@@ -114,8 +117,8 @@ export default function RootLayout({
114117

115118
Add the script to your HTML before the closing `</body>` tag:
116119

117-
<CodeBlock
118-
language="html"
120+
<CodeBlock
121+
language="html"
119122
filename="index.html"
120123
code={`<!DOCTYPE html>
121124
<html>
@@ -175,8 +178,8 @@ Check that analytics are working correctly:
175178
<Tabs items={['React/Next.js', 'Script Tag']}>
176179
<Tab value="React/Next.js">
177180

178-
<CodeBlock
179-
language="tsx"
181+
<CodeBlock
182+
language="tsx"
180183
filename="Recommended Configuration"
181184
code={`<Databuddy
182185
clientId="your-client-id"
@@ -196,8 +199,8 @@ Check that analytics are working correctly:
196199
</Tab>
197200
<Tab value="Script Tag">
198201

199-
<CodeBlock
200-
language="html"
202+
<CodeBlock
203+
language="html"
201204
filename="Recommended Configuration"
202205
code={`<script
203206
src="https://cdn.databuddy.cc/databuddy.js"
@@ -229,8 +232,8 @@ Check that analytics are working correctly:
229232
analytics with test data.
230233
</Callout>
231234

232-
<CodeBlock
233-
language="tsx"
235+
<CodeBlock
236+
language="tsx"
234237
filename="Environment Configuration"
235238
code={`const isDevelopment = process.env.NODE_ENV === "development";
236239
const isProduction = process.env.NODE_ENV === "production";
@@ -257,8 +260,8 @@ Track custom events with rich properties for comprehensive analytics:
257260
<Tabs items={['React/Next.js', 'Script Tag']}>
258261
<Tab value="React/Next.js">
259262

260-
<CodeBlock
261-
language="tsx"
263+
<CodeBlock
264+
language="tsx"
262265
filename="Custom Events with Rich Properties"
263266
code={`import { useEffect } from "react";
264267
@@ -316,8 +319,8 @@ function SignupForm() {
316319
</Tab>
317320
<Tab value="Script Tag">
318321

319-
<CodeBlock
320-
language="html"
322+
<CodeBlock
323+
language="html"
321324
filename="Custom Events with Detailed Properties"
322325
code={`<script>
323326
// Track button clicks with comprehensive context

0 commit comments

Comments
 (0)