1
import { Heart } from "lucide-react";
2
import { Link } from "react-router";
3
 
4
const footerLinkClass =
5
  "text-xs text-zinc-500 underline decoration-zinc-700 underline-offset-2 transition-colors hover:text-accent-400";
6
 
7
export const Footer = () => (
8
  <footer className="shrink-0 border-t border-zinc-800/60">
9
    <div className="mx-auto flex max-w-7xl flex-col items-center gap-2 px-4 py-3 text-center sm:flex-row sm:items-center sm:justify-between sm:gap-4 sm:px-6 sm:py-2 sm:text-left">
10
      <a
11
        href="https://limic.dev"
12
        target="_blank"
13
        rel="noopener noreferrer"
14
        className={`m-0 flex items-center gap-1 ${footerLinkClass}`}
15
      >
16
        Made with
17
        <Heart className="inline h-3 w-3 text-accent-500" aria-hidden="true" />
18
        on Cloudflare
19
      </a>
20
      <div className="flex items-center gap-4">
21
        <Link to="/privacy" className={footerLinkClass}>
22
          Privacy
23
        </Link>
24
        <Link to="/terms" className={footerLinkClass}>
25
          Terms
26
        </Link>
27
        <a
28
          href="https://git.limic.dev/rachel/tessera"
29
          target="_blank"
30
          rel="noopener noreferrer"
31
          className={footerLinkClass}
32
        >
33
          Source code
34
        </a>
35
      </div>
36
    </div>
37
  </footer>
38
);