Start repository

src/components/Background.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+interface BackgroundProps {
+  background: string;
+}
+
+export function Background({ background }: BackgroundProps) {
+  const getBackgroundStyle = () => {
+    switch (background) {
+      case 'rainbow':
+        return {
+          background: 'linear-gradient(45deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080)',
+          backgroundSize: '400% 400%',
+          animation: 'rainbow 10s ease infinite'
+        };
+      case 'matrix':
+        return {
+          background: 'linear-gradient(135deg, #000000 0%, #0d4a0d 50%, #000000 100%)',
+          backgroundImage: 'radial-gradient(circle at 20% 50%, #00ff00 1px, transparent 1px), radial-gradient(circle at 80% 50%, #00ff00 1px, transparent 1px)',
+          backgroundSize: '20px 20px',
+          animation: 'matrix 20s linear infinite'
+        };
+      case 'cyberpunk':
+        return {
+          background: 'linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 25%, #16213e 50%, #e94560 75%, #0f3460 100%)',
+          backgroundSize: '400% 400%',
+          animation: 'cyberpunk 15s ease infinite'
+        };
+      case 'space':
+        return {
+          background: 'radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%)',
+          backgroundImage: 'radial-gradient(2px 2px at 20px 30px, #eee, transparent), radial-gradient(2px 2px at 40px 70px, #fff, transparent), radial-gradient(1px 1px at 90px 40px, #fff, transparent)',
+          backgroundSize: '200px 100px',
+          animation: 'stars 50s linear infinite'
+        };
+      case 'glitch':
+        return {
+          background: 'linear-gradient(45deg, #ff0000, #00ff00, #0000ff, #ffff00, #ff00ff, #00ffff)',
+          backgroundSize: '400% 400%',
+          animation: 'glitch 2s ease infinite'
+        };
+      case 'ultimate':
+        return {
+          background: 'conic-gradient(from 0deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080, #ff0000)',
+          backgroundSize: '400% 400%',
+          animation: 'ultimate 5s linear infinite'
+        };
+      default:
+        return {
+          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
+        };
+    }
+  };
+
+  return (
+    <div 
+      className="fixed inset-0 -z-10"
+      style={getBackgroundStyle()}
+    />
+  );
+}