commit 3556eaed5e1468e39c00f4c6f59795c4b7b414e4 Author: Lumither Tao Date: Sat Oct 12 23:24:37 2024 -0700 feat(global) project init diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..3722418 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": ["next/core-web-vitals", "next/typescript"] +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..959ee3c --- /dev/null +++ b/.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 diff --git a/Components/ThemeSwitcher.tsx b/Components/ThemeSwitcher.tsx new file mode 100644 index 0000000..dc1053d --- /dev/null +++ b/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': + } ], + [ 'light', { + 'display_name': 'Light Mode', + 'icon': + } ], + [ 'system', { + 'display_name': 'Follow System', + 'icon': + } ] + ] +); + +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 ( +

+ + + + + + { + setCurrTheme(new Set([ anchorKey as string ])); + setTheme(anchorKey as string); + } } + + > + }> + Light Mode + + } + > + Dark Mode + + } + > + Follow System + + + +

+ ); +} + +export default ThemeSwitcher; diff --git a/README.md b/README.md new file mode 100644 index 0000000..e215bc4 --- /dev/null +++ b/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. diff --git a/app/Footer.tsx b/app/Footer.tsx new file mode 100644 index 0000000..2b0bcc8 --- /dev/null +++ b/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 ( +

+ Powered by Next.js, built with passion and love +

+ + + +

+ ); +}; + +export default Footer; diff --git a/app/Header.tsx b/app/Header.tsx new file mode 100644 index 0000000..339753f --- /dev/null +++ b/app/Header.tsx @@ -0,0 +1,27 @@ +'use client'; + +import React from 'react'; +import ThemeSwitcher from '@/Components/ThemeSwitcher'; + +const Header = () => { + + return ( +

+ +

+ LMTLab +

+ +

+ ); +}; +export default Header; diff --git a/app/favicon.ico b/app/favicon.ico new file mode 100644 index 0000000..718d6fe Binary files /dev/null and b/app/favicon.ico differ diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..f3bd93b --- /dev/null +++ b/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; + } +} diff --git a/app/jsonparser/page.tsx b/app/jsonparser/page.tsx new file mode 100644 index 0000000..150cb20 --- /dev/null +++ b/app/jsonparser/page.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import MonacoEditor from '@/app/public/MonacoEditor'; + +const Page = () => { + return ( + <> +

+ +

+ + ); +}; +export default Page; diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..3f337ed --- /dev/null +++ b/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 ( + + + + + +

+ { children } +