feat(): ADding the cursor

ar1603 · ar1603 · commit 6154f75615a3 · 2025-01-15T19:56:25.000+05:30
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet-async": "^2.0.5",
     "react-i18next": "^14.1.1",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,14 +4,17 @@ import {
   LocalizationProvider,
   ThemeProvider,
 } from '@providers';
+import { HelmetProvider } from 'react-helmet-async';
 
 function App() {
   return (
     <ThemeProvider>
       <React.StrictMode>
-        <LocalizationProvider>
-          <AppRouterProvider />
-        </LocalizationProvider>
+        <HelmetProvider>
+          <LocalizationProvider>
+            <AppRouterProvider />
+          </LocalizationProvider>
+        </HelmetProvider>
       </React.StrictMode>
     </ThemeProvider>
   );
diff --git a/src/components/Cursor/Cursor.tsx b/src/components/Cursor/Cursor.tsx
@@ -0,0 +1,27 @@
+import { motion } from 'framer-motion';
+import { useRef } from 'react';
+import { useSpringMousePosition } from '../../hooks';
+
+const FollowCursor = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  const { x, y } = useSpringMousePosition(ref);
+
+  return (
+    <motion.div
+      ref={ref}
+      style={{
+        x,
+        y,
+        backgroundColor: '#fff',
+        mixBlendMode: 'difference',
+        boxShadow: '0 0 50px 10px violet',
+        zIndex: 999,
+        width: '56px',
+        height: '56px',
+        borderRadius: '50%',
+      }}
+    />
+  );
+};
+
+export default FollowCursor;
diff --git a/src/components/Cursor/index.ts b/src/components/Cursor/index.ts
@@ -0,0 +1 @@
+export { default as FollowingCursor } from './Cursor';
diff --git a/src/components/Theme/colors.ts b/src/components/Theme/colors.ts
@@ -1,5 +1,13 @@
 const colors = {
   transparent: 'transparent',
+  primary: '#F1F2F3',
+  secondary: '#00D8FF',
+  success: '#31CE7B',
+  danger: '#D82727',
+  warning: '#D79D28',
+  info: '#00D8FF',
+  light: '#F1F2F3',
+  dark: '#17191C',
   black: '#000',
   white: '#fff',
   gray: {
diff --git a/src/components/TitleBox/TitleBoxContainer.tsx b/src/components/TitleBox/TitleBoxContainer.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Box } from '@chakra-ui/react';
+import { isEqual } from 'lodash';
+import { TitleBoxProps } from './types';
+import { Helmet } from 'react-helmet-async';
+
+const TitleBoxContainer = ({
+  title,
+  icon,
+  helmetChildren,
+  ...props
+}: TitleBoxProps) => {
+  return (
+    <Box {...props}>
+      <Helmet>
+        <title>{title}</title>
+        <meta name="description" content={'Coding platform'} />
+        {helmetChildren}
+      </Helmet>
+      {props.children}
+    </Box>
+  );
+};
+
+export default React.memo(TitleBoxContainer, isEqual);
diff --git a/src/components/TitleBox/__tests__/TitleBoxContainer.test.tsx b/src/components/TitleBox/__tests__/TitleBoxContainer.test.tsx
@@ -0,0 +1,20 @@
+import TitleBoxContainer from '../TitleBoxContainer';
+import { renderWithProvidersAndRouter } from '../../../testUtils';
+
+const title = 'Test Title';
+const icon = 'test-icon';
+const props = {
+  title,
+  icon,
+  children: 'Test Children',
+};
+
+describe('TitleBoxContainer', () => {
+  it('should set the document title', () => {
+    const { container } = renderWithProvidersAndRouter(
+      <TitleBoxContainer {...props} />,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/components/TitleBox/__tests__/__snapshots__/TitleBoxContainer.test.tsx.snap b/src/components/TitleBox/__tests__/__snapshots__/TitleBoxContainer.test.tsx.snap
@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MainScreen should render correctly 1`] = `
+exports[`TitleBoxContainer should set the document title 1`] = `
 <div>
   <script
     id="chakra-script"
   >
     !(function(){try{var a=function(c){var v="(prefers-color-scheme: dark)",h=window.matchMedia(v).matches?"dark":"light",r=c==="system"?h:c,o=document.documentElement,s=document.body,l="chakra-ui-light",d="chakra-ui-dark",i=r==="dark";return s.classList.add(i?d:l),s.classList.remove(i?l:d),o.style.colorScheme=r,o.dataset.theme=r,r},n=a,m="light",e="chakra-ui-color-mode",t=localStorage.getItem(e);t?a(t):localStorage.setItem(e,a(m))}catch(a){}})();
   </script>
-  <div>
-    <h1>
-      Main Screen
-    </h1>
+  <div
+    class="css-0"
+  >
+    Test Children
   </div>
   <span
     hidden=""
diff --git a/src/components/TitleBox/index.ts b/src/components/TitleBox/index.ts
@@ -0,0 +1,2 @@
+export { default as TitleBoxContainer } from './TitleBoxContainer';
+export * from './types';
diff --git a/src/components/TitleBox/types.ts b/src/components/TitleBox/types.ts
@@ -0,0 +1,7 @@
+import { BoxProps } from '@chakra-ui/react';
+
+export type TitleBoxProps = {
+  title: string;
+  icon?: string;
+  helmetChildren?: React.ReactNode;
+} & BoxProps;
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1,3 +1,4 @@
 export * from './Theme';
-
 export * from './TypeWriterText';
+export * from './TitleBox';
+export * from './Cursor';
diff --git a/src/hooks/constants.ts b/src/hooks/constants.ts
@@ -0,0 +1 @@
+export const SPRING_SETTING = { damping: 10, stiffness: 100, restDelta: 0.001 };
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -0,0 +1,2 @@
+export { default as useMousePositions } from './useMousePositions';
+export { default as useSpringMousePosition } from './useSpringMousePosition';
diff --git a/src/hooks/useMousePositions.tsx b/src/hooks/useMousePositions.tsx
@@ -0,0 +1,21 @@
+import { useCallback, useEffect, useState } from 'react';
+
+const useMousePositions = () => {
+  const [{ x, y }, setMousePosition] = useState({ x: 0, y: 0 });
+
+  const handleMouseMove = useCallback((event: MouseEvent) => {
+    const { clientX, clientY } = event;
+    setMousePosition({ x: clientX, y: clientY });
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('mousemove', handleMouseMove);
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [handleMouseMove]);
+
+  return { x, y };
+};
+
+export default useMousePositions;
diff --git a/src/hooks/useSpringMousePosition.tsx b/src/hooks/useSpringMousePosition.tsx
@@ -0,0 +1,31 @@
+import { useMotionValue, useSpring, spring, frame } from 'framer-motion';
+import { RefObject, useEffect } from 'react';
+import { SPRING_SETTING } from './constants';
+
+const useSpringMousePosition = (ref: RefObject<HTMLDivElement | null>) => {
+  const xPoint = useMotionValue(0);
+  const yPoint = useMotionValue(0);
+  const x = useSpring(xPoint, SPRING_SETTING);
+  const y = useSpring(yPoint, SPRING_SETTING);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const handlePointerMove = ({ clientX, clientY }: MouseEvent) => {
+      const element = ref.current!;
+
+      frame.read(() => {
+        xPoint.set(clientX - element.offsetLeft - element.offsetWidth / 2);
+        yPoint.set(clientY - element.offsetTop - element.offsetHeight / 2);
+      });
+    };
+
+    window.addEventListener('pointermove', handlePointerMove);
+
+    return () => window.removeEventListener('pointermove', handlePointerMove);
+  }, [ref, xPoint, yPoint]);
+
+  return { x, y };
+};
+
+export default useSpringMousePosition;
diff --git a/src/router/lazyScreen/LazyMainFlowScreen.tsx b/src/router/lazyScreen/LazyMainFlowScreen.tsx
@@ -1,8 +1,7 @@
 import { lazy } from 'react';
 import { LazyComponentProvider } from '@providers';
-import { MainScreen } from '@screens';
 
-const About = lazy(() => import('@screens/mainFlow/MainScreen'));
+const MainScreen = lazy(() => import('@screens/mainFlow/MainScreen'));
 
 export const LazyMainScreen = () => {
   return (
diff --git a/src/router/lazyScreen/__test__/__snapshots__/LazyMainFlowScreen.test.tsx.snap b/src/router/lazyScreen/__test__/__snapshots__/LazyMainFlowScreen.test.tsx.snap
@@ -1,11 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`LazyMainFlowScreen should render lazy about screen 1`] = `
-<div>
-  <div>
-    <h1>
-      Main Screen
-    </h1>
-  </div>
-</div>
-`;
+exports[`LazyMainFlowScreen should render lazy about screen 1`] = `<div />`;
diff --git a/src/screens/index.ts b/src/screens/index.ts
diff --git a/src/screens/mainFlow/MainScreen.tsx b/src/screens/mainFlow/MainScreen.tsx
@@ -1,8 +1,26 @@
+import { Text } from '@chakra-ui/react';
+import { FollowingCursor, TitleBoxContainer } from '@components';
+
 const MainScreen = () => {
   return (
-    <div>
-      <h1>Main Screen</h1>
-    </div>
+    <TitleBoxContainer
+      title={'Amit Raikwar | Portfolio'}
+      bg={'black'}
+      minHeight={'100vh'}
+      display={'flex'}
+    >
+      <FollowingCursor />
+      <Text
+        fontSize={'4xl'}
+        color={'white'}
+        position={'absolute'}
+        top={'50%'}
+        left={'50%'}
+        transform={'translate(-50%, -50%)'}
+      >
+        AMIT Raikwar
+      </Text>
+    </TitleBoxContainer>
   );
 };
 
diff --git a/src/screens/mainFlow/__tests__/MainScreen.test.tsx b/src/screens/mainFlow/__tests__/MainScreen.test.tsx
diff --git a/src/testUtils/index.ts b/src/testUtils/index.ts
@@ -0,0 +1,6 @@
+export {
+  renderWithProviders,
+  renderWithProvidersAndRouter,
+  renderWithRouter,
+  renderHookWithProviders,
+} from './renderUtils';
diff --git a/src/testUtils/renderUtils.tsx b/src/testUtils/renderUtils.tsx
diff --git a/tsconfig.path.json b/tsconfig.path.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default as FollowingCursor } from './Cursor';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export { default as TitleBoxContainer } from './TitleBoxContainer';`
	`2`	`+export * from './types';`