fix(frontend): wrap catalog, disease detail, and expert reviews with MainLayout
- Add MainLayout wrapper to /catalog, /catalog/:slug, and /expert/reviews routes in app.tsx so they share the same navbar and footer as dashboard - Remove duplicate header/layout/spacing from CatalogPage, DiseaseDetailPage, and ExpertReviewsPage - Update ExpertReviewsPage to use consistent space-y layout pattern matching other pages - Update CatalogPage to remove outer main wrapper since MainLayout provides the container Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Asep Haryana Saputra
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
4d6ca4912c
commit
81d083a2b8
@@ -1,7 +1,7 @@
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { isDiseaseSlug } from '@zeavis/shared';
|
||||
import { ArrowLeft, BookOpen, AlertCircle } from 'lucide-react';
|
||||
import { ArrowLeft, AlertCircle, BookOpen } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { RiskBadge } from '@/components/risk-badge';
|
||||
@@ -20,37 +20,37 @@ export function DiseaseDetailPage() {
|
||||
|
||||
if (!validatedSlug || error || (!isLoading && !disease)) {
|
||||
return (
|
||||
<main className="min-h-screen px-6 py-8">
|
||||
<div className="mx-auto max-w-4xl">
|
||||
<Button asChild variant="ghost" className="mb-8">
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button asChild variant="ghost">
|
||||
<Link to="/catalog">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Kembali ke Katalog
|
||||
</Link>
|
||||
</Button>
|
||||
<Card className="p-8 text-center">
|
||||
<p className="text-muted-foreground">Materi tidak ditemukan</p>
|
||||
</Card>
|
||||
</div>
|
||||
</main>
|
||||
<Card className="p-8 text-center">
|
||||
<p className="text-muted-foreground">Materi tidak ditemukan</p>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<main className="min-h-screen px-6 py-8">
|
||||
<div className="mx-auto max-w-4xl">
|
||||
<Button asChild variant="ghost" className="mb-8">
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button asChild variant="ghost">
|
||||
<Link to="/catalog">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Kembali ke Katalog
|
||||
</Link>
|
||||
</Button>
|
||||
<Card className="p-8 text-center">
|
||||
<p className="text-muted-foreground">Memuat materi...</p>
|
||||
</Card>
|
||||
</div>
|
||||
</main>
|
||||
<Card className="p-8 text-center">
|
||||
<p className="text-muted-foreground">Memuat materi...</p>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -59,88 +59,86 @@ export function DiseaseDetailPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-screen px-6 py-8">
|
||||
<div className="mx-auto max-w-4xl space-y-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<Button asChild variant="ghost">
|
||||
<Link to="/catalog">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Kembali ke Katalog
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline">
|
||||
<Link to="/dashboard">
|
||||
<BookOpen className="mr-2 h-4 w-4" />
|
||||
Dashboard
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold tracking-tight">{disease.commonName}</h1>
|
||||
<p className="mt-2 text-lg text-muted-foreground">{disease.label}</p>
|
||||
</div>
|
||||
<RiskBadge level={disease.riskLevel} />
|
||||
</div>
|
||||
<p className="text-lg leading-relaxed">{disease.summary}</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Deskripsi</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="leading-relaxed text-muted-foreground">{disease.description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Gejala</CardTitle>
|
||||
<CardDescription>Tanda-tanda yang perlu diperhatikan</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-3">
|
||||
{disease.symptoms.map((symptom, index) => (
|
||||
<li key={index} className="flex gap-3">
|
||||
<AlertCircle className="h-5 w-5 flex-shrink-0 text-primary mt-0.5" />
|
||||
<span className="text-muted-foreground">{symptom}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Rekomendasi Penanganan</CardTitle>
|
||||
<CardDescription>Langkah-langkah untuk mengendalikan penyakit</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ol className="space-y-3">
|
||||
{disease.recommendations.map((recommendation, index) => (
|
||||
<li key={index} className="flex gap-3">
|
||||
<span className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground">
|
||||
{index + 1}
|
||||
</span>
|
||||
<span className="text-muted-foreground pt-0.5">{recommendation}</span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="flex gap-3 pt-4">
|
||||
<Button asChild className="flex-1">
|
||||
<Link to="/catalog">Lihat Katalog Lengkap</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" className="flex-1">
|
||||
<Link to="/dashboard">Kembali ke Dashboard</Link>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<Button asChild variant="ghost">
|
||||
<Link to="/catalog">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Kembali ke Katalog
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline">
|
||||
<Link to="/dashboard">
|
||||
<BookOpen className="mr-2 h-4 w-4" />
|
||||
Dashboard
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold tracking-tight">{disease.commonName}</h1>
|
||||
<p className="mt-2 text-lg text-muted-foreground">{disease.label}</p>
|
||||
</div>
|
||||
<RiskBadge level={disease.riskLevel} />
|
||||
</div>
|
||||
<p className="text-lg leading-relaxed">{disease.summary}</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Deskripsi</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="leading-relaxed text-muted-foreground">{disease.description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Gejala</CardTitle>
|
||||
<CardDescription>Tanda-tanda yang perlu diperhatikan</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-3">
|
||||
{disease.symptoms.map((symptom, index) => (
|
||||
<li key={index} className="flex gap-3">
|
||||
<AlertCircle className="h-5 w-5 flex-shrink-0 text-primary mt-0.5" />
|
||||
<span className="text-muted-foreground">{symptom}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Rekomendasi Penanganan</CardTitle>
|
||||
<CardDescription>Langkah-langkah untuk mengendalikan penyakit</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ol className="space-y-3">
|
||||
{disease.recommendations.map((recommendation, index) => (
|
||||
<li key={index} className="flex gap-3">
|
||||
<span className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground">
|
||||
{index + 1}
|
||||
</span>
|
||||
<span className="text-muted-foreground pt-0.5">{recommendation}</span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="flex gap-3 pt-4">
|
||||
<Button asChild className="flex-1">
|
||||
<Link to="/catalog">Lihat Katalog Lengkap</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" className="flex-1">
|
||||
<Link to="/dashboard">Kembali ke Dashboard</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user