Merge pull request #4 from KasarLabs/feat/more_plugins

docs(plugin): updated vesu's logo

package.json

@@ -16,7 +16,8 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-icons": "^5.4.0",
-    "react-syntax-highlighter": "^15.6.1"
+    "react-syntax-highlighter": "^15.6.1",
+    "react-zoom-pan-pinch": "^3.7.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

src/app/plugins/components/Circle.tsx

@@ -0,0 +1,73 @@
+import { GRID_CONFIG } from "../constants/gridConfig";
+import { GridItem } from "../utils/types";
+import { motion } from "framer-motion";
+import Image from "next/image";
+import React from "react";
+
+interface CircleProps {
+  circle: GridItem;
+  mousePosition: { x: number; y: number };
+  onPress: (circle: GridItem) => void;
+}
+
+const Circle = React.memo(({ circle, mousePosition, onPress }: CircleProps) => {
+  const circleCenter = {
+    x: circle.x + GRID_CONFIG.RADIUS / 2,
+    y: circle.y + GRID_CONFIG.RADIUS / 2,
+  };
+
+  const distanceFromMouse = Math.sqrt(
+    Math.pow(circleCenter.x - mousePosition.x, 2) +
+      Math.pow(circleCenter.y - mousePosition.y, 2),
+  );
+
+  const scale =
+    distanceFromMouse < GRID_CONFIG.ZOOM_ZONE_SIZE / 2
+      ? 1 +
+        (GRID_CONFIG.CENTER_ZOOM - 1) *
+          Math.max(1 - distanceFromMouse / (GRID_CONFIG.ZOOM_ZONE_SIZE / 2))
+      : 1;
+
+  return (
+    <motion.div
+      onClick={() => onPress(circle)}
+      style={{
+        position: "absolute",
+        left: circle.x,
+        top: circle.y,
+        width: GRID_CONFIG.RADIUS,
+        height: GRID_CONFIG.RADIUS,
+        borderRadius: "50%",
+        overflow: "visible",
+        transform: `scale(${scale})`,
+        transformOrigin: "center center",
+        willChange: "transform",
+      }}
+      whileHover={{
+        transition: { duration: 0.2 },
+      }}
+    >
+      <div className="w-full h-full cursor-pointer relative">
+        {circle.image ? (
+          <div className="w-full h-full rounded-full">
+            <Image
+              src={circle.image}
+              alt={circle.name}
+              width={GRID_CONFIG.RADIUS}
+              height={GRID_CONFIG.RADIUS}
+              className="rounded-full"
+            />
+          </div>
+        ) : (
+          <div
+            className="w-full h-full rounded-full"
+            style={{ backgroundColor: circle.color }}
+          />
+        )}
+      </div>
+    </motion.div>
+  );
+});
+
+Circle.displayName = "Circle";
+export default Circle;

src/app/plugins/constants/gridConfig.ts

@@ -0,0 +1,9 @@
+export const GRID_CONFIG = {
+  RADIUS: 60,
+  CENTER_ZOOM: 1.3,
+  ZOOM_ZONE_SIZE: 500,
+  SPACING: 42, // 60 * 0.7
+  HEX_RATIO: Math.sqrt(3) / 2,
+  COLORS: ["#0A0A0A"],
+  DECORATIVE_CIRCLES: 400,
+};