feat: improve theme selector and UI components

- Updated `ThemeSelector` to use a new `ThemePreview` component for better theme visualization.
- Refactored button implementation in `ThemeSelector` to utilize the new `Button` component, enhancing consistency.
- Added a UI showcase section in `GeneralSettingsPageClient` to display available UI components with different themes.
- Enhanced `Badge`, `Button`, and `Input` components with new variants and improved styling for better usability and visual appeal.
- Updated CSS variables in `globals.css` for improved contrast and accessibility across themes.

src/components/ui/Input.tsx

@@ -2,43 +2,31 @@ import { InputHTMLAttributes, forwardRef } from 'react';
 import { cn } from '@/lib/utils';
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-  label?: string;
-  error?: string;
+  variant?: 'default' | 'error';
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className, label, error, ...props }, ref) => {
+  ({ className, variant = 'default', type, ...props }, ref) => {
+    const variants = {
+      default: 'border border-[var(--border)]/50 bg-[var(--input)] text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] focus:border-[var(--primary)]/70 focus:ring-1 focus:ring-[var(--primary)]/20',
+      error: 'border border-[var(--destructive)]/50 bg-[var(--input)] text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] focus:border-[var(--destructive)]/70 focus:ring-1 focus:ring-[var(--destructive)]/20'
+    };
+
     return (
-      <div className="space-y-2">
-        {label && (
-          <label className="block text-sm font-mono font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
-            {label}
-          </label>
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-colors',
+          variants[variant],
+          className
         )}
-        <input
-          className={cn(
-            'w-full px-3 py-2 bg-[var(--input)] border border-[var(--border)]/50 rounded-lg',
-            'text-[var(--foreground)] font-mono text-sm placeholder-[var(--muted-foreground)]',
-            'focus:outline-none focus:ring-2 focus:ring-[var(--primary)]/50 focus:border-[var(--primary)]/50',
-            'hover:border-[var(--border)] transition-all duration-200',
-            'backdrop-blur-sm',
-            error && 'border-[var(--destructive)]/50 focus:ring-[var(--destructive)]/50 focus:border-[var(--destructive)]/50',
-            className
-          )}
-          ref={ref}
-          {...props}
-        />
-        {error && (
-          <p className="text-xs font-mono text-[var(--destructive)] flex items-center gap-1">
-            <span className="text-[var(--destructive)]">⚠</span>
-            {error}
-          </p>
-        )}
-      </div>
+        ref={ref}
+        {...props}
+      />
     );
   }
 );
 
 Input.displayName = 'Input';
 
-export { Input };
+export { Input };