Leaflet Blog in Deno Fresh
knotbin.com
1import {
2 siBluesky as BlueskyIcon,
3 siGithub as GithubIcon,
4} from "npm:simple-icons";
5import { useState } from "preact/hooks";
6import { env } from "../lib/env.ts";
7
8export function Footer() {
9 const [blueskyHovered, setBlueskyHovered] = useState(false);
10 const [githubHovered, setGithubHovered] = useState(false);
11
12 return (
13 <footer class="py-8 flex gap-6 flex-wrap items-center justify-center text-sm">
14 <a
15 class="flex items-center gap-2 relative group"
16 href={`https://bsky.app/profile/${env.NEXT_PUBLIC_BSKY_DID}`}
17 target="_blank"
18 rel="noopener noreferrer"
19 data-hovered={blueskyHovered}
20 onMouseEnter={() => setBlueskyHovered(true)}
21 onMouseLeave={() => setBlueskyHovered(false)}
22 >
23 <svg
24 width={16}
25 height={16}
26 viewBox="0 0 24 24"
27 class="fill-black dark:fill-white"
28 >
29 <path d={BlueskyIcon.path} />
30 </svg>
31 <span class="opacity-50 group-hover:opacity-100 transition-opacity">
32 Bluesky
33 </span>
34 <div class="absolute bottom-0 left-0 w-full h-px bg-current scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out group-hover:origin-left group-data-[hovered=false]:origin-right" />
35 </a>
36 <a
37 class="flex items-center gap-2 relative group"
38 href="https://github.com/knotbin"
39 target="_blank"
40 rel="noopener noreferrer"
41 data-hovered={githubHovered}
42 onMouseEnter={() => setGithubHovered(true)}
43 onMouseLeave={() => setGithubHovered(false)}
44 >
45 <svg
46 width={16}
47 height={16}
48 viewBox="0 0 24 24"
49 class="fill-black dark:fill-white"
50 >
51 <path d={GithubIcon.path} />
52 </svg>
53 <span class="opacity-50 group-hover:opacity-100 transition-opacity">
54 GitHub
55 </span>
56 <div class="absolute bottom-0 left-0 w-full h-px bg-current scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out group-hover:origin-left group-data-[hovered=false]:origin-right" />
57 </a>
58 </footer>
59 );
60}