32 lines
1.6 KiB
TypeScript
32 lines
1.6 KiB
TypeScript
import { Card, Skeleton } from './ui'
|
|
import { renderMarkdown } from '@/lib/markdownRenderer'
|
|
|
|
interface DocsContentProps {
|
|
content: string
|
|
loading: boolean
|
|
}
|
|
|
|
export function DocsContent({ content, loading }: DocsContentProps): React.ReactElement {
|
|
if (loading) {
|
|
return (
|
|
<Card variant="default" className="bg-cyber-dark backdrop-blur-sm space-y-4">
|
|
<Skeleton variant="rectangular" height={32} className="w-1/2" />
|
|
<Skeleton variant="rectangular" height={16} className="w-full" />
|
|
<Skeleton variant="rectangular" height={16} className="w-full" />
|
|
<Skeleton variant="rectangular" height={16} className="w-3/4" />
|
|
<Skeleton variant="rectangular" height={32} className="w-1/3" />
|
|
<Skeleton variant="rectangular" height={16} className="w-full" />
|
|
<Skeleton variant="rectangular" height={16} className="w-5/6" />
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Card variant="default" className="bg-cyber-dark backdrop-blur-sm">
|
|
<div className="prose prose-invert max-w-none prose-headings:text-neon-cyan prose-headings:font-mono prose-p:text-cyber-accent prose-a:text-neon-green prose-a:hover:text-neon-cyan prose-strong:text-neon-green prose-code:text-neon-cyan prose-code:bg-cyber-darker prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-pre:bg-cyber-darker prose-pre:border prose-pre:border-neon-cyan/20 prose-blockquote:border-neon-cyan/50 prose-blockquote:text-cyber-accent/70 prose-ul:text-cyber-accent prose-ol:text-cyber-accent prose-li:marker:text-neon-cyan">
|
|
{renderMarkdown(content)}
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|