Function Footer

Source

export function Footer() {
  const handleOpenExternal = (url: string) => (e: React.MouseEvent) => {
    e.preventDefault();
    if (globalThis.electronAPI?.shell?.openExternal) {
      globalThis.electronAPI.shell.openExternal(url);
    } else {
      // Fallback to regular link behavior if not in Electron
      globalThis.open(url, "_blank", "noopener,noreferrer");
    }
  };

  return (
    <TooltipProvider>
      <footer className="border-border bg-background/80 relative border-t px-4 py-6 text-xs backdrop-blur-xl">
        <div className="pointer-events-none absolute inset-x-0 top-[-120px] h-60 w-full bg-gradient-to-b from-blue-500/10 via-purple-500/10 to-transparent blur-3xl" />
        <div className="relative z-[1] container 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 tracking-[0.4em] uppercase">
                Sync tool
              </span>
              <div className="flex items-center gap-2 text-sm font-semibold">
                <span className="bg-gradient-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 tracking-[0.3em] uppercase">
                    <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