70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { useLanguage } from "@/components/language-provider";
|
|
import { Section, SectionHeading } from "@/components/ui/section";
|
|
import { PROTOCOLS } from "@/lib/content";
|
|
|
|
const ENDPOINTS = [
|
|
"POST /api/v1/auth/login",
|
|
"POST /api/v1/auth/refresh",
|
|
"GET /api/v1/users/me",
|
|
"GET /api/v1/organizations",
|
|
"GET /api/v1/sessions",
|
|
"GET /.well-known/openid-configuration",
|
|
];
|
|
|
|
const CODE = `curl -X POST https://id.example.com/api/v1/auth/login \\
|
|
-H "Content-Type: application/json" \\
|
|
-d '{"email":"user@acme.com","password":"••••••••"}'
|
|
|
|
# => { "access": "eyJ...", "refresh": "eyJ...", "token_type": "bearer" }`;
|
|
|
|
export function Developers() {
|
|
const { t, lang } = useLanguage();
|
|
return (
|
|
<Section id="developers" className="bg-slate-50 dark:bg-ink-soft/40">
|
|
<div className="container-x">
|
|
<SectionHeading
|
|
eyebrow={t.developers.eyebrow}
|
|
title={t.developers.title}
|
|
subtitle={t.developers.subtitle}
|
|
/>
|
|
|
|
<div className="grid gap-6 lg:grid-cols-2">
|
|
<div className="card">
|
|
<h3 className="text-sm font-semibold uppercase tracking-wide text-brand-600 dark:text-brand-300">
|
|
{t.developers.endpointsTitle}
|
|
</h3>
|
|
<ul className="mt-4 space-y-2 font-mono text-sm text-slate-700 dark:text-slate-300">
|
|
{ENDPOINTS.map((e) => (
|
|
<li key={e} className="rounded-lg bg-slate-100 px-3 py-2 dark:bg-ink/60">
|
|
{e}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="mt-6 flex flex-wrap gap-2">
|
|
{PROTOCOLS.map((p) => (
|
|
<span
|
|
key={p}
|
|
className="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs text-slate-600 dark:border-white/10 dark:bg-white/5 dark:text-slate-300"
|
|
>
|
|
{p}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="card">
|
|
<h3 className="text-sm font-semibold uppercase tracking-wide text-brand-600 dark:text-brand-300">
|
|
{t.developers.codeTitle}
|
|
</h3>
|
|
<pre className="mt-4 overflow-x-auto rounded-xl bg-slate-900 p-4 text-xs leading-relaxed text-slate-100 dark:bg-ink/80 dark:text-slate-300">
|
|
<code>{CODE}</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
);
|
|
}
|