aragrp/app/error.tsx

'use client'

import { useEffect } from 'react'
import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { type } from '@/lib/typography'
import { cn } from '@/lib/utils'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    console.error(error)
  }, [error])

  return (
    <div className="flex min-h-[60vh] flex-col items-center justify-center gap-6 px-4 text-center">
      <h2 className={cn(type.h3, "text-foreground")}>خطایی رخ داد</h2>
      <p className={cn(type["body-sm"], "max-w-md text-muted-foreground")}>
        لطفاً دوباره تلاش کنید یا به صفحه اصلی برگردید.
      </p>
      <div className="flex flex-wrap gap-3 justify-center">
        <Button onClick={() => reset()}>تلاش مجدد</Button>
        <Button asChild variant="outline">
          <Link href="/">صفحه اصلی</Link>
        </Button>
      </div>
    </div>
  )
}