Skip to content

Commit 6d9aaa7

Browse files
nikohoffrennikohoffren
committed
feat: create loading page while user is redirected to home page after logging in with Clerk
1 parent 128a6e0 commit 6d9aaa7

5 files changed

Lines changed: 228 additions & 74 deletions

File tree

‎components/LoadingPage.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { motion } from 'framer-motion'
2+
import { useEffect } from 'react'
3+
import { useRouter } from 'next/router'
4+
5+
const LoadingPage = () => {
6+
const router = useRouter()
7+
8+
useEffect(() => {
9+
//* Redirect to home page after 2 seconds
10+
const timeout = setTimeout(() => {
11+
router.push('/')
12+
}, 3000)
13+
14+
return () => clearTimeout(timeout)
15+
}, [router])
16+
17+
return (
18+
<div className="min-h-screen bg-primary flex flex-col items-center justify-center">
19+
<motion.div
20+
initial={{ opacity: 0, y: 20 }}
21+
animate={{ opacity: 1, y: 0 }}
22+
transition={{ duration: 0.5 }}
23+
className="text-center"
24+
>
25+
<motion.div
26+
animate={{
27+
scale: [1, 1.2, 1],
28+
}}
29+
transition={{
30+
duration: 1.5,
31+
repeat: Infinity,
32+
ease: "easeInOut"
33+
}}
34+
className="mb-8"
35+
>
36+
<img
37+
src="/fork-commit-merge-logo.jpg"
38+
alt="FCM Logo"
39+
className="w-24 h-24 mx-auto"
40+
/>
41+
</motion.div>
42+
43+
<motion.h1
44+
initial={{ opacity: 0 }}
45+
animate={{ opacity: 1 }}
46+
transition={{ delay: 0.3 }}
47+
className="text-4xl font-bold mb-4 text-modern-purple"
48+
>
49+
Welcome to Fork, Commit, Merge
50+
</motion.h1>
51+
52+
<motion.div
53+
initial={{ opacity: 0 }}
54+
animate={{ opacity: 1 }}
55+
transition={{ delay: 0.5 }}
56+
className="flex justify-center items-center space-x-2"
57+
>
58+
<div className="w-2 h-2 bg-modern-purple rounded-full animate-bounce" style={{ animationDelay: '0s' }} />
59+
<div className="w-2 h-2 bg-modern-purple rounded-full animate-bounce" style={{ animationDelay: '0.2s' }} />
60+
<div className="w-2 h-2 bg-modern-purple rounded-full animate-bounce" style={{ animationDelay: '0.4s' }} />
61+
</motion.div>
62+
63+
<motion.p
64+
initial={{ opacity: 0 }}
65+
animate={{ opacity: 1 }}
66+
transition={{ delay: 0.7 }}
67+
className="mt-4 text-gray-600 dark:text-gray-400"
68+
>
69+
Redirecting you to the homepage...
70+
</motion.p>
71+
</motion.div>
72+
</div>
73+
)
74+
}
75+
76+
export default LoadingPage

‎pages/ai.tsx‎

Lines changed: 72 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,92 @@
1+
import { motion } from 'framer-motion'
12
import AIContent from '../components/ai/AIContent'
23

4+
const container = {
5+
hidden: { opacity: 0 },
6+
show: {
7+
opacity: 1,
8+
transition: {
9+
staggerChildren: 0.1
10+
}
11+
}
12+
}
13+
14+
const item = {
15+
hidden: { opacity: 0, y: 20 },
16+
show: { opacity: 1, y: 0 }
17+
}
18+
319
export default function AI() {
420
return (
521
<div className='bg-white'>
622
<div className='modern-container'>
723
<div className='py-16 sm:py-24'>
8-
<div className='text-center'>
24+
<motion.div
25+
initial={{ opacity: 0, y: 20 }}
26+
animate={{ opacity: 1, y: 0 }}
27+
className='text-center'
28+
>
929
<h1 className='text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl'>
1030
AI Development <span className='text-modern-purple'>Tools</span>
1131
</h1>
1232
<p className='mx-auto mt-6 max-w-2xl text-lg text-gray-600'>
1333
Discover powerful AI tools and best practices to enhance your development workflow.
1434
</p>
15-
</div>
35+
</motion.div>
1636

17-
<div className='mt-16 flex justify-center'>
18-
<AIContent />
19-
</div>
37+
<motion.div
38+
variants={container}
39+
initial="hidden"
40+
animate="show"
41+
className='mt-16 flex justify-center'
42+
>
43+
<motion.div variants={item} className='w-full max-w-4xl'>
44+
<AIContent />
45+
</motion.div>
46+
</motion.div>
2047

21-
<div className='mt-16 rounded-lg bg-gray-50 p-8 shadow-sm'>
22-
<h2 className='mb-6 text-2xl font-bold text-gray-900'>Best Practices for Using AI Tools</h2>
23-
<ul className='grid gap-4 text-gray-600 sm:grid-cols-2'>
24-
<li className='flex items-start'>
25-
<svg className="h-6 w-6 mr-2 text-modern-purple flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
26-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
27-
</svg>
28-
Always review and understand AI-generated code
29-
</li>
30-
<li className='flex items-start'>
31-
<svg className="h-6 w-6 mr-2 text-modern-purple flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
32-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
33-
</svg>
34-
Use AI tools as assistants, not replacements
35-
</li>
36-
<li className='flex items-start'>
37-
<svg className="h-6 w-6 mr-2 text-modern-purple flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
38-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
39-
</svg>
40-
Keep security in mind when sharing code
41-
</li>
42-
<li className='flex items-start'>
43-
<svg className="h-6 w-6 mr-2 text-modern-purple flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
44-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
45-
</svg>
46-
Verify licenses and terms of use
47-
</li>
48-
</ul>
49-
</div>
48+
<motion.div
49+
variants={container}
50+
initial="hidden"
51+
animate="show"
52+
className='mt-16 flex justify-center'
53+
>
54+
<motion.div variants={item} className='w-full max-w-4xl'>
55+
<div className='rounded-lg bg-gray-50 p-8 shadow-sm'>
56+
<h2 className='mb-6 text-2xl font-bold text-gray-900'>Best Practices for Using AI Tools</h2>
57+
<ul className='grid gap-4 text-gray-600 sm:grid-cols-2'>
58+
<li className='flex items-start'>
59+
<svg className="h-6 w-6 mr-2 text-modern-purple flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
60+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
61+
</svg>
62+
Always review and understand AI-generated code
63+
</li>
64+
<li className='flex items-start'>
65+
<svg className="h-6 w-6 mr-2 text-modern-purple flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
66+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
67+
</svg>
68+
Test AI suggestions thoroughly before implementation
69+
</li>
70+
<li className='flex items-start'>
71+
<svg className="h-6 w-6 mr-2 text-modern-purple flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
72+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
73+
</svg>
74+
Use AI as a learning tool, not just a code generator
75+
</li>
76+
<li className='flex items-start'>
77+
<svg className="h-6 w-6 mr-2 text-modern-purple flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
78+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
79+
</svg>
80+
Keep security and privacy in mind when sharing code
81+
</li>
82+
</ul>
83+
</div>
84+
</motion.div>
85+
</motion.div>
5086
</div>
5187
</div>
5288
</div>
5389
)
5490
}
91+
92+

‎pages/dashboard.tsx‎

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,24 @@
1-
import Dashboard from '../components/Dashboard'
1+
import { useUser } from '@clerk/nextjs'
2+
import { useRouter } from 'next/router'
3+
import { useEffect } from 'react'
4+
import LoadingPage from '../components/LoadingPage'
25

36
export default function DashboardPage() {
4-
return (
5-
<div className='bg-primary min-h-screen'>
6-
<div
7-
className='page-header-background'
8-
style={{
9-
backgroundImage: "url('/fcm-background-image.png')",
10-
backgroundPosition: 'center',
11-
backgroundSize: 'cover'
12-
}}
13-
>
14-
<div className='page-header-content'>
15-
<h1 className='mb-6 text-center text-4xl font-bold'>Dashboard</h1>
16-
</div>
17-
</div>
18-
<div className='bg-primary min-h-screen'>
19-
<Dashboard />
20-
</div>
21-
</div>
22-
)
23-
}
7+
const { isLoaded, isSignedIn } = useUser()
8+
const router = useRouter()
249

10+
// If not loaded yet, show loading page
11+
if (!isLoaded) {
12+
return <LoadingPage />
13+
}
2514

15+
// If user is not signed in, redirect to sign-in
16+
if (!isSignedIn) {
17+
router.push('/sign-in')
18+
return null
19+
}
2620

21+
// If user is signed in, show loading page (which will redirect to home)
22+
return <LoadingPage />
23+
}
2724

‎pages/faq.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ const faqs: FAQItem[] = [
3333
answer: 'Always follow the project\'s contribution guidelines. Create a new branch for each feature or fix, keep your code clean, and make your commit messages descriptive.',
3434
category: 'Best Practices'
3535
},
36-
// Add all other FAQ items here...
3736
]
3837

3938
const categories = Array.from(new Set(faqs.map(faq => faq.category)))

0 commit comments

Comments
 (0)