53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import { Button } from '@/component/ui/button'
|
||
import { Label } from '@/component/ui/label'
|
||
import { FileText, Settings } from 'lucide-react'
|
||
import { StandardsConfig } from './definition'
|
||
|
||
interface StandardsPreviewProps {
|
||
config: StandardsConfig
|
||
}
|
||
|
||
const StandardSkeleton = ({ index }: { index: number }) => (
|
||
<div className="flex items-center gap-2 rounded-md bg-muted/30 p-2 text-sm">
|
||
<div className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-primary/10">
|
||
<span className="text-xs font-medium text-primary">{index + 1}</span>
|
||
</div>
|
||
<div className="min-w-0 flex-1">
|
||
<div className="mb-1 h-3 w-3/4 rounded bg-muted"></div>
|
||
<div className="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
|
||
<FileText className="h-2.5 w-2.5" />
|
||
<div className="h-2 w-16 rounded bg-muted"></div>
|
||
</div>
|
||
</div>
|
||
<div className="h-5 w-12 shrink-0 rounded bg-muted"></div>
|
||
</div>
|
||
)
|
||
|
||
export const StandardsPreview: React.FC<StandardsPreviewProps> = ({
|
||
config,
|
||
}) => {
|
||
const skeletonCount = config.maxItems || 7
|
||
|
||
return (
|
||
<div className="space-y-2">
|
||
<div>
|
||
<div className="mb-2 flex items-center justify-between">
|
||
<Label className="text-sm font-medium">Эталоны</Label>
|
||
<Button variant="outline" size="sm" disabled className="h-7 px-2">
|
||
<Settings className="mr-1 h-3 w-3" />
|
||
Настроить
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<div className="space-y-1">
|
||
{Array.from({ length: skeletonCount }, (_, index) => (
|
||
<StandardSkeleton key={index} index={index} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|