60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { NavExternal } from "../../components/nav";
|
|
import HtmlComment from "../../components/html-comment";
|
|
import { profile, hobbies } from "../../lib/data";
|
|
|
|
export const metadata: Metadata = { title: "Hobi | Personal Website" };
|
|
|
|
export default function HobbiesPage() {
|
|
return (
|
|
<>
|
|
{/* halaman ini WAJIB external css saja: semua gaya ada di public/styles.css */}
|
|
<link rel="stylesheet" href="/styles.css" precedence="default" />
|
|
|
|
<header className="site-header">
|
|
<p className="brand">{profile.nickname}</p>
|
|
<NavExternal current="/hobbies" />
|
|
</header>
|
|
|
|
<main className="container">
|
|
<h1>Hobi Saya</h1>
|
|
<p>Tiga hal yang biasa saya lakukan di waktu luang.</p>
|
|
|
|
<HtmlComment text="tiap hobi dibuat sebagai section sendiri agar h2 dan h3 tetap berurutan" />
|
|
{hobbies.map((hobby) => (
|
|
<section className="hobby" key={hobby.title}>
|
|
<img src={hobby.photo} alt={hobby.alt} width="260" height="195" />
|
|
<div className="hobby-text">
|
|
<h2>{hobby.title}</h2>
|
|
<p>{hobby.description}</p>
|
|
<h3>Yang biasa saya lakukan</h3>
|
|
<ul>
|
|
{hobby.details.map((detail) => (
|
|
<li key={detail}>{detail}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
))}
|
|
|
|
<section className="panel">
|
|
<h2>Ingin mencoba juga?</h2>
|
|
<p>
|
|
Untuk pemula yang mau belajar ngegym silahkan{" "}
|
|
<a href="https://www.tiktok.com/@daddygeeeeee?is_from_webapp=1&sender_device=pc" target="_blank" rel="noopener noreferrer">
|
|
tonton dia ini
|
|
</a>
|
|
.
|
|
</p>
|
|
</section>
|
|
</main>
|
|
|
|
<footer className="site-footer">
|
|
<p>
|
|
© {profile.year} {profile.name}
|
|
</p>
|
|
</footer>
|
|
</>
|
|
);
|
|
}
|