62 lines
2.5 KiB
TypeScript
62 lines
2.5 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import { contacts } from "@/data/contacts";
|
|
import Header from "@/components/header";
|
|
import Footer from "@/components/footer";
|
|
|
|
interface Contact {
|
|
name: string;
|
|
describe: string;
|
|
email?: string;
|
|
phone?: string;
|
|
qq?: string;
|
|
}
|
|
|
|
export default function Page() {
|
|
const [modalContent, setModalContent] = useState<Contact | null>(null);
|
|
|
|
const handleModal = (contact: Contact) => {
|
|
setModalContent(contact);
|
|
};
|
|
|
|
const closeModal = () => {
|
|
setModalContent(null);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col bg-gray-100">
|
|
<Header />
|
|
<main className="container mx-auto p-4 flex-grow">
|
|
<section className="text-center mb-12">
|
|
<h2 className="text-4xl font-extrabold text-gray-900">联系</h2>
|
|
<p className="text-xl text-gray-600 mt-4">以下是主要负责人的联系信息，可以点击卡片查看全部联系方式。</p>
|
|
</section>
|
|
<section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{contacts.map((contact, index) => (
|
|
<div key={index} onClick={() => handleModal(contact)} className="bg-gray-50 shadow rounded-2xl p-6 text-center hover:shadow-lg transition-shadow duration-300 cursor-pointer">
|
|
<h3 className="text-xl font-semibold text-gray-900">{contact.name}</h3>
|
|
<p className="text-gray-600">{contact.describe}</p>
|
|
</div>
|
|
))}
|
|
</section>
|
|
</main>
|
|
<Footer />
|
|
<div className={`fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 transition-opacity duration-300 ${modalContent ? "opacity-100" : "opacity-0 pointer-events-none"}`} onClick={closeModal}>
|
|
{modalContent && (
|
|
<div className={`bg-white p-6 rounded-lg shadow-lg transform transition-transform duration-300 ${modalContent ? "scale-100" : "scale-90"}`} onClick={(e) => e.stopPropagation()}>
|
|
<h3 className="text-xl font-semibold text-gray-900">{modalContent.name}</h3>
|
|
<p className="text-gray-600 ">{modalContent.describe}</p>
|
|
<br></br>
|
|
{modalContent.email && <p>Email: {modalContent.email}</p>}
|
|
{modalContent.phone && <p>Phone: {modalContent.phone}</p>}
|
|
{modalContent.qq && <p>QQ: {modalContent.qq}</p>}
|
|
<button onClick={closeModal} className="mt-4 text-blue-600 hover:underline">
|
|
关闭
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|