v7.1.1

2026-05-20 05:53:45 +07:00
parent 0093df6016
commit b3ebef5ab9
30 changed files with 2147 additions and 1257 deletions
@@ -0,0 +1,132 @@
+"use client";
+
+import type { Transition, Variants } from "motion/react";
+import { AnimatePresence, motion } from "motion/react";
+import { useEffect, useState, type HTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+
+type ReportIconMode = "bug" | "bulb";
+
+interface BugReportIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+    loop?: boolean;
+}
+
+const LOOP_INTERVAL_MS = 2200;
+
+const GROUP_VARIANTS: Variants = {
+    hidden: {
+        opacity: 0,
+    },
+    visible: {
+        opacity: 1,
+        transition: {
+            duration: 0.2,
+            ease: [0, 0, 0.2, 1],
+        },
+    },
+    exit: {
+        opacity: 0,
+        transition: {
+            duration: 0.18,
+            ease: [0.4, 0, 1, 1],
+        },
+    },
+};
+
+const DRAW_VARIANTS: Variants = {
+    hidden: {
+        pathLength: 0,
+        opacity: 0,
+    },
+    visible: {
+        pathLength: 1,
+        opacity: 1,
+    },
+    exit: {
+        pathLength: 1,
+        opacity: 0,
+    },
+};
+
+function createDrawTransition(delay = 0, duration = 0.36): Transition {
+    return {
+        duration,
+        delay,
+        ease: [0.4, 0, 0.2, 1],
+        opacity: { delay },
+    };
+}
+
+function BugPaths() {
+    return (<>
+      <motion.path d="m8 2 1.88 1.88" transition={createDrawTransition(0)} variants={DRAW_VARIANTS}/>
+      <motion.path d="M14.12 3.88 16 2" transition={createDrawTransition(0.04)} variants={DRAW_VARIANTS}/>
+      <motion.path d="M9 7.13V6a3 3 0 1 1 6 0v1.13" transition={createDrawTransition(0.08)} variants={DRAW_VARIANTS}/>
+      <motion.path d="M6.53 9A4 4 0 0 1 3 5" transition={createDrawTransition(0.14)} variants={DRAW_VARIANTS}/>
+      <motion.path d="M17.47 9A4 4 0 0 0 21 5" transition={createDrawTransition(0.18)} variants={DRAW_VARIANTS}/>
+      <motion.path d="M12 20v-9" transition={createDrawTransition(0.24)} variants={DRAW_VARIANTS}/>
+      <motion.path d="M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z" transition={createDrawTransition(0.3, 0.42)} variants={DRAW_VARIANTS}/>
+      <motion.path d="M22 13h-4" transition={createDrawTransition(0.42)} variants={DRAW_VARIANTS}/>
+      <motion.path d="M6 13H2" transition={createDrawTransition(0.46)} variants={DRAW_VARIANTS}/>
+      <motion.path d="M21 21a4 4 0 0 0-3.81-4" transition={createDrawTransition(0.52)} variants={DRAW_VARIANTS}/>
+      <motion.path d="M3 21a4 4 0 0 1 3.81-4" transition={createDrawTransition(0.56)} variants={DRAW_VARIANTS}/>
+    </>);
+}
+
+function BulbPaths() {
+    return (<>
+      <motion.path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" transition={createDrawTransition(0, 0.46)} variants={DRAW_VARIANTS}/>
+      <motion.path d="M9 18h6" transition={createDrawTransition(0.16)} variants={DRAW_VARIANTS}/>
+      <motion.path d="M10 22h4" transition={createDrawTransition(0.24)} variants={DRAW_VARIANTS}/>
+    </>);
+}
+
+function ReportIconGroup({ mode }: { mode: ReportIconMode }) {
+    return (<motion.g animate="visible" exit="exit" initial="hidden" variants={GROUP_VARIANTS}>
+      {mode === "bug" ? <BugPaths/> : <BulbPaths/>}
+    </motion.g>);
+}
+
+function StaticBugIcon() {
+    return (<g>
+      <path d="m8 2 1.88 1.88"/>
+      <path d="M14.12 3.88 16 2"/>
+      <path d="M9 7.13V6a3 3 0 1 1 6 0v1.13"/>
+      <path d="M6.53 9A4 4 0 0 1 3 5"/>
+      <path d="M17.47 9A4 4 0 0 0 21 5"/>
+      <path d="M12 20v-9"/>
+      <path d="M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z"/>
+      <path d="M22 13h-4"/>
+      <path d="M6 13H2"/>
+      <path d="M21 21a4 4 0 0 0-3.81-4"/>
+      <path d="M3 21a4 4 0 0 1 3.81-4"/>
+    </g>);
+}
+
+function BugReportIcon({ className, size = 28, loop = false, ...props }: BugReportIconProps) {
+    const [mode, setMode] = useState<ReportIconMode>("bug");
+
+    useEffect(() => {
+        if (!loop) {
+            setMode("bug");
+            return;
+        }
+
+        const intervalId = window.setInterval(() => {
+            setMode((currentMode) => currentMode === "bug" ? "bulb" : "bug");
+        }, LOOP_INTERVAL_MS);
+
+        return () => window.clearInterval(intervalId);
+    }, [loop]);
+
+    return (<div className={cn("flex items-center justify-center", className)} {...props}>
+      <svg fill="none" height={size} stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width={size} xmlns="http://www.w3.org/2000/svg">
+        {loop ? (<AnimatePresence>
+            <ReportIconGroup key={mode} mode={mode}/>
+          </AnimatePresence>) : (<StaticBugIcon/>)}
+      </svg>
+    </div>);
+}
+
+export { BugReportIcon };