added animated links with icons.pqoqubbw.dev

package.json

@@ -13,10 +13,12 @@
   "dependencies": {
     "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.8",
     "@tailwindcss/vite": "^4.0.12",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.479.0",
+    "motion": "^12.5.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwind-merge": "^3.0.2",

src/App.tsx

@@ -11,6 +11,7 @@ import {
 } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { GitSocialLink, SelfSocialLink } from "@/components/social-links";
 import "@/App.css";
 const uri =
   "https://login.microsoft.com/{tenant}/.well-known/openid-configuration";

src/components/social-links.tsx

@@ -0,0 +1,42 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Button } from "@/components/ui/button";
+import { TerminalIcon } from "@/components/ui/terminal";
+import { GitCommitVerticalIcon } from "@/components/ui/git-commit-vertical";
+
+export const SelfSocialLink = () => (
+  <Tooltip>
+    <TooltipTrigger>
+      <Button variant="link" asChild>
+        <TerminalIcon />
+      </Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <a target="_blank" rel="noopener noreferrer" href="https://wnd.sh/">
+        created with 💜 by @wnd.sh (click!)
+      </a>
+    </TooltipContent>
+  </Tooltip>
+);
+
+export const GitSocialLink = () => (
+  <Tooltip>
+    <TooltipTrigger>
+      <Button variant="link" asChild>
+        <GitCommitVerticalIcon />
+      </Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href="https://github.com/wndsh"
+      >
+        GitHub (click!)
+      </a>
+    </TooltipContent>
+  </Tooltip>
+);

src/components/ui/git-commit-vertical.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import type { Variants } from 'motion/react';
+import { motion, useAnimation } from 'motion/react';
+import type { HTMLAttributes } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import { cn } from '@/lib/utils';
+
+export interface GitCommitVerticalIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface GitCommitVerticalIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const variants: Variants = {
+  normal: {
+    pathLength: 1,
+    opacity: 1,
+  },
+  animate: (custom: number) => ({
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      delay: 0.15 * custom,
+      opacity: { delay: 0.1 * custom },
+    },
+  }),
+};
+
+const GitCommitVerticalIcon = forwardRef<
+  GitCommitVerticalIconHandle,
+  GitCommitVerticalIconProps
+>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+  const controls = useAnimation();
+  const isControlledRef = useRef(false);
+
+  useImperativeHandle(ref, () => {
+    isControlledRef.current = true;
+
+    return {
+      startAnimation: () => controls.start('animate'),
+      stopAnimation: () => controls.start('normal'),
+    };
+  });
+
+  const handleMouseEnter = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isControlledRef.current) {
+        controls.start('animate');
+      } else {
+        onMouseEnter?.(e);
+      }
+    },
+    [controls, onMouseEnter]
+  );
+
+  const handleMouseLeave = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isControlledRef.current) {
+        controls.start('normal');
+      } else {
+        onMouseLeave?.(e);
+      }
+    },
+    [controls, onMouseLeave]
+  );
+
+  return (
+    <div
+      className={cn(
+        `cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center`,
+        className
+      )}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      {...props}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <motion.path
+          d="M12 3v6"
+          variants={variants}
+          animate={controls}
+          custom={0}
+        />
+        <motion.circle
+          cx="12"
+          cy="12"
+          r="3"
+          variants={variants}
+          animate={controls}
+          custom={1}
+        />
+        <motion.path
+          d="M12 15v6"
+          variants={variants}
+          animate={controls}
+          custom={2}
+        />
+      </svg>
+    </div>
+  );
+});
+
+GitCommitVerticalIcon.displayName = 'GitCommitVerticalIcon';
+
+export { GitCommitVerticalIcon };

src/components/ui/terminal.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import type { Variants } from 'motion/react';
+import { motion, useAnimation } from 'motion/react';
+import type { HTMLAttributes } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import { cn } from '@/lib/utils';
+
+export interface TerminalIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface TerminalIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const lineVariants: Variants = {
+  normal: { opacity: 1 },
+  animate: {
+    opacity: [1, 0, 1],
+    transition: {
+      duration: 0.8,
+      repeat: Infinity,
+      ease: 'linear',
+    },
+  },
+};
+
+const TerminalIcon = forwardRef<TerminalIconHandle, TerminalIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start('animate'),
+        stopAnimation: () => controls.start('normal'),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (!isControlledRef.current) {
+          controls.start('animate');
+        } else {
+          onMouseEnter?.(e);
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (!isControlledRef.current) {
+          controls.start('normal');
+        } else {
+          onMouseLeave?.(e);
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(
+          `cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center`,
+          className
+        )}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={size}
+          height={size}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <polyline points="4 17 10 11 4 5" />
+          <motion.line
+            x1="12"
+            x2="20"
+            y1="19"
+            y2="19"
+            variants={lineVariants}
+            animate={controls}
+            initial="normal"
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+TerminalIcon.displayName = 'TerminalIcon';
+
+export { TerminalIcon };

src/components/ui/tooltip.tsx

@@ -0,0 +1,59 @@
+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-primary text-primary-foreground 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 rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }