abhishek-portfolio-template 1.0.0

package/template/src/components/ui/command-palette.tsx

@@ -0,0 +1,152 @@
+
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+import {
+    CommandMenu,
+    CommandMenuContent,
+    CommandMenuInput,
+    CommandMenuList,
+    CommandMenuGroup,
+    CommandMenuItem,
+    CommandMenuSeparator,
+    useCommandMenuShortcut,
+} from "@/components/ui/command-menu"
+import {
+    Home,
+    User,
+    Briefcase,
+    Github,
+    Twitter,
+    Linkedin,
+    Mail,
+    FileText,
+    Copy,
+    ArrowRight
+} from "lucide-react"
+
+export function CommandPalette() {
+    const [open, setOpen] = React.useState(false)
+    const router = useRouter()
+
+    useCommandMenuShortcut(() => setOpen(true))
+
+    const runCommand = React.useCallback((command: () => void) => {
+        setOpen(false)
+        command()
+    }, [])
+
+    return (
+        <CommandMenu open={open} onOpenChange={setOpen}>
+            {/* Trigger is handled globally by shortcut, so no visual trigger needed here */}
+
+            <CommandMenuContent>
+                <CommandMenuInput placeholder="Type a command or search..." />
+                <CommandMenuList>
+                    <CommandMenuGroup heading="Explore the Verse">
+                        <CommandMenuItem
+                            icon={<Home className="text-blue-400" />}
+                            index={0}
+                            keywords={["home", "hq", "index", "return"]}
+                            onSelect={() => runCommand(() => router.push("/"))}
+                        >
+                            <span className="font-medium text-white/90">Return to HQ</span>
+                            <span className="ml-2 text-xs text-white/40 hidden sm:inline-block">Home Page</span>
+                        </CommandMenuItem>
+                        <CommandMenuItem
+                            icon={<User className="text-purple-400" />}
+                            index={1}
+                            keywords={["about", "bio", "lore", "who", "story"]}
+                            onSelect={() => runCommand(() => router.push("/about"))}
+                        >
+                            <span className="font-medium text-white/90">Who is Abhishek?</span>
+                            <span className="ml-2 text-xs text-white/40 hidden sm:inline-block">The lore behind the dev</span>
+                        </CommandMenuItem>
+                        <CommandMenuItem
+                            icon={<Briefcase className="text-yellow-400" />}
+                            index={2}
+                            keywords={["works", "projects", "portfolio", "archives", "case studies"]}
+                            onSelect={() => runCommand(() => router.push("/works"))}
+                        >
+                            <span className="font-medium text-white/90">Inspect the Archives</span>
+                            <span className="ml-2 text-xs text-white/40 hidden sm:inline-block">My finest works</span>
+                        </CommandMenuItem>
+                        <CommandMenuItem
+                            icon={<Github className="text-green-400" />}
+                            index={3}
+                            keywords={["github", "code", "source", "repo", "git"]}
+                            onSelect={() => runCommand(() => router.push("/github/AbhishekS04"))}
+                        >
+                            <span className="font-medium text-white/90">Analyze Source Code</span>
+                            <span className="ml-2 text-xs text-white/40 hidden sm:inline-block">View GitHub without leaving</span>
+                        </CommandMenuItem>
+                    </CommandMenuGroup>
+
+                    <CommandMenuSeparator />
+
+                    <CommandMenuGroup heading="Connect">
+                        <CommandMenuItem
+                            icon={<Github />}
+                            index={4}
+                            keywords={["github", "profile", "social"]}
+                            onSelect={() => runCommand(() => window.open("https://github.com/AbhishekS04", "_blank"))}
+                        >
+                            GitHub Profile
+                        </CommandMenuItem>
+                        <CommandMenuItem
+                            icon={<Twitter />}
+                            index={5}
+                            keywords={["twitter", "x", "social", "tweet"]}
+                            onSelect={() => runCommand(() => window.open("https://twitter.com/AbhishekS04", "_blank"))}
+                        >
+                            Twitter / X
+                        </CommandMenuItem>
+                        <CommandMenuItem
+                            icon={<Linkedin />}
+                            index={6}
+                            keywords={["linkedin", "network", "social", "career"]}
+                            onSelect={() => runCommand(() => window.open("https://linkedin.com/in/AbhishekS04", "_blank"))}
+                        >
+                            LinkedIn Network
+                        </CommandMenuItem>
+                    </CommandMenuGroup>
+
+                    <CommandMenuSeparator />
+
+                    <CommandMenuGroup heading="Protocol">
+                        <CommandMenuItem
+                            icon={<Copy />}
+                            index={7}
+                            shortcut="cmd+c"
+                            keywords={["copy", "email", "address", "contact"]}
+                            onSelect={() => runCommand(() => {
+                                navigator.clipboard.writeText("your.email@example.com")
+                            })}
+                        >
+                            Copy Coordinates (Email)
+                        </CommandMenuItem>
+                        <CommandMenuItem
+                            icon={<FileText />}
+                            index={8}
+                            shortcut="cmd+r"
+                            keywords={["resume", "cv", "pdf", "dossier", "download"]}
+                            onSelect={() => runCommand(() => window.open("/resume.pdf", "_blank"))}
+                        >
+                            Download Dossier (Resume)
+                        </CommandMenuItem>
+                        <CommandMenuItem
+                            icon={<Mail />}
+                            index={9}
+                            keywords={["send", "mail", "contact", "message", "write"]}
+                            onSelect={() => runCommand(() => window.location.href = "mailto:your.email@example.com")}
+                        >
+                            Establish Comms (Mailto)
+                        </CommandMenuItem>
+                    </CommandMenuGroup>
+                </CommandMenuList>
+            </CommandMenuContent>
+        </CommandMenu>
+    )
+}
+

package/template/src/components/ui/consciousness-mode.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import { useEffect, useState, useRef } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+export const ConsciousnessMode = () => {
+    const [isActive, setIsActive] = useState(false);
+    const [progress, setProgress] = useState(0);
+    const [isLocked, setIsLocked] = useState(true); // Default locked until checked
+    const progressRef = useRef(0);
+    const lastScrollY = useRef(0);
+    const lastTime = useRef(0);
+    const inactivityTimer = useRef<NodeJS.Timeout | null>(null);
+
+    useEffect(() => {
+        // Check persistence
+        const witnessed = localStorage.getItem("consciousness_witnessed");
+        if (!witnessed) setIsLocked(false);
+    }, []);
+
+    useEffect(() => {
+        const handleScroll = (e: Event) => {
+            if (isActive) return;
+
+            const now = Date.now();
+            const currentScrollY = window.scrollY;
+            const deltaY = Math.abs(currentScrollY - lastScrollY.current);
+            const deltaTime = now - lastTime.current;
+
+            // Update refs
+            lastScrollY.current = currentScrollY;
+            lastTime.current = now;
+
+            // LOGIC:
+            // 1. Shift Key must be held (we check via a separate listener or just window.event if possible, but React safer to track key state)
+            // Actually, we can check keyboard state via a ref tracker.
+        };
+
+        // We need a key tracker
+        // But simpler: We can check MouseEvent modifiers? No, scroll is an Event or WheelEvent.
+        // WheelEvent has shiftKey. But 'scroll' event does not.
+        // Let's listen to 'wheel' for the trigger?
+        // - "scroll" event fires AFTER layout change.
+        // - "wheel" event fires ON input.
+        // User said "Scroll slowly". Wheel is better for detecting "Intent".
+
+    }, [isActive]);
+
+    // Better Logic:
+    // Track Shift Key State
+    const [isShiftPressed, setIsShiftPressed] = useState(false);
+    useEffect(() => {
+        if (isLocked) return;
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === "Shift") setIsShiftPressed(true);
+        };
+        const handleKeyUp = (e: KeyboardEvent) => {
+            if (e.key === "Shift") {
+                setIsShiftPressed(false);
+                if (!isActive) {
+                    setProgress(0); // Reset if let go before completion
+                    progressRef.current = 0;
+                }
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        window.addEventListener("keyup", handleKeyUp);
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown);
+            window.removeEventListener("keyup", handleKeyUp);
+        };
+    }, [isActive, isLocked]);
+
+    // Track Scroll
+    useEffect(() => {
+        if (isLocked || !isShiftPressed || isActive) return;
+
+        let animationFrame: number;
+
+        const checkScroll = () => {
+            // We need to detect "Active Scrolling" but "Slow".
+            // Since scroll events are discrete, let's just decay the progress if NO scroll happens.
+        };
+
+        const handleWheel = (e: WheelEvent) => {
+            if (isLocked || !isShiftPressed || isActive) return;
+
+            // Speed Check
+            // Typical fast scroll is > 50-100 delta.
+            // Slow scroll is < 20.
+            const speed = Math.abs(e.deltaY);
+
+            if (speed > 0 && speed < 30) {
+                // Good speed. Increment.
+                // Target: 7 seconds.
+                // Assuming ~60 wheel events per second for continuous smooth scrolling (trackpad), or ~10 for ratcheted mouse.
+                // Let's aim safely for a mix. 0.4 per event is roughly 250 events.
+                // If 60hz -> 4 seconds. If 30hz -> 8 seconds.
+                // Let's try 0.25 to be safe for 7s on smooth trackpads.
+                progressRef.current += 0.25;
+
+                if (progressRef.current > 100) {
+                    progressRef.current = 100;
+                    setIsActive(true);
+                    localStorage.setItem("consciousness_witnessed", "true");
+                }
+                setProgress(progressRef.current);
+            } else if (speed > 50) {
+                // Too fast! Reset punishment.
+                progressRef.current = Math.max(0, progressRef.current - 5);
+                setProgress(progressRef.current);
+            }
+
+            // Reset inactivity timer
+            if (inactivityTimer.current) clearTimeout(inactivityTimer.current);
+            inactivityTimer.current = setTimeout(() => {
+                // Decay if stopped
+                const decay = setInterval(() => {
+                    progressRef.current -= 2;
+                    if (progressRef.current <= 0) {
+                        progressRef.current = 0;
+                        clearInterval(decay);
+                    }
+                    setProgress(progressRef.current);
+                }, 50);
+            }, 500);
+        };
+
+        window.addEventListener("wheel", handleWheel);
+        return () => window.removeEventListener("wheel", handleWheel);
+    }, [isShiftPressed, isActive, isLocked]);
+
+
+    // Auto-dismiss after activation
+    useEffect(() => {
+        if (isActive) {
+            const timer = setTimeout(() => {
+                setIsActive(false);
+                setProgress(0);
+                progressRef.current = 0;
+            }, 4500); // Wait for text to fully play out
+            return () => clearTimeout(timer);
+        }
+    }, [isActive]);
+
+    return (
+        <AnimatePresence>
+            {/* PROGRESS FEEDBACK (Subtle) */}
+            {progress > 5 && !isActive && (
+                <motion.div
+                    className="fixed bottom-0 left-0 h-1 bg-white/20 z-[9999]"
+                    style={{ width: `${progress}%` }}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                />
+            )}
+
+            {isActive && (
+                <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={{ duration: 1 }}
+                    className="fixed inset-0 z-[1000] pointer-events-none flex items-center justify-center"
+                >
+                    {/* BLUR OVERLAY */}
+                    <motion.div
+                        initial={{ backdropFilter: "blur(0px)", backgroundColor: "rgba(0,0,0,0)" }}
+                        animate={{ backdropFilter: "blur(12px)", backgroundColor: "rgba(0,0,0,0.4)" }}
+                        exit={{ backdropFilter: "blur(0px)", backgroundColor: "rgba(0,0,0,0)" }}
+                        transition={{ duration: 1.5, ease: "easeOut" }}
+                        className="absolute inset-0"
+                    />
+
+                    {/* TEXT */}
+                    <motion.div
+                        initial={{ opacity: 0, scale: 0.95, filter: "blur(10px)" }}
+                        animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
+                        exit={{ opacity: 0, scale: 1.05, filter: "blur(5px)" }}
+                        transition={{ duration: 1.5, ease: "easeOut" }}
+                        className="relative z-10 text-center px-4"
+                    >
+                        <h2 className="text-3xl md:text-5xl font-light tracking-widest text-[#e2e2e2] font-serif italic mb-4">
+                            You’re paying attention.
+                        </h2>
+                        <motion.p
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            transition={{ delay: 1.5, duration: 1 }}
+                            className="text-sm uppercase tracking-[0.3em] text-white/50"
+                        >
+                            I like that.
+                        </motion.p>
+                    </motion.div>
+                </motion.div>
+            )}
+        </AnimatePresence>
+    );
+};

package/template/src/components/ui/copy-code-button.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+interface CopyCodeProps {
+    code: string;
+}
+
+export function CopyCode({ code }: CopyCodeProps) {
+    const [copied, setCopied] = useState(false);
+    const [showConfirmation, setShowConfirmation] = useState(false);
+    const [progress, setProgress] = useState(0);
+    const duration = 2000; // Reduced to 2s for email copy (4s is too long)
+
+    useEffect(() => {
+        if (copied) {
+            // Delay showing confirmation to allow blur-out animation
+            const showTimer = setTimeout(() => {
+                setShowConfirmation(true);
+            }, 400);
+
+            setProgress(0);
+            const startTime = Date.now();
+
+            const interval = setInterval(() => {
+                const elapsed = Date.now() - startTime;
+                const newProgress = Math.min((elapsed / duration) * 100, 100);
+                setProgress(newProgress);
+
+                if (elapsed >= duration) {
+                    clearInterval(interval);
+                    setShowConfirmation(false);
+                    setTimeout(() => {
+                        setCopied(false);
+                        setProgress(0);
+                    }, 400);
+                }
+            }, 16);
+
+            return () => {
+                clearInterval(interval);
+                clearTimeout(showTimer);
+            };
+        }
+    }, [copied]);
+
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(code);
+        } catch (err) {
+            // Fallback
+            const textArea = document.createElement('textarea');
+            textArea.value = code;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textArea);
+        }
+        setCopied(true);
+    };
+
+    return (
+        <div className="relative overflow-hidden flex items-center justify-between bg-[#111] border border-white/10 rounded-full px-8 py-3 w-fit min-w-[300px] h-16">
+            {/* Progress background */}
+            <div
+                className="absolute left-0 top-0 bottom-0 bg-white/10"
+                style={{
+                    width: `${progress}%`,
+                    opacity: copied ? 1 : 0,
+                    transition: 'opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
+                }}
+            />
+
+            {/* Original content - code and button */}
+            <div
+                className="absolute inset-0 flex items-center justify-between px-8"
+                style={{
+                    opacity: copied ? 0 : 1,
+                    filter: copied ? 'blur(12px)' : 'blur(0px)',
+                    transform: copied ? 'scale(0.92)' : 'scale(1)',
+                    transition: 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
+                    pointerEvents: copied ? 'none' : 'auto',
+                    zIndex: copied ? 0 : 20,
+                }}
+            >
+                <span className="text-xl font-medium tracking-wide text-white/80 select-all truncate max-w-[200px]">
+                    {code}
+                </span>
+                <button
+                    onClick={handleCopy}
+                    className="ml-4 bg-white/10 hover:bg-white/20 text-white/90 text-sm font-medium px-4 py-2 rounded-full transition-all duration-300 active:scale-95 cursor-pointer select-none"
+                >
+                    Copy
+                </button>
+            </div>
+
+            {/* Confirmation content - Code Copied! */}
+            <div
+                className="absolute inset-0 flex items-center justify-center gap-3"
+                style={{
+                    opacity: showConfirmation ? 1 : 0,
+                    filter: showConfirmation ? 'blur(0px)' : 'blur(12px)',
+                    transform: showConfirmation ? 'scale(1)' : 'scale(1.08)',
+                    transition: 'all 0.8s cubic-bezier(0.4, 0, 0.2, 1)',
+                    pointerEvents: 'none',
+                    zIndex: 10,
+                }}
+            >
+                <div className="w-6 h-6 bg-emerald-500 rounded-full flex items-center justify-center">
+                    <svg
+                        className="w-3.5 h-3.5 text-black"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={3}
+                            d="M5 13l4 4L19 7"
+                            style={{
+                                strokeDasharray: 24,
+                                strokeDashoffset: showConfirmation ? 0 : 24,
+                                transition: 'stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s',
+                            }}
+                        />
+                    </svg>
+                </div>
+                <span className="text-lg font-medium text-white">
+                    Email Copied!
+                </span>
+            </div>
+        </div>
+    );
+}

package/template/src/components/ui/display-cards.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { Sparkles } from "lucide-react";
+
+interface DisplayCardProps {
+    className?: string;
+    icon?: React.ReactNode;
+    title?: string;
+    description?: string;
+    date?: string;
+    iconClassName?: string;
+    titleClassName?: string;
+}
+
+function DisplayCard({
+    className,
+    icon = <Sparkles className="size-4 text-blue-300" />,
+    title = "Featured",
+    description = "Discover amazing content",
+    date = "Just now",
+    iconClassName = "text-blue-500",
+    titleClassName = "text-blue-500",
+}: DisplayCardProps) {
+    return (
+        <div
+            className={cn(
+                "relative flex h-36 w-full max-w-[22rem] -skew-y-[8deg] select-none flex-col justify-between rounded-xl border-2 bg-muted/70 backdrop-blur-sm px-4 py-3 transition-all duration-700 after:absolute after:-right-1 after:top-[-5%] after:h-[110%] after:w-[20rem] after:bg-gradient-to-l after:from-background after:to-transparent after:content-[''] hover:border-white/20 hover:bg-muted [&>*]:flex [&>*]:items-center [&>*]:gap-2",
+                className
+            )}
+        >
+            <div>
+                <span className="relative inline-block rounded-full bg-blue-800 p-1">
+                    {icon}
+                </span>
+                <p className={cn("text-lg font-medium", titleClassName)}>{title}</p>
+            </div>
+            <p className="whitespace-nowrap text-lg">{description}</p>
+            <p className="text-muted-foreground">{date}</p>
+        </div>
+    );
+}
+
+interface DisplayCardsProps {
+    cards?: DisplayCardProps[];
+}
+
+export default function DisplayCards({ cards }: DisplayCardsProps) {
+    const defaultCards = [
+        {
+            className: "[grid-area:stack] hover:-translate-y-10 before:absolute before:w-[100%] before:outline-1 before:rounded-xl before:outline-border before:h-[100%] before:content-[''] before:bg-blend-overlay before:bg-background/50 grayscale-[100%] hover:before:opacity-0 before:transition-opacity before:duration:700 hover:grayscale-0 before:left-0 before:top-0",
+        },
+        {
+            className: "[grid-area:stack] translate-x-16 translate-y-10 hover:-translate-y-1 before:absolute before:w-[100%] before:outline-1 before:rounded-xl before:outline-border before:h-[100%] before:content-[''] before:bg-blend-overlay before:bg-background/50 grayscale-[100%] hover:before:opacity-0 before:transition-opacity before:duration:700 hover:grayscale-0 before:left-0 before:top-0",
+        },
+        {
+            className: "[grid-area:stack] translate-x-32 translate-y-20 hover:translate-y-10",
+        },
+    ];
+
+    const displayCards = cards || defaultCards;
+
+    return (
+        <div className="grid [grid-template-areas:'stack'] place-items-center opacity-100 animate-in fade-in-0 duration-700">
+            {displayCards.map((cardProps, index) => (
+                <DisplayCard key={index} {...cardProps} />
+            ))}
+        </div>
+    );
+}

package/template/src/components/ui/dotted-map.tsx

@@ -0,0 +1,128 @@
+import * as React from "react"
+import { createMap } from "svg-dotted-map"
+
+import { cn } from "@/lib/utils"
+
+interface Marker {
+  lat: number
+  lng: number
+  size?: number
+}
+
+export interface DottedMapProps extends React.SVGProps<SVGSVGElement> {
+  width?: number
+  height?: number
+  mapSamples?: number
+  markers?: Marker[]
+  dotColor?: string
+  markerColor?: string
+  dotRadius?: number
+  stagger?: boolean
+}
+
+export function DottedMap({
+  width = 150,
+  height = 75,
+  mapSamples = 5000,
+  markers = [],
+  markerColor = "#FF6900",
+  dotRadius = 0.2,
+  stagger = true,
+  className,
+  style,
+}: DottedMapProps) {
+  const { points, addMarkers } = createMap({
+    width,
+    height,
+    mapSamples,
+  })
+
+  const processedMarkers = addMarkers(markers)
+
+  // Compute stagger helpers in a single, simple pass
+  const { xStep, yToRowIndex } = React.useMemo(() => {
+    const sorted = [...points].sort((a, b) => a.y - b.y || a.x - b.x)
+    const rowMap = new Map<number, number>()
+    let step = 0
+    let prevY = Number.NaN
+    let prevXInRow = Number.NaN
+
+    for (const p of sorted) {
+      if (p.y !== prevY) {
+        // new row
+        prevY = p.y
+        prevXInRow = Number.NaN
+        if (!rowMap.has(p.y)) rowMap.set(p.y, rowMap.size)
+      }
+      if (!Number.isNaN(prevXInRow)) {
+        const delta = p.x - prevXInRow
+        if (delta > 0) step = step === 0 ? delta : Math.min(step, delta)
+      }
+      prevXInRow = p.x
+    }
+
+    return { xStep: step || 1, yToRowIndex: rowMap }
+  }, [points])
+
+  const [isEggActive, setIsEggActive] = React.useState(false);
+
+  React.useEffect(() => {
+    if (typeof window !== "undefined") {
+      const purged = localStorage.getItem("mapEgg");
+      if (purged !== "purged") setIsEggActive(true);
+    }
+  }, []);
+
+  const handleEggClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    setIsEggActive(false);
+    localStorage.setItem("mapEgg", "purged");
+  };
+
+  return (
+    <svg
+      viewBox={`0 0 ${width} ${height}`}
+      className={cn("text-gray-500 dark:text-gray-500", className)}
+      style={{ width: "100%", height: "100%", ...style }}
+    >
+      {points.map((point, index) => {
+        const rowIndex = yToRowIndex.get(point.y) ?? 0
+        const offsetX = stagger && rowIndex % 2 === 1 ? xStep / 2 : 0
+        return (
+          <circle
+            cx={point.x + offsetX}
+            cy={point.y}
+            r={dotRadius}
+            fill="currentColor"
+            key={`${point.x}-${point.y}-${index}`}
+          />
+        )
+      })}
+      {processedMarkers.map((marker, index) => {
+        const rowIndex = yToRowIndex.get(marker.y) ?? 0
+        const offsetX = stagger && rowIndex % 2 === 1 ? xStep / 2 : 0
+        return (
+          <g key={`${marker.x}-${marker.y}-${index}`}>
+            <circle
+              cx={marker.x + offsetX}
+              cy={marker.y}
+              r={marker.size ?? dotRadius}
+              fill={markerColor}
+            />
+            {isEggActive && (
+              <circle
+                cx={marker.x + offsetX}
+                cy={marker.y}
+                r={(marker.size ?? dotRadius) * 4} // ~4x radius for comfortable click area
+                fill="transparent"
+                className="cursor-default pointer-events-auto"
+                onClick={handleEggClick}
+              />
+            )}
+          </g>
+        )
+      })}
+    </svg>
+  )
+}