From 6bb2f1761547380f80e2f7094efb86f89923e869 Mon Sep 17 00:00:00 2001
From: ArifKobel <arifkobel58@gmail.com>
Date: Sat, 2 Mar 2024 15:15:57 +0100
Subject: [PATCH] feat: add OrbitItemFreezeOnMouseOver component and update
 dependencies

- Added a new component called `OrbitItemFreezeOnMouseOver` which allows freezing the animation on mouse over.
- Updated dependencies to include `useful-react-types` version 1.0.2.
---
 apps/web/app/page.tsx | 31 ++++++++++++++++++++++++++-----
 apps/web/package.json |  3 ++-
 pnpm-lock.yaml        |  3 +++
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 8c8a77d..e61a5a5 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -1,17 +1,38 @@
 'use client';
 import { OrbitPath, OrbitItem } from 'react-orbit-component';
 import Image from 'next/image';
-
+import React from 'react';
+import { Props } from 'useful-react-types';
 const SHARED_CLASSNAME = 'w-10 h-10 bg-zinc-800 border-white/20 border-2 rounded-full flex items-center justify-center text-lg';
-
+const OrbitItemFreezeOnMouseOver = ({ children, radius }: Props.ForceChildren & {radius?: number}) => {
+  const [isFreeze, setIsFreeze] = React.useState(false);
+  return (
+    <OrbitItem
+      direction="clockwise"
+      className="w-10 h-10 bg-zinc-800 border-white/20 border-2 rounded-full flex items-center justify-center text-lg cursor-pointer hover:scale-110"
+      step={isFreeze ? 0 : 0.2}
+      delay={0.1}
+      radius={radius}
+      style={{
+        transition: 'transform 0.1s ease-in-out',
+      }}
+      onMouseOver={(e) => {
+        setIsFreeze(true);
+      }}
+      onMouseOut={(e) => {
+        setIsFreeze(false);
+      }}
+    >
+      {children}
+    </OrbitItem>
+  );
+}
 export default function Page(): JSX.Element {
   return (
     <main>
       <div className="flex items-center justify-center min-h-screen">
         <OrbitPath type="circle" className="absolute w-[25vh] h-[25vh] bg-transparent rounded-full border-2 border-white/10">
-          <OrbitItem direction="clockwise" className={SHARED_CLASSNAME}>
-            💻
-          </OrbitItem>
+          <OrbitItemFreezeOnMouseOver>🐒</OrbitItemFreezeOnMouseOver>
         </OrbitPath>
 
         <OrbitPath type="circle" className="absolute w-[45vh] h-[45vh] bg-transparent rounded-full border-2 border-white/10">
diff --git a/apps/web/package.json b/apps/web/package.json
index 0b28b0d..27186b3 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -11,7 +11,8 @@
     "next": "^14.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-orbit-component": "workspace:*"
+    "react-orbit-component": "workspace:*",
+    "useful-react-types": "^1.0.2"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.0.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 02e0964..f83ea12 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       react-orbit-component:
         specifier: workspace:*
         version: link:../../packages/react-orbit
+      useful-react-types:
+        specifier: ^1.0.2
+        version: 1.0.2
     devDependencies:
       '@next/eslint-plugin-next':
         specifier: ^14.0.4