Merge pull request 'upgrades' (#18) from upgrades into main

Reviewed-on: #18

.github/workflows/main.yml

@@ -17,11 +17,9 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x, 20.x, 22.x]
+        node-version: [20.x, 22.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
     steps:
-      - uses: actions/checkout@v4
-
       - name: "Base requirements"
         run: |
           # packages
@@ -30,13 +28,15 @@ jobs:
           ansible-galaxy collection install community.general --force
           ansible-galaxy collection install ansible.posix --force
 
+      - uses: actions/checkout@v4
+
       # Corepack
       - name: Install Corepack
         run: npm install -g corepack
       - name: "Enable Corepack"
         run: corepack enable
       - name: "Install Yarn"
-        run: corepack prepare yarn@4.9.2 --activate
+        run: corepack prepare yarn@latest --activate
 
       # YARN
       - name: "Install Dependencies"

.github/workflows/vercel-preview.yaml

@@ -4,8 +4,8 @@ env:
   VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
 on:
   # Trigger the workflow on push or pull request,
-  push:
+  # push:
-    branches: [main, stable]
+  #   branches: [main, stable]
   pull_request:
     # These types of PRs
     types: [opened, synchronize, reopened]
@@ -13,6 +13,26 @@ jobs:
   Deploy-Preview:
     runs-on: ubuntu-24.04
     steps:
+      # Setup environment
+      - name: "Base requirements"
+        run: |
+          # packages
+          apk update && apk add --no-cache git docker docker-compose nodejs gpg openssh npm ansible
+          # ansible collections
+          ansible-galaxy collection install community.general --force
+          ansible-galaxy collection install ansible.posix --force
+
+      - uses: actions/checkout@v2
+
+      # Corepack
+      - name: Install Corepack
+        run: npm install -g corepack
+      - name: "Enable Corepack"
+        run: corepack enable
+      - name: "Install Yarn"
+        run: corepack prepare yarn@latest --activate
+
+      # Vercel
       - uses: actions/checkout@v2
       - name: "Install Vercel CLI"
         run: npm install --global vercel@latest

.github/workflows/vercel-production.yaml

@@ -10,8 +10,28 @@ on:
 jobs:
   Deploy-Production:
     runs-on: ubuntu-24.04
+
     steps:
+      # Setup environment
+      - name: "Base requirements"
+        run: |
+          # packages
+          apk update && apk add --no-cache git docker docker-compose nodejs gpg openssh npm ansible
+          # ansible collections
+          ansible-galaxy collection install community.general --force
+          ansible-galaxy collection install ansible.posix --force
+
       - uses: actions/checkout@v2
+
+      # Corepack
+      - name: Install Corepack
+        run: npm install -g corepack
+      - name: "Enable Corepack"
+        run: corepack enable
+      - name: "Install Yarn"
+        run: corepack prepare yarn@latest --activate
+
+      # Vercel
       - name: "Install Vercel CLI"
         run: npm install --global vercel@latest
       - name: "Pull Vercel Environment Information"

eslint.config.mjs

@@ -1,34 +1,41 @@
-import { dirname } from "path";
+import { defineConfig, globalIgnores } from "eslint/config";
-import { fileURLToPath } from "url";
+import nextVitals from "eslint-config-next/core-web-vitals";
-import { FlatCompat } from "@eslint/eslintrc";
-import jsxA11y from "eslint-plugin-jsx-a11y";
 import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
 import reactPlugin from "eslint-plugin-react";
-import reactHooks from "eslint-plugin-react-hooks";
 import eslint from "@eslint/js";
 import tseslint from "typescript-eslint";
+import jsxA11y from "eslint-plugin-jsx-a11y";
+import reactHooks from "eslint-plugin-react-hooks";
 
-const __filename = fileURLToPath(import.meta.url);
+const eslintConfig = defineConfig([
-const __dirname = dirname(__filename);
+  ...nextVitals,
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname
-});
-
-const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
   eslintPluginPrettierRecommended,
   reactPlugin.configs.flat.recommended,
   reactPlugin.configs.flat["jsx-runtime"],
   eslint.configs.recommended,
+  // tseslint.configs.recommended,
+  // tseslint.configs.stylistic,
+  // reactHooks.configs.flat.recommended,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+    "types/**"
+  ]),
   {
+    rules: {
+      "@typescript-eslint/no-empty-object-type": "off"
+    },
     plugins: {
       jsxA11y: jsxA11y.configs.strict,
-      "react-hooks": reactHooks,
+      reactHooks: reactHooks.configs.recommended,
       tseslint: tseslint.configs.recommended,
-      "tseslint-styles": tseslint.configs.stylistic
+      tseslintStyle: tseslint.configs.stylisticTypeChecked
     }
   }
-];
+]);
 
 export default eslintConfig;

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference path="./.next/types/routes.d.ts" />
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package.json

@@ -1,49 +1,43 @@
 {
-  "name": "lucid-creations-website",
+  "name": "werewolf-kid-creations-website",
-  "homepage": "https://new.lucidcreations.media/",
+  "homepage": "https://werewolfkid.monster/",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
-  "description": "This is a personal website that I have no specific goals for other than to have fun and share things that I want to.",
-  "author": {
-    "name": "Lucid Creations Media",
-    "url": "https://lucidcreations.media",
-    "email": "social@lucidcreations.media"
-  },
   "license": "MIT",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint .",
     "pretty": "prettier --write ."
   },
   "dependencies": {
-    "@chakra-ui/react": "^3.27.0",
+    "@chakra-ui/react": "^3.30.0",
     "@emotion/react": "^11.14.0",
-    "next": "15.5.3",
+    "next": "16.0.7",
     "next-themes": "^0.4.6",
-    "react": "^19.1.1",
+    "react": "^19.2.1",
-    "react-dom": "^19.1.1",
+    "react-dom": "^19.2.1",
     "react-icons": "^5.5.0"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/eslintrc": "^3.3.3",
-    "@eslint/js": "^9.35.0",
+    "@eslint/js": "^9.39.1",
-    "@types/node": "^24.5.2",
+    "@types/node": "^24.10.1",
-    "@types/react": "^19.1.13",
+    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.1.9",
+    "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.44.0",
+    "@typescript-eslint/eslint-plugin": "^8.48.1",
-    "@typescript-eslint/parser": "^8.44.0",
+    "@typescript-eslint/parser": "^8.48.1",
-    "eslint": "^9.35.0",
+    "eslint": "^9.39.1",
-    "eslint-config-next": "15.5.3",
+    "eslint-config-next": "16.0.7",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
-    "prettier": "3.6.2",
+    "prettier": "3.7.4",
-    "typescript": "^5.9.2",
+    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.44.0"
+    "typescript-eslint": "^8.48.1"
   },
-  "packageManager": "yarn@4.9.2"
+  "packageManager": "yarn@4.12.0"
 }

public/images/logo/favicon/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "MyWebSite",
+  "short_name": "MySite",
+  "icons": [
+    {
+      "src": "/images/logo/favicon/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/images/logo/favicon/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

src/app/layout.tsx

@@ -1,11 +1,89 @@
 import React from "react";
 import { Provider } from "@/components/ui/provider";
+import { metadata } from "./page";
 
 export default function RootLayout(props: { children: React.ReactNode }) {
   const { children } = props;
+
+  const url = "https://werewolfkid.monster";
+  const img = "/images/logo/favicon/favicon.ico";
+  const domain = "werewolfkid.monster";
+
   return (
     <html suppressHydrationWarning>
-      <link rel="icon" href="/images/logo/favicon/favicon.ico" sizes="any" />
+      <meta
+        property="title"
+        content={
+          typeof metadata.title === "string"
+            ? metadata.title
+            : "error with metadata"
+        }
+      />
+      <meta name="theme-color" content="#00ffff" />
+      <link rel="icon" href={img} sizes="any" />
+      <meta property="image" content="/images/logo/new-logo.png" />
+      <meta property="image:type" content="image/png" />
+      <meta property="image:width" content="653px" />
+      <meta
+        property="og:title"
+        content={
+          typeof metadata.title === "string"
+            ? metadata.title
+            : "error with metadata"
+        }
+      />
+      <meta
+        property="og:description"
+        content={
+          typeof metadata.description === "string"
+            ? metadata.description
+            : "error with metadata"
+        }
+      />
+      <meta property="og:url" content={url} />
+      <meta property="og:type" content="website" />
+      <meta property="og:image" content="/images/logo/new-logo.png" />
+      <meta property="og:image:type" content="image/png" />
+      <meta property="og:image:width" content="653px" />
+      <meta property="og:image:height" content="651px" />
+      <meta property="image:height" content="651px" />
+      <meta
+        name="twitter:title"
+        content={
+          typeof metadata.title === "string"
+            ? metadata.title
+            : "error with metadata"
+        }
+      />
+      <meta property="twitter:domain" content={domain} />
+      <meta property="twitter:url" content={url} />
+      <meta
+        name="twitter:description"
+        content={
+          typeof metadata.description === "string"
+            ? metadata.description
+            : "error with metadata"
+        }
+      />
+      <meta
+        name="twitter:image"
+        content="https://werewolfkid.monster/images/logo/new-logo.png"
+      />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta httpEquiv="content-language" content="en_US" />
+      <meta charSet="UTF-8" />
+      <link
+        rel="icon"
+        type="image/svg+xml"
+        href="/images/logo/favicon/favicon.svg"
+      />
+      <link rel="shortcut icon" href="/images/logo/favicon/favicon.ico" />
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href="/images/logo/favicon/apple-touch-icon.png"
+      />
+      <link rel="manifest" href="/images/logo/favicon/site.webmanifest" />
       <body>
         <Provider>{children}</Provider>
       </body>

src/app/page.tsx

@@ -1,7 +1,24 @@
+import type { Metadata } from "next";
 import { Button, Heading, HStack, Link, Text, VStack } from "@chakra-ui/react";
-import newLogo from "../../public/images/logo/New Logo (transparent).png";
+import newLogo from "../../public/images/logo/new-logo.png";
 import Image from "next/image";
 
+export const metadata: Metadata = {
+  title: "Werwolf Kid Creations Website",
+  description:
+    "The LCM website and eShop has been temporarily discontinued due to various external factors that interfered with my ability to focus and work on my creative passions. Along with some legal challenges that I hope to get sorted soon. This website going to serve as a bio, place to find social links, host art of Lucid, and embeds from Gumroad for the 3D textures. I hope to relaunch the eShop on this domain in the future as well."
+};
+
+const colorScheme = {
+  primary: "cyan",
+  secondary: "cyan.600",
+  bg: "teal.950",
+  button: "#5bbdbc",
+  buttonText: "gray.950"
+};
+
+const socialSubdomain = "https://social.werewolfkid.monster/";
+
 export default function Home() {
   return (
     <VStack
@@ -11,6 +28,7 @@ export default function Home() {
       spaceY={12}
       pt="5vh"
       pb="20vh"
+      bg={colorScheme.bg}
     >
       <VStack spaceY={2}>
         <Image height={250} src={newLogo} alt="New LCM logo" />
@@ -18,7 +36,7 @@ export default function Home() {
           lineHeight="1"
           w="80vw"
           as="h1"
-          color="cyan"
+          color={colorScheme.primary}
           fontSize="4rem"
           textAlign="center"
         >
@@ -28,7 +46,7 @@ export default function Home() {
           lineHeight="1"
           w="80vw"
           as="h2"
-          color="cyan.600"
+          color={colorScheme.secondary}
           fontSize="2rem"
           textAlign="center"
         >
@@ -47,22 +65,22 @@ export default function Home() {
         </Text>
         <Text w="100%" textAlign="left" fontSize="lg">
           {
-            "Last year I faced a layoff and haven't been able to get back into my field. I can no longer afford the costs of hosting this website on it's current platform. The website generated no sales and thus I had to make the difficult decision to shut the site down for now."
+            "Last year I faced a layoff and haven't been able to get back into my field. I can no longer afford the costs of hosting this website on its current platform. The website generated no sales and thus I had to make the difficult decision to shut the site down for now."
           }
         </Text>
         <Text w="100%" textAlign="left" fontSize="lg">
           {
-            "Another contributing factor is the fear of losing access to another payment processor. LCM was banned from Square and they gave no reason. It's probably because of \"adult material\". On top of that, especially with it getting in the spotlight again, my state is starting it's own ID check law for adult websites. I cannot catch a break. I have no way to do that since I already struggle to pay for hosting so it's probably a good time to just take a break from this endeavour for now."
+            "Another contributing factor is the fear of losing access to another payment processor. LCM was banned from Square and they gave no reason. It's probably because of \"adult material\". On top of that, especially with it getting in the spotlight again, my state is starting its own ID check law for adult websites. I cannot catch a break. I have no way to do that since I already struggle to pay for hosting so it's probably a good time to just take a break from this endeavour for now."
           }
         </Text>
         <Text w="100%" textAlign="left" fontSize="lg">
           {
-            "I have no time frame for when or if I will reopen the eShop. I do wish to at some point, on a more modern platform. I was originally expecting to be very busy till around the end of November or early December. However, my old job; which I wanted to work alongside starting my new job, let me go for some nonsense reasons that isn't pertinent enough to mention here."
+            "I have no time frame for when or if I will reopen the eShop. I do wish to at some point, on a more modern platform. I was originally expecting to be very busy till around the end of November or early December. However, my old job; which I wanted to work alongside starting my new job, let me go for some nonsense reasons that aren't pertinent enough to mention here."
           }
         </Text>
         <Text w="100%" textAlign="left" fontSize="lg">
           {
-            'Since LCM was not registered as an LLC yet I have decided to rebranding the company one last time. I have been enjoying hearing/seeing everyone refer to me as wolf/werewolf so much that I want to keep it as Lucid\'s base/default form. To align with this change I am trying out the name "Werewolf Kid Creations". Lucid Creations Media still works, but I really want to lean into the new base form. I think it is time to flip to a new chapter in my life just like when I change my original fursona and online alias.'
+            'Since LCM was not registered as an LLC yet I have decided to rebrand the company one last time. I have been enjoying hearing/seeing everyone refer to me as wolf/werewolf so much that I want to keep it as Lucid\'s base/default form. To align with this change I am trying out the name "Werewolf Kid Creations". Lucid Creations Media still works, but I really want to lean into the new base form. I think it is time to flip to a new chapter in my life just like when I change my original fursona and online alias.'
           }
         </Text>
         <Text w="100%" textAlign="left" fontSize="lg">
@@ -72,7 +90,7 @@ export default function Home() {
         </Text>
         <Text w="100%" textAlign="left" fontSize="lg">
           {
-            "My current priorities are to test this rebrand, update usernames to match my new alias, and work on making the WerewolfKid.monster website. Which is going to serve the same purpose that the Kobold Kid website was going to serve. As a bio, place to find social links, art of Lucid, and embeds from gumroad for the 3D textures. I hope to relaunch the eShop on this domain too with a new platform if I can figure out the legal hurdles of doing all of that."
+            "My current priorities are to test this rebrand, update usernames to match my new alias, and work on making the WerewolfKid.monster website. Which is going to serve the same purpose that the Kobold Kid website was going to be: a bio, place to find social links, art of Lucid, and embeds from Gumroad for the 3D textures. I hope to relaunch the eShop on this domain too with a new platform if I can figure out the legal hurdles of doing all of that."
           }
         </Text>
       </VStack>
@@ -80,7 +98,7 @@ export default function Home() {
       <VStack spaceY={6} w="80vw">
         <Heading
           as="h3"
-          color="cyan"
+          color={colorScheme.primary}
           fontSize="2.5rem"
           textAlign="center"
           lineHeight="1"
@@ -89,20 +107,20 @@ export default function Home() {
         </Heading>
 
         <HStack gap="6" wrap="wrap" justifyContent="center">
-          <Button variant="solid" bgColor="teal" fontSize="xl">
+          <Link
-            <Link
+            target="_blank"
-              target="_blank"
+            color={colorScheme.buttonText}
-              color="whiteAlpha.950"
+            href={`${socialSubdomain}gumroad`}
-              href="http://social.werewolfkid.monster/gumroad/"
+          >
-            >
+            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
               {"Gumroad"}
-            </Link>
+            </Button>
-          </Button>
+          </Link>
         </HStack>
 
         <Heading
-          as="h2"
+          as="h3"
-          color="cyan"
+          color={colorScheme.primary}
           fontSize="2.5rem"
           textAlign="center"
           lineHeight="1"
@@ -111,38 +129,38 @@ export default function Home() {
         </Heading>
 
         <HStack gap="6" wrap="wrap" justifyContent="center">
-          <Button variant="solid" bgColor="teal" fontSize="xl">
+          <Link
-            <Link
+            target="_blank"
-              target="_blank"
+            color={colorScheme.buttonText}
-              color="whiteAlpha.950"
+            href="https://community.werewolfkid.monster/"
-              href="https://community.lucidcreations.media/"
+          >
-            >
+            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
               {"The Cove"}
-            </Link>
+            </Button>
-          </Button>
+          </Link>
-          <Button variant="solid" bgColor="teal" fontSize="xl">
+          <Link
-            <Link
+            target="_blank"
-              target="_blank"
+            color={colorScheme.buttonText}
-              color="whiteAlpha.950"
+            href="https://vrchat.com/home/group/grp_781bbe4b-51ec-4025-a14f-cf23ced90507"
-              href="https://vrchat.com/home/group/grp_781bbe4b-51ec-4025-a14f-cf23ced90507"
+          >
-            >
+            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
               {"Dreamy Drove"}
-            </Link>
+            </Button>
-          </Button>
+          </Link>
-          <Button variant="solid" bgColor="teal" fontSize="xl">
+          <Link
-            <Link
+            target="_blank"
-              target="_blank"
+            color={colorScheme.buttonText}
-              color="whiteAlpha.950"
+            href={`${socialSubdomain}discord`}
-              href="http://social.werewoldkid.monster/discord"
+          >
-            >
+            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
               {"Discord Server"}
-            </Link>
+            </Button>
-          </Button>
+          </Link>
         </HStack>
 
         <Heading
-          as="h4"
+          as="h3"
-          color="cyan"
+          color={colorScheme.primary}
           fontSize="2.5rem"
           textAlign="center"
           lineHeight="1"
@@ -151,38 +169,29 @@ export default function Home() {
         </Heading>
 
         <HStack gap="6" wrap="wrap" justifyContent="center">
-          <Button variant="solid" bgColor="teal" fontSize="xl">
+          <Link
-            <Link
+            target="_blank"
-              target="_blank"
+            color={colorScheme.buttonText}
-              color="whiteAlpha.950"
+            href={`${socialSubdomain}bsky`}
-              href="https://werewolfkid.monster/"
+          >
-            >
+            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
-              {"Werewolf Kid Website"}
-            </Link>
-          </Button>
-          <Button variant="solid" bgColor="teal" fontSize="xl">
-            <Link
-              target="_blank"
-              color="whiteAlpha.950"
-              href="http://social.werwolfkid.com/bsky"
-            >
               {"Bsky"}
-            </Link>
+            </Button>
-          </Button>
+          </Link>
-          <Button variant="solid" bgColor="teal" fontSize="xl">
+          <Link
-            <Link
+            target="_blank"
-              target="_blank"
+            color={colorScheme.buttonText}
-              color="whiteAlpha.950"
+            href={`${socialSubdomain}fa`}
-              href="http://social.werwolfkid.com/fa"
+          >
-            >
+            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
               {"FurAffinity"}
-            </Link>
+            </Button>
-          </Button>
+          </Link>
         </HStack>
 
         <Heading
-          as="h5"
+          as="h3"
-          color="cyan"
+          color={colorScheme.primary}
           fontSize="2.5rem"
           textAlign="center"
           lineHeight="1"
@@ -191,33 +200,33 @@ export default function Home() {
         </Heading>
 
         <HStack gap="6" wrap="wrap" justifyContent="center">
-          <Button variant="solid" bgColor="teal" fontSize="xl">
+          <Link
-            <Link
+            target="_blank"
-              target="_blank"
+            color={colorScheme.buttonText}
-              color="whiteAlpha.950"
+            href={`${socialSubdomain}twitch`}
-              href="http://social.werewolfkid.monster/twitch"
+          >
-            >
+            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
               {"Twitch"}
-            </Link>
+            </Button>
-          </Button>
+          </Link>
-          <Button variant="solid" bgColor="teal" fontSize="xl">
+          <Link
-            <Link
+            target="_blank"
-              target="_blank"
+            color={colorScheme.buttonText}
-              color="whiteAlpha.950"
+            href={`${socialSubdomain}yt-vods`}
-              href="http://social.werewolfkid.monster/yt-vods"
+          >
-            >
+            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
               {"YouTube VODs"}
-            </Link>
+            </Button>
-          </Button>
+          </Link>
-          <Button variant="solid" bgColor="teal" fontSize="xl">
+          <Link
-            <Link
+            target="_blank"
-              target="_blank"
+            color={colorScheme.buttonText}
-              color="whiteAlpha.950"
+            href={`${socialSubdomain}yt-archives`}
-              href="http://social.werewolfkid.monster/yt-archives"
+          >
-            >
+            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
               {"YouTube Archives"}
-            </Link>
+            </Button>
-          </Button>
+          </Link>
         </HStack>
       </VStack>
     </VStack>

src/components/ui/color-mode.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-empty-object-type */
-/* eslint-disable prettier/prettier */
 /* eslint-disable no-unused-vars */
 "use client";
 
@@ -10,7 +8,7 @@ import type { ThemeProviderProps } from "next-themes";
 import * as React from "react";
 import { LuMoon, LuSun } from "react-icons/lu";
 
-export interface ColorModeProviderProps extends ThemeProviderProps { }
+export interface ColorModeProviderProps extends ThemeProviderProps {}
 
 export function ColorModeProvider(props: ColorModeProviderProps) {
   return (
@@ -49,7 +47,7 @@ export function ColorModeIcon() {
   return colorMode === "dark" ? <LuMoon /> : <LuSun />;
 }
 
-interface ColorModeButtonProps extends Omit<IconButtonProps, "aria-label"> { }
+interface ColorModeButtonProps extends Omit<IconButtonProps, "aria-label"> {}
 
 export const ColorModeButton = React.forwardRef<
   HTMLButtonElement,

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ESNext",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,7 +15,7 @@
     "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -19,9 +23,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
-  "exclude": ["node_modules"]
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }