social links

2026-07-03 13:15:39 +07:00
parent c04194bb85
commit 052a4081b3
3 changed files with 174 additions and 184 deletions
@@ -0,0 +1,167 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
+const Icons = {
+  Telegram: () => (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="size-6"
+    >
+      <path d="m22 2-7 20-4-9-9-4Z" />
+      <path d="M22 2 11 13" />
+    </svg>
+  ),
+  Youtube: () => (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="size-6"
+    >
+      <path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.42a2.78 2.78 0 0 0-1.94 2C1 8.11 1 12 1 12s0 3.89.46 5.58a2.78 2.78 0 0 0 1.94 2c1.72.42 8.6.42 8.6.42s6.88 0 8.6-.42a2.78 2.78 0 0 0 1.94-2C23 15.89 23 12 23 12s0-3.89-.46-5.58z" />
+      <polygon
+        points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  Discord: () => (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="size-6"
+    >
+      <path d="M19.73 5.42a19.06 19.06 0 0 0-4.73-1.45 14.1 14.1 0 0 0-.6 1.2A17.65 17.65 0 0 0 9.6 5.17a14.1 14.1 0 0 0-.6-1.2 19.06 19.06 0 0 0-4.73 1.45 19.64 19.64 0 0 0-3.37 13.5 19.34 19.34 0 0 0 5.86 3 13.9 13.9 0 0 0 1.26-2.03 13.2 13.2 0 0 1-2-.95c.16-.12.3-.25.45-.38a13.3 13.3 0 0 0 11.08 0c.15.13.3.26.45.38a13.2 13.2 0 0 1-2 .95 13.9 13.9 0 0 0 1.26 2.03 19.34 19.34 0 0 0 5.86-3 19.64 19.64 0 0 0-3.37-13.5ZM8.5 15.2c-1.07 0-1.95-1-1.95-2.22s.87-2.22 1.95-2.22c1.08 0 1.96 1 1.95 2.22 0 1.21-.88 2.22-1.95 2.22Zm7 0c-1.07 0-1.95-1-1.95-2.22s.87-2.22 1.95-2.22c1.08 0 1.96 1 1.95 2.22 0 1.21-.88 2.22-1.95 2.22Z" />
+    </svg>
+  ),
+  X: () => (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="size-6"
+    >
+      <path d="M4 4l11.733 16H20L8.267 4z" />
+      <path d="M4 20l6.768-6.768m2.464-2.464L20 4" />
+    </svg>
+  ),
+  Instagram: () => (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="size-6"
+    >
+      <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
+      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
+      <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
+    </svg>
+  ),
+};
+
+export const socialLinks = [
+  {
+    name: "Telegram",
+    href: "https://t.me/netrunner_vpn_official",
+    icon: Icons.Telegram,
+    color: "text-[#0088cc]",
+    glow: "dark:drop-shadow-[0_0_8px_rgba(0,136,204,0.8)]",
+    bgGlow: "bg-[#0088cc]",
+  },
+  {
+    name: "YouTube",
+    href: "https://www.youtube.com/@netrunnerVPN",
+    icon: Icons.Youtube,
+    color: "text-[#ff0000]",
+    glow: "dark:drop-shadow-[0_0_8px_rgba(255,0,0,0.8)]",
+    bgGlow: "bg-[#ff0000]",
+  },
+  {
+    name: "Discord",
+    href: "https://discord.gg/tZPXWRG9wr",
+    icon: Icons.Discord,
+    color: "text-[#5865F2]",
+    glow: "dark:drop-shadow-[0_0_8px_rgba(88,101,242,0.8)]",
+    bgGlow: "bg-[#5865F2]",
+  },
+  {
+    name: "X",
+    href: "https://x.com/netrunner_vpn",
+    icon: Icons.X,
+    color: "text-foreground",
+    glow: "dark:drop-shadow-[0_0_8px_rgba(255,255,255,0.5)]",
+    bgGlow: "bg-white",
+  },
+  {
+    name: "Instagram",
+    href: "https://www.instagram.com/netrunner_vpn",
+    icon: Icons.Instagram,
+    color: "text-[#E1306C]",
+    glow: "dark:drop-shadow-[0_0_8px_rgba(225,48,108,0.8)]",
+    bgGlow: "bg-[#E1306C]",
+  },
+];
+
+// Имитация неонового мерцания: в случайные моменты времени иконка на короткий
+// промежуток резко тускнеет, а затем возвращается к полной непрозрачности —
+// создаёт эффект "барахлящей неоновой вывески" в стиле киберпанк-темы проекта.
+export const FlickeringSocialIcon = ({ social }: { social: any }) => {
+  const [opacity, setOpacity] = useState(1);
+
+  useEffect(() => {
+    let timeoutId: NodeJS.Timeout;
+    const flicker = () => {
+      if (Math.random() > 0.6) {
+        setOpacity(Math.random() * 0.5 + 0.1);
+        setTimeout(() => setOpacity(1), Math.random() * 120 + 30);
+      }
+      timeoutId = setTimeout(flicker, Math.random() * 6000 + 1000);
+    };
+    timeoutId = setTimeout(flicker, Math.random() * 3000);
+    return () => clearTimeout(timeoutId);
+  }, []);
+
+  return (
+    <Link
+      href={social.href}
+      title={social.name}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={cn(
+        "p-2 rounded-lg transition-all duration-300 relative",
+        "dark:bg-transparent dark:border-none",
+        "bg-muted/50 border border-transparent hover:border-border hover:shadow-inner",
+        social.color,
+        social.glow,
+        "hover:!opacity-100 hover:scale-110 active:scale-95",
+      )}
+      style={{ opacity, transition: "opacity 0.05s ease-in-out" }}
+    >
+      <div
+        className={`absolute inset-0 blur-[6px] opacity-20 hidden dark:block ${social.bgGlow}`}
+      />
+      <social.icon />
+    </Link>
+  );
+};