openstatus.dev
Openstatus
www.openstatus.dev
chore: add curl cta and question (#1100)
* chore: add curl cta and question
* fix: format
authored by
Maximilian Kaske
and committed by
GitHub
d3407d8d
5ee337c0
+50
-22
+50
-22
apps/web/src/app/play/curl/page.tsx
+50
-22
apps/web/src/app/play/curl/page.tsx
···
3
3
ogMetadata,
4
4
twitterMetadata,
5
5
} from "@/app/shared-metadata";
6
+
import { Shell } from "@/components/dashboard/shell";
6
7
import {
7
8
CardContainer,
8
9
CardDescription,
···
10
11
CardIcon,
11
12
CardTitle,
12
13
} from "@/components/marketing/card";
14
+
import { BottomCTA } from "@/components/marketing/in-between-cta";
13
15
import type { Metadata } from "next";
14
16
import { CurlForm } from "./_components/curl-form";
15
17
···
37
39
38
40
export default function CurlBuilder() {
39
41
return (
40
-
<CardContainer>
41
-
<CardHeader>
42
-
<CardIcon icon="terminal" />
43
-
<CardTitle>cURL Builder</CardTitle>
44
-
<CardDescription className="max-w-md">
45
-
An online curl command line builder. Generate curl commands to test
46
-
your API endpoints.
47
-
</CardDescription>
48
-
</CardHeader>
49
-
<div className="mx-auto grid w-full max-w-xl gap-6">
50
-
<CurlForm
51
-
defaultValues={{
52
-
method: "GET",
53
-
url: "",
54
-
body: "",
55
-
verbose: false,
56
-
insecure: false,
57
-
json: false,
58
-
headers: [],
59
-
}}
60
-
/>
42
+
<div className="grid h-full w-full gap-12">
43
+
<CardContainer>
44
+
<CardHeader>
45
+
<CardIcon icon="terminal" />
46
+
<CardTitle>cURL Builder</CardTitle>
47
+
<CardDescription className="max-w-md">
48
+
An online curl command line builder. Generate curl commands to test
49
+
your API endpoints.
50
+
</CardDescription>
51
+
</CardHeader>
52
+
<div className="mx-auto grid w-full max-w-xl gap-8">
53
+
<CurlForm
54
+
defaultValues={{
55
+
method: "GET",
56
+
url: "",
57
+
body: "",
58
+
verbose: false,
59
+
insecure: false,
60
+
json: false,
61
+
headers: [],
62
+
}}
63
+
/>
64
+
</div>
65
+
</CardContainer>
66
+
<Informations />
67
+
<BottomCTA />
68
+
</div>
69
+
);
70
+
}
71
+
72
+
function Informations() {
73
+
return (
74
+
<Shell>
75
+
<div className="grid gap-1">
76
+
<h3 className="font-semibold">What is cURL?</h3>
77
+
<p className="text-muted-foreground">
78
+
cURL (Client URL) is a command-line tool and library for transferring
79
+
data with URLs. It supports various protocols like HTTP, HTTPS, FTP,
80
+
and more, making it a versatile choice for testing APIs, downloading
81
+
files, or performing network tasks. Its simplicity and power come from
82
+
the ability to execute complex operations through straightforward
83
+
commands.
84
+
</p>
85
+
<p className="text-muted-foreground">
86
+
cURL is available on most operating systems, including Linux, macOS,
87
+
and Windows.
88
+
</p>
61
89
</div>
62
-
</CardContainer>
90
+
</Shell>
63
91
);
64
92
}