project-nomad/admin/inertia/components/markdoc/Image.tsx
Chris Sherwood 1a95b84a8c feat(docs): polish docs rendering with desert-themed components
Add custom Markdoc renderers for images, links, paragraphs, code blocks,
inline code, and horizontal rules. Restyle existing heading, table, and
list components to match the desert tactical color palette. Add 8
screenshots to docs with polished image presentation (rounded corners,
shadow, captions). Constrain content width for readability.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-06 14:41:30 -08:00

21 lines
561 B
TypeScript

export function Image({ src, alt, title }: { src: string; alt?: string; title?: string }) {
return (
<figure className="my-8">
<div className="overflow-hidden rounded-lg border border-desert-tan-lighter shadow-md">
<img
src={src}
alt={alt || ''}
title={title}
className="w-full h-auto"
loading="lazy"
/>
</div>
{alt && (
<figcaption className="mt-3 text-center text-sm text-desert-stone italic">
{alt}
</figcaption>
)}
</figure>
)
}