|
1
|
import { useQuery } from "@tanstack/react-query"; |
|
2
|
|
|
3
|
interface VersionInfo { |
|
4
|
version: string; |
|
5
|
name: string; |
|
6
|
build: string; |
|
7
|
release: string; |
|
8
|
} |
|
9
|
|
|
10
|
export default function Footer() { |
|
11
|
const { data: versionInfo } = useQuery<VersionInfo>({ |
|
12
|
queryKey: ["/api/version"], |
|
13
|
retry: false, |
|
14
|
}); |
|
15
|
|
|
16
|
return ( |
|
17
|
<footer className="bg-white dark:bg-gray-800 amoled:bg-black border-t border-gray-200 dark:border-gray-700 amoled:border-gray-800 mt-auto"> |
|
18
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> |
|
19
|
<div className="flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0"> |
|
20
|
{/* Left side - Branding */} |
|
21
|
<div className="flex items-center space-x-2"> |
|
22
|
<i className="material-icons text-primary-700 text-xl">build</i> |
|
23
|
<div> |
|
24
|
<h3 className="text-sm font-medium text-gray-900 dark:text-white amoled:text-white"> |
|
25
|
JCRGuru |
|
26
|
</h3> |
|
27
|
<p className="text-xs text-gray-500 dark:text-gray-400"> |
|
28
|
Professional repair guides for everyone |
|
29
|
</p> |
|
30
|
</div> |
|
31
|
</div> |
|
32
|
|
|
33
|
{/* Center - Quick Links */} |
|
34
|
<div className="flex items-center space-x-6 text-sm"> |
|
35
|
<a |
|
36
|
href="/troubleshooting" |
|
37
|
className="text-gray-600 dark:text-gray-300 hover:text-primary-700 dark:hover:text-primary-400 transition-colors" |
|
38
|
> |
|
39
|
Help |
|
40
|
</a> |
|
41
|
<a |
|
42
|
href="/software-tools" |
|
43
|
className="text-gray-600 dark:text-gray-300 hover:text-primary-700 dark:hover:text-primary-400 transition-colors" |
|
44
|
> |
|
45
|
Tools |
|
46
|
</a> |
|
47
|
<a |
|
48
|
href="/create-guide" |
|
49
|
className="text-gray-600 dark:text-gray-300 hover:text-primary-700 dark:hover:text-primary-400 transition-colors" |
|
50
|
> |
|
51
|
Contribute |
|
52
|
</a> |
|
53
|
<a |
|
54
|
href="mailto:JCRguideproofficial@gmail.com" |
|
55
|
className="text-gray-600 dark:text-gray-300 hover:text-primary-700 dark:hover:text-primary-400 transition-colors" |
|
56
|
> |
|
57
|
Contact |
|
58
|
</a> |
|
59
|
</div> |
|
60
|
|
|
61
|
{/* Right side - Version Info */} |
|
62
|
<div className="text-center md:text-right"> |
|
63
|
{versionInfo && ( |
|
64
|
<div className="text-xs text-gray-500 dark:text-gray-400"> |
|
65
|
<div>Version {versionInfo.version}</div> |
|
66
|
<div>Build {versionInfo.build}</div> |
|
67
|
</div> |
|
68
|
)} |
|
69
|
<div className="text-xs text-gray-400 dark:text-gray-500 mt-1"> |
|
70
|
© 2025 JCRGuru |
|
71
|
</div> |
|
72
|
</div> |
|
73
|
</div> |
|
74
|
</div> |
|
75
|
</footer> |
|
76
|
); |
|
77
|
} |