Function Footer

Source

export function Footer() {
  /**
   * Creates a click handler that opens an external URL using Electron shell API or fallback to window.open.
   * @param url - The URL to open externally.
   * @returns A React click event handler function.
   * @source
   */
  const handleOpenExternal = (url: string) => async (e: React.MouseEvent) => {
    e.preventDefault();
    const result = await openExternalSafe(url);
    if (!result.success) {
      console.error("[Footer] Failed to open external URL:", result.error);
    }
  };

  return (
    <TooltipProvider>
      <footer className="border-border bg-background/80 relative border-t px-4 py-6 text-xs backdrop-blur-xl">
        <div className="bg-linear-to-b pointer-events-none absolute inset-x-0 top-[-120px] h-60 w-full from-blue-500/10 via-purple-500/10 to-transparent blur-3xl" />
        <div className="z-1 container relative mx-auto flex flex-col items-center justify-between gap-6 md:flex-row">
          <div className="flex items-center gap-3">
            <motion.div
              className="h-8 w-8"
              whileHover={{ rotate: 6, scale: 1.05 }}
            >
              <img src={appIcon} alt="K2A Logo" className="h-8 w-8" />
            </motion.div>
            <div className="flex flex-col gap-1">
              <span className="text-muted-foreground text-xs uppercase tracking-[0.4em]">
                Sync tool
              </span>
              <div className="flex items-center gap-2 text-sm font-semibold">
                <span className="bg-linear-to-r from-blue-500 via-purple-500 to-fuchsia-500 bg-clip-text text-transparent">
                  Kenmei → AniList
                </span>
                <Badge
                  variant="outline"
                  className="rounded-full border-white/40 bg-white/70 px-2 py-0.5 font-mono text-[0.65rem] tracking-widest shadow-sm backdrop-blur dark:border-white/10 dark:bg-slate-900/80"
                >
                  v{getAppVersion()}
                </Badge>
              </div>
            </div>
          </div>

          <div className="flex flex-col items-center gap-4 md:flex-row md:items-end">
            <Tooltip>
              <TooltipTrigger asChild>
                <Button
                  variant="ghost"
                  className="text-muted-foreground hover:text-foreground inline-flex items-center gap-3 rounded-full border border-white/20 bg-white/60 px-4 py-2 shadow-sm backdrop-blur dark:border-white/10 dark:bg-slate-900/60"
                  onClick={handleOpenExternal(
                    "https://github.com/RLAlpha49/KenmeiToAnilist",
                  )}
                >
                  <span className="flex items-center gap-2 text-[0.65rem] font-semibold uppercase tracking-[0.3em]">
                    <GitHubIcon className="h-4 w-4" />
                    <GitBranch className="h-3 w-3" />
                    Open source
                  </span>
                  <span className="sr-only">GitHub repository</span>
                </Button>
              </TooltipTrigger>
              <TooltipContent side="top">
                View source code on GitHub
              </TooltipContent>
            </Tooltip>

            <Separator orientation="horizontal" className="md:hidden" />

            <div className="text-muted-foreground flex items-center gap-4">
              <motion.div
                className="flex items-center gap-2"
                whileHover={{ scale: 1.05 }}
              >
                <span>Crafted with</span>
                <Heart className="h-3 w-3 fill-red-500 text-red-500" />
                <span>for manga readers</span>
              </motion.div>
              <span className="text-muted-foreground">
                © {new Date().getFullYear()}
              </span>
            </div>
          </div>
        </div>
      </footer>
    </TooltipProvider>
  );
}
Copy