|
1
|
import { useParams } from "wouter"; |
|
2
|
import { useQuery } from "@tanstack/react-query"; |
|
3
|
import Header from "@/components/layout/header"; |
|
4
|
import GuideDetailModal from "@/components/repair/guide-detail-modal"; |
|
5
|
import type { RepairGuide } from "@shared/schema"; |
|
6
|
|
|
7
|
export default function RepairGuide() { |
|
8
|
const { id } = useParams<{ id: string }>(); |
|
9
|
|
|
10
|
const { data: guide, isLoading, error } = useQuery<RepairGuide>({ |
|
11
|
queryKey: ["/api/repair-guides", id], |
|
12
|
enabled: !!id, |
|
13
|
}); |
|
14
|
|
|
15
|
if (isLoading) { |
|
16
|
return ( |
|
17
|
<div className="min-h-screen bg-gray-50"> |
|
18
|
<Header /> |
|
19
|
<div className="max-w-4xl mx-auto px-4 py-8"> |
|
20
|
<div className="bg-white rounded-xl shadow-material p-6 animate-pulse"> |
|
21
|
<div className="h-8 bg-gray-200 rounded w-3/4 mb-4"></div> |
|
22
|
<div className="h-4 bg-gray-200 rounded w-full mb-2"></div> |
|
23
|
<div className="h-4 bg-gray-200 rounded w-5/6 mb-6"></div> |
|
24
|
<div className="space-y-4"> |
|
25
|
{[...Array(3)].map((_, i) => ( |
|
26
|
<div key={i} className="h-24 bg-gray-200 rounded"></div> |
|
27
|
))} |
|
28
|
</div> |
|
29
|
</div> |
|
30
|
</div> |
|
31
|
</div> |
|
32
|
); |
|
33
|
} |
|
34
|
|
|
35
|
if (error || !guide) { |
|
36
|
return ( |
|
37
|
<div className="min-h-screen bg-gray-50"> |
|
38
|
<Header /> |
|
39
|
<div className="max-w-4xl mx-auto px-4 py-8"> |
|
40
|
<div className="bg-white rounded-xl shadow-material p-6 text-center"> |
|
41
|
<div className="text-gray-400 mb-4"> |
|
42
|
<i className="material-icons text-6xl">error_outline</i> |
|
43
|
</div> |
|
44
|
<h2 className="text-xl font-medium text-gray-900 mb-2">Guide Not Found</h2> |
|
45
|
<p className="text-gray-600">The repair guide you're looking for doesn't exist or has been removed.</p> |
|
46
|
</div> |
|
47
|
</div> |
|
48
|
</div> |
|
49
|
); |
|
50
|
} |
|
51
|
|
|
52
|
return ( |
|
53
|
<div className="min-h-screen bg-gray-50"> |
|
54
|
<Header /> |
|
55
|
<GuideDetailModal |
|
56
|
guideId={guide.id} |
|
57
|
onClose={() => window.history.back()} |
|
58
|
isPage={true} |
|
59
|
/> |
|
60
|
</div> |
|
61
|
); |
|
62
|
} |