57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { NavExternal } from "../../components/nav";
|
|
import HtmlComment from "../../components/html-comment";
|
|
import { profile, contacts } from "../../lib/data";
|
|
|
|
export const metadata: Metadata = { title: "Kontak | Personal Website" };
|
|
|
|
export default function ContactPage() {
|
|
return (
|
|
<>
|
|
{/* pilihan css: external. alasannya, halaman ini memakai ulang kelas panel, container, dan nav
|
|
yang sudah ada di styles.css. inline akan mengulang gaya, tailwind butuh script cdn tambahan
|
|
padahal halaman ini sederhana dan tidak perlu komponen khusus */}
|
|
<link rel="stylesheet" href="/styles.css" precedence="default" />
|
|
<HtmlComment text="contact.html memakai external css karena gayanya sama dengan halaman lain dan cukup satu stylesheet bersama" />
|
|
|
|
<header className="site-header">
|
|
<p className="brand">{profile.nickname}</p>
|
|
<NavExternal current="/contact" />
|
|
</header>
|
|
|
|
<main className="container">
|
|
<h1>Kontak</h1>
|
|
|
|
<section className="panel">
|
|
<h2>Hubungi saya</h2>
|
|
<p>Silakan hubungi saya lewat salah satu kanal berikut. Tidak ada formulir, langsung saja kirim pesan.</p>
|
|
<ul className="contact-list">
|
|
{contacts.map((item) => (
|
|
<li key={item.label}>
|
|
<span className="contact-label">{item.label}</span>
|
|
<a
|
|
href={item.href}
|
|
{...(item.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
|
|
>
|
|
{item.text}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
|
|
<section className="panel">
|
|
<h2>Lokasi</h2>
|
|
<p>Saya berdomisili di {profile.city} dan kuliah di Universitas Katolik Widya Mandala Surabaya.</p>
|
|
</section>
|
|
</main>
|
|
|
|
<footer className="site-footer">
|
|
<p>
|
|
© {profile.year} {profile.name}
|
|
</p>
|
|
</footer>
|
|
</>
|
|
);
|
|
}
|