Detail

Copy"use client"
 
import Link from "next/link"
import { ArrowLeft, CircleAlert } from "lucide-react"
 
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
 
interface Props {
  data: AnnouncementDetailResult | null
  error?: string | null
  dictionary: Dictionary
  lang: Locale
}
 
export function AnnouncementDetail({ data, error, dictionary, lang }: Props) {
  const t = dictionary?.school?.announcements
 
  // 1. Error state first
  if (error || !data) {
    return (
      <div className="space-y-4">
        <Button variant="ghost" asChild>
          <Link href={`/${lang}/announcements`}>
            <ArrowLeft className="me-2 h-4 w-4" />
            {t.back}
          </Link>
        </Button>
        <Alert variant="destructive">
          <CircleAlert className="h-4 w-4" />
          <AlertTitle>{t.errorTitle}</AlertTitle>
          <AlertDescription>{error || t.notFound}</AlertDescription>
        </Alert>
      </div>
    )
  }
 
  // 2. Header + info grid + body
  return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Button variant="ghost" asChild>
          <Link href={`/${lang}/announcements`}>
            <ArrowLeft className="me-2 h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h2>{data.title}</h2>
          <Badge variant={data.published ? "default" : "secondary"}>
            {data.published ? t.published : t.draft}
          </Badge>
        </div>
      </div>
      <Card>
        <CardHeader><CardTitle>{t.title}</CardTitle></CardHeader>
        <CardContent><div className="prose max-w-none">{data.body}</div></CardContent>
      </Card>
    </div>
  )
}
 
// 3. Loading skeleton matching layout
export function Loading() {
  return (
    <div className="space-y-6">
      <Skeleton className="h-8 w-48" />
      <div className="grid gap-4 md:grid-cols-3">
        <Skeleton className="h-32" />
        <Skeleton className="h-32" />
        <Skeleton className="h-32" />
      </div>
      <Skeleton className="h-64" />
    </div>
  )
}

Copy1. Error state → Alert with back button
2. Header → Back button + title + status badge
3. Info cards → Grid of key metrics
4. Tabs → Sub-sections (overview, history, etc.)
5. Loading → Skeleton matching layout