ad427365c9
* feat(docs): add interactive examples and API references for Button, Card, and LoadingFallback components - Updated dependencies - Set `retries` to a fixed value of 3 for consistent test retries across environments. - Increased `timeout` from 60 seconds to 120 seconds to allow more time for tests to complete. - Reduced `expect` timeout from 10 seconds to 5 seconds for quicker feedback on assertions.
59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { Settings } from 'lucide-react';
|
|
|
|
import { Badge } from '@kit/ui/badge';
|
|
|
|
import { COMPONENTS_REGISTRY } from '../lib/components-data';
|
|
|
|
interface DocsHeaderProps {
|
|
selectedComponent: string;
|
|
}
|
|
|
|
export function DocsHeader({ selectedComponent }: DocsHeaderProps) {
|
|
const component = COMPONENTS_REGISTRY.find(
|
|
(c) => c.name === selectedComponent,
|
|
);
|
|
|
|
if (!component) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="bg-muted/30 border-b p-4">
|
|
<div className="flex items-start justify-between">
|
|
<div className="space-y-1">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex items-center gap-4">
|
|
<h2 className="text-2xl font-bold">{component.name}</h2>
|
|
|
|
<div className="mt-1 flex items-center gap-2">
|
|
<Badge variant="outline">{component.category}</Badge>
|
|
|
|
<Badge variant="secondary" className="text-xs">
|
|
{component.subcategory}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-muted-foreground max-w-2xl">
|
|
{component.description}
|
|
</p>
|
|
|
|
<div className="text-muted-foreground flex items-center gap-4 text-sm">
|
|
<span className="flex items-center gap-1">
|
|
<Settings className="h-4 w-4" />
|
|
{component.props.length} props
|
|
</span>
|
|
|
|
<span className="flex items-center gap-1">
|
|
{component.sourceFile}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|