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