feat(global) project init

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# lock files
+/package-lock.json
+
+# idea
+.idea

Components/ThemeSwitcher.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { useTheme } from 'next-themes';
+import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@nextui-org/react';
+import { MdOutlineDarkMode, MdOutlineDesktopWindows, MdOutlineLightMode } from 'react-icons/md';
+
+const switcherElements = new Map(
+    [
+        [ 'dark', {
+            'display_name': 'Dark Mode',
+            'icon': <MdOutlineDarkMode />
+        } ],
+        [ 'light', {
+            'display_name': 'Light Mode',
+            'icon': <MdOutlineLightMode />
+        } ],
+        [ 'system', {
+            'display_name': 'Follow System',
+            'icon': <MdOutlineDesktopWindows />
+        } ]
+    ]
+);
+
+function ThemeSwitcher() {
+    const [ mounted, setMounted ] = useState(false);
+    const { theme, setTheme } = useTheme();
+
+    const [ currTheme, setCurrTheme ] = useState(new Set([ theme as string ]));
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    if (!mounted) {
+        return null;
+    }
+
+    return (
+        <div className={ `` }>
+            <Dropdown backdrop={ 'blur' }>
+                <DropdownTrigger>
+                    <Button
+                        variant={ 'flat' }
+                        aria-label={ 'Theme Trigger' }
+                        fullWidth
+                        isIconOnly
+                    >
+                        { switcherElements.get(currTheme.values().next().value as string)?.icon }
+                        <p className={ 'hidden lg:block' }>
+                            { switcherElements.get(currTheme.values().next().value as string)?.display_name }
+                        </p>
+                    </Button>
+                </DropdownTrigger>
+
+                <DropdownMenu
+                    aria-label={ 'Toggle Theme' }
+                    variant={ 'flat' }
+                    selectionMode={ 'single' }
+                    selectedKeys={ currTheme }
+                    onSelectionChange={ ({ anchorKey }) => {
+                        setCurrTheme(new Set([ anchorKey as string ]));
+                        setTheme(anchorKey as string);
+                    } }
+
+                >
+                    <DropdownItem
+                        key={ 'light' }
+                        startContent={ <MdOutlineLightMode /> }>
+                        Light Mode
+                    </DropdownItem>
+                    <DropdownItem
+                        key={ 'dark' }
+                        startContent={ <MdOutlineDarkMode /> }
+                    >
+                        Dark Mode
+                    </DropdownItem>
+                    <DropdownItem
+                        key={ 'system' }
+                        startContent={ <MdOutlineDesktopWindows /> }
+                    >
+                        Follow System
+                    </DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+        </div>
+    );
+}
+
+export default ThemeSwitcher;

README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

app/Footer.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Link from 'next/link';
+import { IoLogoGithub } from 'react-icons/io5';
+
+const Footer = () => {
+    return (
+        <div className={ 'min-w-full flex justify-center' }>
+            <div className={ 'w-full md:w-[80%]' }>
+                <div className={ `p-5 mb-4` }>
+                    <div className={ `h-1 w-20 bg-zinc-500 dark:bg-zinc-400 mb-3` }></div>
+                    <p>
+                        © 2024-{ new Date().getFullYear() } Lumither Tao
+                    </p>
+                    <p>
+                        Powered by Next.js, built with passion and love
+                    </p>
+                    <Link
+                        href={ `https://github.com/Lumither/` }
+                        aria-label={ `repo link` }
+                    >
+                        <IoLogoGithub className={ `mt-1` } />
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Footer;

app/Header.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import React from 'react';
+import ThemeSwitcher from '@/Components/ThemeSwitcher';
+
+const Header = () => {
+
+    return (
+        <div>
+            <div
+                className={ 'h-16 fixed backdrop-blur w-full z-50 transition-colors border-b-[1px] border-neutral-200 dark:border-neutral-700' }
+            >
+
+                <div className={ 'p-3 px-5' }>
+                    <div className={ 'flex flex-row items-center justify-between align-baseline' }>
+                        <div className={ 'font-bold text-2xl' }>
+                            LMTLab
+                        </div>
+                        <ThemeSwitcher />
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    );
+};
+export default Header;

app/globals.css

@@ -0,0 +1,26 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html.light {
+    --background: #ffffff;
+    --foreground: #171717;
+}
+
+html {
+    --background: #282830;
+    --foreground: #ededed;
+}
+
+body {
+    color: var(--foreground);
+    background: var(--background);
+    transition: background 0.3s, color 0.3s;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+    .text-balance {
+        text-wrap: balance;
+    }
+}

app/jsonparser/page.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import MonacoEditor from '@/app/public/MonacoEditor';
+
+const Page = () => {
+    return (
+        <>
+            <div
+                className={ 'p-2 lg:p-20 h-full w-full' }
+            >
+                <MonacoEditor defaultValue={ '{}' } language={ 'json' } />
+            </div>
+        </>
+    );
+};
+export default Page;

app/layout.tsx

@@ -0,0 +1,44 @@
+import type { Metadata } from 'next';
+import './globals.css';
+import React from 'react';
+import Footer from '@/app/Footer';
+import Header from '@/app/Header';
+import { ThemeProvider } from '@/app/theme-provider';
+import NextUiProvider from '@/app/nextui-provider';
+import ToastProvider from '@/app/toastify-provider';
+
+export const metadata: Metadata = {
+    title: 'LMTLab',
+    description: 'A little toy box'
+};
+
+export default function RootLayout({
+    children
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return (
+        <html lang="en">
+        <body
+            className={ `antialiased` }
+        >
+        <ThemeProvider
+            attribute={ 'class' }
+            defaultTheme={ 'system' }
+        >
+            <NextUiProvider>
+                <ToastProvider>
+                    <div className={ 'min-h-screen relative' }>
+                        <Header />
+                        <div className={ 'pt-16 h-full w-full' }>
+                            { children }
+                        </div>
+                    </div>
+                    <Footer />
+                </ToastProvider>
+            </NextUiProvider>
+        </ThemeProvider>
+        </body>
+        </html>
+    );
+}

app/nextui-provider.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { NextUIProvider } from '@nextui-org/react';
+import React from 'react';
+
+export default function NextuiProvider({ children }: { children: React.ReactNode }) {
+    return (
+        <NextUIProvider>
+            { children }
+        </NextUIProvider>
+    );
+}

app/page.tsx

@@ -0,0 +1,54 @@
+import { Card, CardBody } from '@nextui-org/card';
+import Link from 'next/link';
+
+const urlList = [
+    {
+        name: 'Json Parser',
+        desc: 'Parse a Json file, with formatter and syntax highlighting',
+        url: '/jsonparser'
+    }
+];
+
+export default function Home() {
+
+    const listLength = urlList.length;
+    const listMaxIdx = listLength - 1;
+    const listIsOdd = listLength % 2 !== 0;
+
+    return (
+        <div className={ 'flex w-full items-center justify-center' }>
+            <div className={ 'p-5 md:p-16 max-w-[1536px] w-full' }>
+                <div className={ 'w-full' }>
+                    <ul className={ 'grid grid-cols-2 gap-x-6 gap-y-3 ' }>
+                        { urlList.map((entry, id) => (
+                            <li key={ id }
+                                className={ (id === listMaxIdx && listIsOdd) ? 'col-span-2 flex justify-center' : 'col-span-2 md:col-span-1' }
+                            >
+                                <Card
+                                    isPressable
+                                    isHoverable
+                                    as={ Link }
+                                    href={ entry.url }
+                                    className={ 'w-full h-full' }
+                                >
+                                    <CardBody className={ 'p-6 h-full' }>
+                                        <div className={ 'flex flex-col h-full' }>
+                                            <div className={ 'text-2xl font-bold' }>{ entry.name }</div>
+                                            <div className={ '' }>{ entry.desc }</div>
+                                            <div className={ 'relative h-full mt-8' }>
+                                                <div
+                                                    className={ 'text-default-500 dark:text-default-500 absolute bottom-0' }>
+                                                    { `https://lab.lmt.moe${ entry.url }` }
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </CardBody>
+                                </Card>
+                            </li>
+                        )) }
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+}

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;

app/theme-provider.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import * as React from 'react';
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+import { type ThemeProviderProps } from 'next-themes/dist/types';
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+    return <NextThemesProvider { ...props }>{ children }</NextThemesProvider>;
+}

app/toastify-provider.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import 'react-toastify/dist/ReactToastify.css';
+// import '../../app/globals.css';
+import { ToastContainer } from 'react-toastify';
+import React from 'react';
+
+interface ToastProviderProps {
+    children: React.ReactNode;
+}
+
+export default function ToastProvider({ children }: ToastProviderProps) {
+
+    return (
+        <>
+            { children }
+            <ToastContainer
+                position="bottom-right"
+                autoClose={ 2000 }
+                hideProgressBar={ false }
+                newestOnTop={ false }
+                closeOnClick
+                rtl={ false }
+                pauseOnFocusLoss
+                draggable
+                pauseOnHover
+                theme="dark"
+            />
+        </>
+    );
+}

next.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+// import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
+
+const nextConfig = {
+    output: 'export'
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "lmtlab",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@monaco-editor/react": "^4.6.0",
+    "@nextui-org/react": "^2.4.8",
+    "framer-motion": "^11.11.0",
+    "next": "14.2.14",
+    "next-themes": "^0.3.0",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-icons": "^5.3.0",
+    "react-toastify": "^10.0.6"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.14",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+    plugins: {
+        tailwindcss: {}
+    }
+};
+
+export default config;

tailwind.config.ts

@@ -0,0 +1,22 @@
+import type { Config } from 'tailwindcss';
+import { nextui } from '@nextui-org/react';
+
+const config: Config = {
+    content: [
+        './pages/**/*.{js,ts,jsx,tsx,mdx}',
+        './components/**/*.{js,ts,jsx,tsx,mdx}',
+        './app/**/*.{js,ts,jsx,tsx,mdx}',
+        './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
+    ],
+    theme: {
+        extend: {
+            colors: {
+                background: 'var(--background)',
+                foreground: 'var(--foreground)'
+            }
+        }
+    },
+    darkMode: 'class',
+    plugins: [ nextui() ]
+};
+export default config;

tsconfig.json

@@ -0,0 +1,39 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}