+
{children}
diff --git a/src/components/mdx-components.tsx b/src/components/mdx-components.tsx
index 646018f..139b387 100644
--- a/src/components/mdx-components.tsx
+++ b/src/components/mdx-components.tsx
@@ -12,13 +12,6 @@ import {
Sparkles,
} from 'lucide-react'
import { Button } from '@/components/ui/button'
-import {
- Card,
- CardContent,
- CardDescription,
- CardHeader,
- CardTitle,
-} from '@/components/ui/card'
import { cn } from '@/lib/utils'
function extractTextContent(node: React.ReactNode): string {
@@ -61,7 +54,7 @@ function InlineCode({
return (
-
-
-
-
-
-
-
-
- {language || 'plain text'}
+
+
+
+
+ {language || 'text'}
-
-
- {icon ? (
- {icon}
- ) : (
-
- {title}
-
- ) : null}
- {children}
-
+
+ {icon ? (
+ {icon}
+ ) : (
+
+ {title}
+
+ ) : null}
+ {children}
-
-
+
+
)
}
@@ -198,21 +191,21 @@ interface CodeBlockProps {
function CodeBlock({ children, title, language }: CodeBlockProps) {
return (
-
+
{(title || language) && (
-
-
+
+
{title || 'Code example'}
{language ? (
-
+
{language}
) : null}
-
+
)}
- {children}
-
+ {children}
+
)
}
@@ -222,9 +215,9 @@ interface TabsProps {
function Tabs({ children }: TabsProps) {
return (
-
+
{children}
-
+
)
}
@@ -249,53 +242,51 @@ function Endpoint({
}: EndpointProps) {
const methodTone =
{
- GET: 'bg-sky-100 text-sky-900 ring-sky-200 dark:bg-sky-950 dark:text-sky-200 dark:ring-sky-900',
- POST: 'bg-emerald-100 text-emerald-900 ring-emerald-200 dark:bg-emerald-950 dark:text-emerald-200 dark:ring-emerald-900',
- PUT: 'bg-amber-100 text-amber-950 ring-amber-200 dark:bg-amber-950 dark:text-amber-200 dark:ring-amber-900',
- PATCH:
- 'bg-orange-100 text-orange-950 ring-orange-200 dark:bg-orange-950 dark:text-orange-200 dark:ring-orange-900',
- DELETE:
- 'bg-rose-100 text-rose-900 ring-rose-200 dark:bg-rose-950 dark:text-rose-200 dark:ring-rose-900',
+ GET: 'bg-sky-500/10 text-sky-700 ring-sky-500/20 dark:bg-sky-500/10 dark:text-sky-400 dark:ring-sky-500/20',
+ POST: 'bg-emerald-500/10 text-emerald-700 ring-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-400 dark:ring-emerald-500/20',
+ PUT: 'bg-amber-500/10 text-amber-700 ring-amber-500/20 dark:bg-amber-500/10 dark:text-amber-400 dark:ring-amber-500/20',
+ PATCH: 'bg-orange-500/10 text-orange-700 ring-orange-500/20 dark:bg-orange-500/10 dark:text-orange-400 dark:ring-orange-500/20',
+ DELETE: 'bg-rose-500/10 text-rose-700 ring-rose-500/20 dark:bg-rose-500/10 dark:text-rose-400 dark:ring-rose-500/20',
}[method.toUpperCase()] ||
- 'bg-zinc-100 text-zinc-900 ring-zinc-200 dark:bg-zinc-900 dark:text-zinc-200 dark:ring-zinc-800'
+ 'bg-zinc-500/10 text-zinc-700 ring-zinc-500/20 dark:bg-zinc-500/10 dark:text-zinc-400 dark:ring-zinc-500/20'
return (
-
-
-
+
+
{method}
-
+
{path}
-
-
+
+ {title ? {title} : null}
+ {status ? Status {status} : null}
+
+
{children}
-
+
) : null}
-
+
)
}
@@ -315,20 +306,20 @@ function EndpointGroup({
return (
-
-
+
+
Route Group
-
+
{title}
{description ? (
-
+
{description}
) : null}
@@ -343,7 +334,7 @@ interface ArchitectureGridProps {
}
function ArchitectureGrid({ children }: ArchitectureGridProps) {
- return {children}
+ return {children}
}
interface ArchitectureCardProps extends React.HTMLAttributes {
@@ -372,37 +363,37 @@ function ArchitectureCard({
}[icon] || Server
return (
-
-
+
{eyebrow ? (
-
+
{eyebrow}
) : null}
-
+
{title}
-
+
{stack ? (
-
+
{stack}
-
+
) : null}
-
-
+
+
{children}
-
-
+
+
)
}
@@ -410,7 +401,7 @@ const components = {
h1: ({ className, ...props }: React.HTMLAttributes) => (
) => (
) => (
) => (
) => (
) => (
) => (
) => (
) => (
) => (
),
li: ({ className, ...props }: React.HTMLAttributes) => (
-
+
),
blockquote: ({ className, ...props }: React.HTMLAttributes) => (
) => (
// eslint-disable-next-line @next/next/no-img-element
![{alt}]()
),
hr: ({ ...props }) => (
-
+
),
table: ({ className, ...props }: React.HTMLAttributes) => (
-
-
+
+
),
- thead: ({
- className,
- ...props
- }: React.HTMLAttributes) => (
-
- ),
- tbody: ({
- className,
- ...props
- }: React.HTMLAttributes) => (
-
- ),
- tr: ({ className, ...props }: React.HTMLAttributes) => (
- ) => (
) => (