80 lines
2.5 KiB
JavaScript
Executable file
80 lines
2.5 KiB
JavaScript
Executable file
const fs = require('fs');
|
|
|
|
const skeleton_code = `import React from 'react'
|
|
|
|
interface SkeletonProps {
|
|
className?: string
|
|
variant?: 'rectangular' | 'circular' | 'text'
|
|
pulse?: boolean
|
|
}
|
|
|
|
export function Skeleton({ className = '', variant = 'rectangular', pulse = true }: SkeletonProps) {
|
|
const baseClasses = 'bg-gray-800 border border-gray-700'
|
|
const variantClasses = {
|
|
rectangular: 'rounded-md',
|
|
circular: 'rounded-full',
|
|
text: 'rounded-sm h-4'
|
|
}
|
|
const animationClasses = pulse ? 'animate-pulse' : ''
|
|
|
|
return (
|
|
<div
|
|
className={\`\${baseClasses} \${variantClasses[variant]} \${animationClasses} \${className}\`}
|
|
aria-hidden="true"
|
|
/>
|
|
)
|
|
}
|
|
|
|
export function SkeletonList({ count = 3, className = '' }: { count?: number, className?: string }) {
|
|
return (
|
|
<div className="space-y-4">
|
|
{Array.from({ length: count }).map((_, i) => (
|
|
<div key={i} className={\`p-4 bg-[#1e1e2e] border border-gray-700/50 rounded-lg flex items-center justify-between \${className}\`}>
|
|
<div className="space-y-3 flex-1 mr-4">
|
|
<Skeleton variant="text" className="w-1/3 h-5" />
|
|
<Skeleton variant="text" className="w-1/2 h-4" />
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Skeleton variant="circular" className="w-8 h-8" />
|
|
<Skeleton variant="circular" className="w-8 h-8" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
`;
|
|
|
|
const spinner_code = `import React from 'react'
|
|
|
|
export function Spinner({ className = 'w-6 h-6', text }: { className?: string, text?: string }) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center space-y-2">
|
|
<svg
|
|
className={\`animate-spin text-purple-500 \${className}\`}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<circle
|
|
className="opacity-25"
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
stroke="currentColor"
|
|
strokeWidth="4"
|
|
></circle>
|
|
<path
|
|
className="opacity-75"
|
|
fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
></path>
|
|
</svg>
|
|
{text && <span className="text-sm text-gray-400">{text}</span>}
|
|
</div>
|
|
)
|
|
}
|
|
`;
|
|
|
|
fs.writeFileSync('c:/ScriptoriumAI/scriptoriumai-ui/src/components/ui/Skeleton.tsx', skeleton_code);
|
|
fs.writeFileSync('c:/ScriptoriumAI/scriptoriumai-ui/src/components/ui/Spinner.tsx', spinner_code);
|