package main

templ head() {
	<head>
		<title>jolheiser</title>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<link rel="shortcut icon" href="https://www.gravatar.com/avatar/7f4dd86f017ff289cf05a013e22357ef253d1ed6a52bdefca8f965af1080a965?s=16"/>
		<meta name="author" content="jolheiser"/>
		<link rel="stylesheet" href="styles.css"/>
	</head>
}

func fill(hex string) string {
	return "#" + hex
}

templ body(links []Link) {
	<body class="latte dark:mocha bg-base">
		<header class="relative w-full pt-16 pb-10">
			<img class="mx-auto rounded-full" alt="avatar" src="https://www.gravatar.com/avatar/7f4dd86f017ff289cf05a013e22357ef253d1ed6a52bdefca8f965af1080a965?s=125"/>
			<p class="mt-2 text-xl text-center text-lavender">{ `@` }jolheiser</p>
		</header>
		<nav class="relative max-w-screen-sm mx-auto">
			for _, link := range links {
				<a class="flex relative px-3 py-2 my-6 h-16 text-lg items-center justify-center text-text bg-surface0 cursor-pointer rounded border-solid border-2 border-overlay0 hover:bg-surface2 hover:border-lavender hover:text-blue transition" href={ templ.SafeURL(link.URL) } rel="me noopener noreferrer" title={ link.Name } target="_blank"><svg class="absolute left-5 w-10 h-10" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>{ link.Icon().Title }</title><path fill={ fill(link.Icon().Hex) } d={ link.Icon().Path }></path></svg><span>{ link.Name }</span></a>
			}
		</nav>
	</body>
}

templ index(links []Link) {
	@head()
	@body(links)
}

