import os

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={\ \ \ \}
      aria-hidden="true"
    />
  )
}

export function SkeletonList({ count = 3, className = '' }) {
  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 \}>
          <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>
  )
}
'''

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={nimate-spin text-purple-500 \}
        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>
  )
}
'''

with open('c:/ScriptoriumAI/scriptoriumai-ui/src/components/ui/Skeleton.tsx', 'w', encoding='utf-8') as f:
    f.write(skeleton_code.replace('\\$', '$'))

with open('c:/ScriptoriumAI/scriptoriumai-ui/src/components/ui/Spinner.tsx', 'w', encoding='utf-8') as f:
    f.write(spinner_code.replace('\\$', '$'))