feat(global) project init

app/public/MonacoEditor.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import React, { useState } from 'react';
+
+import { Editor as Monaco } from '@monaco-editor/react';
+import { useTheme } from 'next-themes';
+import { Button } from '@nextui-org/react';
+import { HiOutlineClipboardDocumentList } from 'react-icons/hi2';
+import { toast } from 'react-toastify';
+
+type Props = {
+    language: string,
+    defaultValue: string
+}
+
+const MonacoEditor = (props: Props) => {
+    const { theme } = useTheme();
+    const [ editorValue, setEditorValue ] = useState(props.defaultValue);
+    console.log(editorValue);
+    return (
+        <div className={ 'rounded-2xl overflow-hidden shadow-2xl relative' }>
+            <Monaco
+                height="75vh"
+                defaultLanguage={ props.language }
+                theme={ theme === 'light' ? 'light' : 'vs-dark' }
+                defaultValue={ props.defaultValue }
+                onChange={ (val) => setEditorValue(val as string) }
+            />
+            <div className={ 'absolute bottom-4 right-4 z-10' }>
+                <Button
+                    variant={ 'light' }
+                    isIconOnly
+                    onClick={ () => {
+                        navigator.clipboard.writeText(editorValue);
+                        toast.success('Copied to Clipboard');
+                    } }
+                >
+                    <HiOutlineClipboardDocumentList size={ 20 } />
+                </Button>
+            </div>
+        </div>
+    );
+};
+export default MonacoEditor;

app/public/hooks/screenSizeTrigger.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+
+const screenSize = new Map<string, number>(
+    [
+        [ 'sm', 640 ],
+        [ 'md', 768 ],
+        [ 'lg', 1024 ],
+        [ 'xl', 1280 ],
+        [ '2xl', 2536 ]
+    ]
+);
+
+export const useScreenSizeTrigger = (size: number | string) => {
+    const criticalSize = (typeof size === 'string') ? (screenSize.get(size) ?? 768) : size;
+
+    const [ isCritical, setIsCritical ] = useState(false);
+    useEffect(() => {
+        const updateMobileWidth = () => {
+            if (window.innerWidth < criticalSize) {
+                setIsCritical(true);
+            } else {
+                setIsCritical(false);
+            }
+        };
+        updateMobileWidth();
+        window.addEventListener('resize', updateMobileWidth);
+        return () => {
+            window.removeEventListener('resize', updateMobileWidth);
+        };
+
+    });
+
+    return isCritical;
+
+};

app/public/hooks/useScroll.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+
+const useScroll = () => {
+    const [ isScrolledX, setIsScrolledX ] = useState(false);
+    const [ isScrolledY, setIsScrolledY ] = useState(false);
+    const [ scrollX, setScrollX ] = useState(0);
+    const [ scrollY, setScrollY ] = useState(0);
+
+    const handleScroll = () => {
+        const x = window.scrollX;
+        const y = window.scrollY;
+
+        setScrollX(x);
+        setScrollY(y);
+        setIsScrolledX(x > 0);
+        setIsScrolledY(y > 0);
+    };
+
+    useEffect(() => {
+        window.addEventListener('scroll', handleScroll);
+
+        // Cleanup listener on unmount
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+
+    return [ isScrolledX, isScrolledY, scrollX, scrollY ];
+};
+
+export default useScroll;