github btn

Author: lazarusA

docs/next-js/app/page.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
-import LocalNetCDFMeta from "../components/loading/LocalNetCDFMeta";
-
+import LocalNetCDFMeta from "@/components/loading/LocalNetCDFMeta";
+import GithubButton from "@/components/loading/GitHubButton";
 export default function Home() {
   return (
     <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
@@ -19,6 +19,10 @@ export default function Home() {
           </span>
         </div>
         <LocalNetCDFMeta />
+
+        <div className="fixed top-2 right-4 z-50 flex items-center gap-2">
+          <GithubButton />
+        </div>
       </main>
     </div>
   );

docs/next-js/components/loading/GitHubButton.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { FaGithub } from "react-icons/fa";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+
+export default function GithubButton() {
+  return (
+    <Tooltip delayDuration={500}>
+      <TooltipTrigger asChild>
+        <Link href="https://github.com/EarthyScience/netcdf4-wasm" aria-label="github" target="_blank" rel="noopener noreferrer">
+          <Button variant="ghost" size="icon" className="cursor-pointer hover:scale-90 transition-transform duration-100 ease-out">
+            <FaGithub className="size-6"/>
+          </Button>
+        </Link>
+      </TooltipTrigger>
+      <TooltipContent side="bottom" align="start">
+        github
+      </TooltipContent>
+    </Tooltip>
+  );
+}

docs/next-js/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

docs/next-js/package.json

@@ -16,12 +16,14 @@
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.562.0",
     "next": "16.1.1",
     "react": "19.2.3",
     "react-dom": "19.2.3",
+    "react-icons": "^5.5.0",
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {