|
1
|
import { useParams, useLocation } from "wouter"; |
|
2
|
import { useQuery } from "@tanstack/react-query"; |
|
3
|
import GuideDetailModal from "@/components/repair/guide-detail-modal"; |
|
4
|
import { Button } from "@/components/ui/button"; |
|
5
|
import { AlertCircle, ArrowLeft } from "lucide-react"; |
|
6
|
import type { RepairGuide } from "@shared/schema"; |
|
7
|
|
|
8
|
export default function RepairGuide() { |
|
9
|
const { id } = useParams<{ id: string }>(); |
|
10
|
const [, setLocation] = useLocation(); |
|
11
|
|
|
12
|
const { data: guide, isLoading, error } = useQuery<RepairGuide>({ |
|
13
|
queryKey: ["/api/repair-guides", id], |
|
14
|
enabled: !!id, |
|
15
|
}); |
|
16
|
|
|
17
|
if (isLoading) { |
|
18
|
return ( |
|
19
|
<div className="max-w-4xl mx-auto px-4 py-8"> |
|
20
|
<div className="bg-card/50 border border-border/50 rounded-3xl p-8 animate-pulse space-y-4"> |
|
21
|
<div className="h-8 bg-muted rounded-xl w-3/4 mb-4"></div> |
|
22
|
<div className="h-4 bg-muted rounded-lg w-full mb-2"></div> |
|
23
|
<div className="h-4 bg-muted rounded-lg w-5/6 mb-6"></div> |
|
24
|
<div className="space-y-4"> |
|
25
|
{[...Array(3)].map((_, i) => ( |
|
26
|
<div key={i} className="h-28 bg-muted rounded-2xl"></div> |
|
27
|
))} |
|
28
|
</div> |
|
29
|
</div> |
|
30
|
</div> |
|
31
|
); |
|
32
|
} |
|
33
|
|
|
34
|
if (error || !guide) { |
|
35
|
return ( |
|
36
|
<div className="max-w-4xl mx-auto px-4 py-12"> |
|
37
|
<div className="bg-card/50 border border-border/50 rounded-3xl p-8 text-center space-y-4"> |
|
38
|
<div className="mx-auto h-16 w-16 rounded-2xl bg-destructive/10 text-destructive flex items-center justify-center"> |
|
39
|
<AlertCircle className="h-8 w-8" /> |
|
40
|
</div> |
|
41
|
<h2 className="text-2xl font-bold tracking-tight">Guide Not Found</h2> |
|
42
|
<p className="text-muted-foreground max-w-md mx-auto"> |
|
43
|
The repair guide you're looking for doesn't exist or has been removed. |
|
44
|
</p> |
|
45
|
<Button onClick={() => setLocation("/")} className="rounded-full gap-2"> |
|
46
|
<ArrowLeft className="h-4 w-4" /> Back to Guides |
|
47
|
</Button> |
|
48
|
</div> |
|
49
|
</div> |
|
50
|
); |
|
51
|
} |
|
52
|
|
|
53
|
return ( |
|
54
|
<div className="max-w-4xl mx-auto px-4 py-8"> |
|
55
|
<GuideDetailModal |
|
56
|
guideId={guide.id} |
|
57
|
onClose={() => setLocation("/")} |
|
58
|
isPage={true} |
|
59
|
/> |
|
60
|
</div> |
|
61
|
); |
|
62
|
} |