Spaces:
Sleeping
Sleeping
File size: 3,400 Bytes
bf8b26e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
import React from 'react';
import { Badge } from './Badge';
import { classNames } from '~/utils/classNames';
import { formatSize } from '~/utils/formatSize';
interface RepositoryStatsProps {
stats: {
totalFiles?: number;
totalSize?: number;
languages?: Record<string, number>;
hasPackageJson?: boolean;
hasDependencies?: boolean;
};
className?: string;
compact?: boolean;
}
export function RepositoryStats({ stats, className, compact = false }: RepositoryStatsProps) {
const { totalFiles, totalSize, languages, hasPackageJson, hasDependencies } = stats;
return (
<div className={classNames('space-y-3', className)}>
{!compact && (
<p className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
Repository Statistics:
</p>
)}
<div className={classNames('grid gap-3', compact ? 'grid-cols-2' : 'grid-cols-2 md:grid-cols-3')}>
{totalFiles !== undefined && (
<div className="flex items-center gap-2 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
<span className="i-ph:files text-purple-500 w-4 h-4" />
<span className={compact ? 'text-xs' : 'text-sm'}>Total Files: {totalFiles.toLocaleString()}</span>
</div>
)}
{totalSize !== undefined && (
<div className="flex items-center gap-2 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
<span className="i-ph:database text-purple-500 w-4 h-4" />
<span className={compact ? 'text-xs' : 'text-sm'}>Total Size: {formatSize(totalSize)}</span>
</div>
)}
</div>
{languages && Object.keys(languages).length > 0 && (
<div className={compact ? 'pt-1' : 'pt-2'}>
<div className="flex items-center gap-2 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark mb-2">
<span className="i-ph:code text-purple-500 w-4 h-4" />
<span className={compact ? 'text-xs' : 'text-sm'}>Languages:</span>
</div>
<div className="flex flex-wrap gap-2">
{Object.entries(languages)
.sort(([, a], [, b]) => b - a)
.slice(0, compact ? 3 : 5)
.map(([lang, size]) => (
<Badge key={lang} variant="subtle" size={compact ? 'sm' : 'md'}>
{lang} ({formatSize(size)})
</Badge>
))}
{Object.keys(languages).length > (compact ? 3 : 5) && (
<Badge variant="subtle" size={compact ? 'sm' : 'md'}>
+{Object.keys(languages).length - (compact ? 3 : 5)} more
</Badge>
)}
</div>
</div>
)}
{(hasPackageJson || hasDependencies) && (
<div className={compact ? 'pt-1' : 'pt-2'}>
<div className="flex flex-wrap gap-2">
{hasPackageJson && (
<Badge variant="primary" size={compact ? 'sm' : 'md'} icon="i-ph:package w-3.5 h-3.5">
package.json
</Badge>
)}
{hasDependencies && (
<Badge variant="primary" size={compact ? 'sm' : 'md'} icon="i-ph:tree-structure w-3.5 h-3.5">
Dependencies
</Badge>
)}
</div>
</div>
)}
</div>
);
}
|