nextjs错误样式

"use client"

import { useEffect } from "react"
import { CloseCircleIcon ,Button} from "@imoo/ui-client"
import Link from "next/link"

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  useEffect(() => {
    console.error("error：", error)
  }, [error])

  return (
    <div className="min-h-screen bg-fills-2 flex items-center justify-center px-4">
      <div className="max-w-md w-full">
        <div className="text-center mb-8">
          <div className="flex justify-center mb-6">
            <CloseCircleIcon 
              className="w-20 h-20 fill-warn-100" 
            />
          </div>
          <h1 className="S3-2-B-32 text-word-black mb-4">
            The page encountered an error
          </h1>
          <p className="B3-2-M-16 text-word-3 leading-relaxed">
            Sorry, the page encountered an error
          </p>
        </div>

        {/* 错误信息卡片 */}
        <div className="bg-fills-1 rounded-large p-6 mb-8 border border-line-1 animate-fade-in-top" style={{ animationDelay: '0.1s' }}>
          <div className="flex items-start">
            <div className="flex-shrink-0 mr-3">
              <div className="w-2 h-2 bg-warn-100 rounded-full mt-2"></div>
            </div>
            <div className="flex-1">
              <h3 className="B3-1-B-14 text-word-black mb-2">Error Details</h3>
              <p className="B3-1-R-14 text-word-4 break-words">
                {error.message || "未知错误"}
              </p>
            </div>
          </div>
        </div>

        <div className="space-y-4">
          <Button
            className="w-full bg-vi-500 text-white rounded-[36px] 
                     h-12 B3-2-M-16 mb-2"
            onClick={() => reset()}
          >
            Try again
          </Button>
          
          <Link href="/">
            <button
              className="w-full bg-fills-1 hover:bg-fills-4 text-word-black 
                       border border-line-2 rounded-[36px] h-12 B3-2-M-16  active:scale-[0.1]"
            >
              Back to Home
            </button>
          </Link>
        </div>

        {/* 帮助信息 */}
        <div className="text-center mt-8">
          <p className="B3-R-12 text-word-5">
            If the problem persists, please contact our
            {/* <Link href="/contact" className="text-vi-500 hover:text-vi-700 ml-1 transition-colors duration-200">
              Customer Support
            </Link> */}
          </p>
        </div>
      </div>
    </div>
  )
}