|
4 | 4 | // This is the heart of our app, designed to be simple but powerful |
5 | 5 |
|
6 | 6 | import { useState, useCallback, useEffect, useMemo, memo } from 'react'; |
7 | | -import { useUser } from '@auth0/nextjs-auth0/client'; // Auth0 user hook |
| 7 | +// import { useUser } from '@auth0/nextjs-auth0/client'; // Temporarily disabled due to Auth0 issues |
8 | 8 | import dynamic from 'next/dynamic'; |
9 | 9 | import { motion, AnimatePresence } from 'framer-motion'; |
10 | 10 | import { toast } from 'sonner'; |
@@ -91,74 +91,47 @@ const useTheme = () => { |
91 | 91 | }; |
92 | 92 |
|
93 | 93 | /** |
94 | | - * Memoized Auth Header component |
| 94 | + * Simple Auth Header component |
95 | 95 | */ |
96 | 96 | const AuthHeader = memo<{ user: any }>(({ user }) => ( |
97 | | - <motion.div |
98 | | - initial={{ opacity: 0, y: -20 }} |
99 | | - animate={{ opacity: 1, y: 0 }} |
100 | | - transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }} |
101 | | - className="fixed top-3 sm:top-6 right-3 sm:right-6 z-50 flex items-center space-x-2 sm:space-x-3" |
102 | | - > |
| 97 | + <div className="fixed top-4 right-4 z-50"> |
103 | 98 | {user ? ( |
104 | | - <div className="flex items-center space-x-2 sm:space-x-3 backdrop-blur-xl bg-white/80 dark:bg-gray-900/80 border border-gray-200/50 dark:border-gray-700/50 px-3 sm:px-4 py-2 rounded-xl sm:rounded-2xl shadow-lg"> |
| 99 | + <div className="flex items-center space-x-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 px-4 py-2 rounded-lg shadow"> |
105 | 100 | {user.picture && ( |
106 | | - <motion.img |
| 101 | + <img |
107 | 102 | src={user.picture} |
108 | | - alt={`${user.name || 'User'} profile picture`} |
109 | | - className="w-6 h-6 sm:w-8 sm:h-8 rounded-full" |
110 | | - loading="lazy" |
111 | | - width={32} |
112 | | - height={32} |
113 | | - whileHover={{ scale: 1.05 }} |
114 | | - transition={{ type: "spring", stiffness: 400, damping: 25 }} |
| 103 | + alt="Profile" |
| 104 | + className="w-8 h-8 rounded-full" |
115 | 105 | /> |
116 | 106 | )} |
117 | | - <span className="font-medium text-gray-900 dark:text-white text-xs sm:text-sm max-w-[120px] sm:max-w-none truncate"> |
| 107 | + <span className="text-sm text-gray-900 dark:text-white"> |
118 | 108 | {user.name || user.email || "User"} |
119 | 109 | </span> |
120 | 110 | <button |
121 | 111 | onClick={() => window.location.href = '/api/auth/logout'} |
122 | | - className="text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200 hidden sm:block" |
| 112 | + className="text-sm text-gray-500 hover:text-gray-700" |
123 | 113 | > |
124 | 114 | Sign out |
125 | 115 | </button> |
126 | | - <button |
127 | | - onClick={() => window.location.href = '/api/auth/logout'} |
128 | | - className="text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200 sm:hidden" |
129 | | - > |
130 | | - ← |
131 | | - </button> |
132 | 116 | </div> |
133 | 117 | ) : ( |
134 | | - <button |
135 | | - onClick={() => window.location.href = '/api/auth/login'} |
136 | | - className="backdrop-blur-xl bg-white/80 dark:bg-gray-900/80 border border-gray-200/50 dark:border-gray-700/50 px-3 sm:px-4 py-2 rounded-lg sm:rounded-xl text-xs sm:text-sm font-medium text-gray-900 dark:text-white hover:bg-white/90 dark:hover:bg-gray-800/90 transition-all duration-200" |
137 | | - > |
138 | | - Sign in |
139 | | - </button> |
| 118 | + <div className="bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 px-4 py-2 rounded-lg text-sm border"> |
| 119 | + Demo Mode - Auth Disabled |
| 120 | + </div> |
140 | 121 | )} |
141 | | - </motion.div> |
| 122 | + </div> |
142 | 123 | )); |
143 | 124 |
|
144 | 125 | AuthHeader.displayName = 'AuthHeader'; |
145 | 126 |
|
146 | 127 | /** |
147 | | - * Memoized loading state component |
| 128 | + * Simple loading state component |
148 | 129 | */ |
149 | 130 | const LoadingState = memo(() => ( |
150 | | - <div className="min-h-screen relative overflow-hidden bg-white dark:bg-black"> |
151 | | - <MinimalBackground /> |
152 | | - <div className="relative z-10 min-h-screen flex items-center justify-center"> |
153 | | - <motion.div |
154 | | - initial={{ opacity: 0, scale: 0.95 }} |
155 | | - animate={{ opacity: 1, scale: 1 }} |
156 | | - transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }} |
157 | | - className="text-center" |
158 | | - > |
159 | | - <div className="w-8 h-8 border-2 border-gray-300 dark:border-gray-600 border-t-blue-500 rounded-full animate-spin mx-auto mb-4" /> |
160 | | - <h2 className="text-xl font-medium text-gray-900 dark:text-white">Loading</h2> |
161 | | - </motion.div> |
| 131 | + <div className="min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center"> |
| 132 | + <div className="text-center"> |
| 133 | + <div className="w-8 h-8 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin mx-auto mb-4" /> |
| 134 | + <h2 className="text-xl text-gray-900 dark:text-white">Loading...</h2> |
162 | 135 | </div> |
163 | 136 | </div> |
164 | 137 | )); |
@@ -487,11 +460,11 @@ const OutputFormatSelector: React.FC<{ |
487 | 460 | }; |
488 | 461 |
|
489 | 462 | export default function HomePage() { |
490 | | - // Auth state |
491 | | - const { user, error: userError, isLoading: userLoading } = useUser(); |
492 | | - // const user = null; // Mock user for demo |
493 | | - // const userError: Error | null = null; |
494 | | - // const userLoading = false; |
| 463 | + // Auth state - temporarily disabled to fix authentication issues |
| 464 | + // const { user, error: userError, isLoading: userLoading } = useUser(); |
| 465 | + const user = null; // Mock user for demo |
| 466 | + const userError: Error | null = null; |
| 467 | + const userLoading = false; |
495 | 468 |
|
496 | 469 | // Form state |
497 | 470 | const [selectedFile, setSelectedFile] = useState<File | null>(null); |
|
0 commit comments