Startseite und Kabelüberwachung

2024-09-23 12:36:54 +02:00
parent c9e55dd66c
commit 067d2e0200
11 changed files with 216 additions and 173 deletions
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,3 +1,4 @@
+/* global.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;
--- a/app/kabelueberwachung/page.jsx
+++ b/app/kabelueberwachung/page.jsx
@@ -1,5 +1,6 @@
+"use client"; // Ganz oben hinzufügen
 import React, { useState } from "react";
-import Layout from "../components/Layout";
+import Layout from "../layout"; // Korrigierter Pfad zu Layout

 function Kabelueberwachung() {
  const [activeTab, setActiveTab] = useState(1);
@@ -14,8 +15,6 @@ function Kabelueberwachung() {
  return (
    <Layout>
      <div className="bg-gray-100 flex-1 p-4 overflow-hidden">
-        {" "}
-        {/* overflow-hidden hinzugefügt */}
        {/* Tabs */}
        <ul className="flex border-b border-gray-200">
          {racks.map((rack) => (
@@ -40,8 +39,6 @@ function Kabelueberwachung() {
        </ul>
        {/* Rack-Inhalte */}
        <div className="mt-4 p-4 bg-white rounded-lg shadow overflow-auto max-h-full">
-          {" "}
-          {/* max-h-full und overflow-auto für Inhalt */}
          {racks.map(
            (rack) =>
              activeTab === rack.id && (
@@ -49,7 +46,6 @@ function Kabelueberwachung() {
                  <h2 className="text-lg font-bold mb-4">
                    {rack.name} Inhalte
                  </h2>
-                  {/* Hier kannst du den Inhalt für jedes Rack einfügen */}
                  <table className="min-w-full bg-white border border-gray-300">
                    <thead>
                      <tr className="w-full bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
--- a/app/layout.js
+++ b/app/layout.js
@@ -1,21 +1,26 @@
-// src/components/Layout.jsx
+"use client"; // Ganz oben hinzufügen
 import React from "react";
-import Header from "../components/Header"; // Passe den Pfad an, falls nötig
-import Navigation from "../components/Navigation"; // Passe den Pfad an, falls nötig
-import Footer from "../components/Footer"; // Passe den Pfad an, falls nötig
+import Header from "../components/Header";
+import Navigation from "../components/Navigation";
+import Footer from "../components/Footer";
+import "../app/globals.css";

-function Layout({ children }) {
+// Diese Datei befindet sich in /app/layout.jsx
+export default function RootLayout({ children }) {
  return (
-    <div className="bg-gray-100 flex flex-col min-h-screen">
+    <html lang="de">
+      <head>
+        {/* Hier können Meta-Tags oder Links für CSS hinzugefügt werden */}
+      </head>
+      <body className="bg-gray-100 flex flex-col min-h-screen">
+        {/* Hier das Layout mit Header, Navigation und Footer */}
        <Header className="bg-gray-300 p-4 flex-shrink-0" />
        <div className="flex flex-grow w-full">
          <Navigation />
-        {/* Der eigentliche Seiteninhalt */}
          <main className="flex-1 p-8">{children}</main>
        </div>
        <Footer className="bg-gray-300 p-4 flex-shrink-0" />
-    </div>
+      </body>
+    </html>
  );
 }
-
-export default Layout;
--- a/app/page.js
+++ b/app/page.js
@@ -3,99 +3,7 @@ import Image from "next/image";
 export default function Home() {
  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="https://nextjs.org/icons/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              app/page.js
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="https://nextjs.org/icons/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+      <h1>Next.js startseite</h1>
    </div>
  );
 }
--- a/components/Footer.jsx
+++ b/components/Footer.jsx
@@ -1,5 +1,5 @@
-// src/components/Footer.jsx
-import React from 'react';
+// components/Footer.jsx
+import React from "react";

 function Footer() {
  return (
--- a/components/Header.jsx
+++ b/components/Header.jsx
@@ -1,6 +1,7 @@
-// src/components/Header.jsx
+// components/Header.jsx
 import React from "react";
 import Image from "next/image";
+import "bootstrap-icons/font/bootstrap-icons.css";

 function Header() {
  return (
--- a/components/Layout.jsx
+++ b/components/Layout.jsx
@@ -1,21 +0,0 @@
-// src/components/Layout.jsx
-import React from "react";
-import Header from "./Header"; // Passe den Pfad an, falls nötig
-import Navigation from "./Navigation"; // Passe den Pfad an, falls nötig
-import Footer from "./Footer"; // Passe den Pfad an, falls nötig
-
-function Layout({ children }) {
-  return (
-    <div className="bg-gray-100 flex flex-col min-h-screen">
-      <Header className="bg-gray-300 p-4 flex-shrink-0" />
-      <div className="flex flex-grow w-full">
-        <Navigation />
-        {/* Der eigentliche Seiteninhalt */}
-        <main className="flex-1 p-8">{children}</main>
-      </div>
-      <Footer className="bg-gray-300 p-4 flex-shrink-0" />
-    </div>
-  );
-}
-
-export default Layout;
--- a/components/Navigation.jsx
+++ b/components/Navigation.jsx
@@ -1,41 +1,41 @@
-// src/components/Navigation.jsx
+"use client";
 import React, { useEffect, useState } from "react";
-import Link from "next/link"; // Importiere Link von Next.js
-import { useRouter } from "next/router";
+import Link from "next/link";
+import { usePathname } from "next/navigation";

 function Navigation() {
-  const router = useRouter();
-  const [activeLink, setActiveLink] = useState(router.pathname); // Verwende den aktuellen Pfad als initialen Wert
+  const pathname = usePathname();
+  const [activeLink, setActiveLink] = useState("");

  useEffect(() => {
-    // Wenn sich die Route ändert, wird der activeLink-Zustand aktualisiert
-    setActiveLink(router.pathname);
-  }, [router.pathname]);
+    if (pathname) {
+      setActiveLink(pathname);
+    }
+  }, [pathname]);

  const menuItems = [
    { name: "Übersicht", path: "/" },
-    { name: "Kabelüberwachung", path: "/Kabelueberwachung" },
-    { name: "Zutrittskontrolle", path: "/Access" }, // Pfad angepasst
-    { name: "Ein- und Ausgänge", path: "/Einausgaenge" },
-    { name: "Analoge Eingänge", path: "/AnalogeEingaenge" },
-    { name: "Meldungen", path: "/Meldungen" },
+    { name: "Kabelüberwachung", path: "/kabelueberwachung" },
+    { name: "Zutrittskontrolle", path: "/access" },
+    { name: "Ein- und Ausgänge", path: "/einausgaenge" },
+    { name: "Analoge Eingänge", path: "/analogeEingaenge" },
+    { name: "Meldungen", path: "/meldungen" },
  ];

  return (
    <aside className="w-1/6 flex-shrink-0 h-full mt-24">
      <nav className="space-y-6 p-4">
        {menuItems.map((item) => (
-          <Link href={item.path} key={item.name} legacyBehavior>
-            <a
+          <Link href={item.path} key={item.name}>
+            <div
              className={`block px-4 py-2 font-bold whitespace-nowrap transition duration-300 ${
                activeLink === item.path
-                  ? "bg-sky-500 text-white rounded-r-full" // Aktivierte Schaltfläche
-                  : "text-black hover:bg-gray-200 rounded-r-full" // Nicht aktive Schaltfläche bei Hover
+                  ? "bg-sky-500 text-white rounded-r-full"
+                  : "text-black hover:bg-gray-200 rounded-r-full"
              }`}
-              onClick={() => setActiveLink(item.path)} // Setzt das aktive Element beim Klick
            >
              {item.name}
-            </a>
+            </div>
          </Link>
        ))}
      </nav>
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,13 +8,16 @@
      "name": "23.09.2024-cpl-v4",
      "version": "0.1.0",
      "dependencies": {
+        "@fontsource/roboto": "^5.1.0",
+        "autoprefixer": "^10.4.20",
+        "bootstrap-icons": "^1.11.3",
        "next": "14.2.13",
        "react": "^18",
        "react-dom": "^18"
      },
      "devDependencies": {
-        "postcss": "^8",
-        "tailwindcss": "^3.4.1"
+        "postcss": "^8.4.47",
+        "tailwindcss": "^3.4.12"
      }
    },
    "node_modules/@alloc/quick-lru": {
@@ -29,6 +32,11 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/@fontsource/roboto": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.1.0.tgz",
+      "integrity": "sha512-cFRRC1s6RqPygeZ8Uw/acwVHqih8Czjt6Q0MwoUoDe9U3m4dH1HmNDRBZyqlMSFwgNAUKgFImncKdmDHyKpwdg=="
+    },
    "node_modules/@isaacs/cliui": {
      "version": "8.0.2",
      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -342,6 +350,42 @@
      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
      "dev": true
    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.20",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
+      "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "browserslist": "^4.23.3",
+        "caniuse-lite": "^1.0.30001646",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
    "node_modules/balanced-match": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -360,6 +404,21 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/bootstrap-icons": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz",
+      "integrity": "sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ]
+    },
    "node_modules/brace-expansion": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -381,6 +440,37 @@
        "node": ">=8"
      }
    },
+    "node_modules/browserslist": {
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz",
+      "integrity": "sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001646",
+        "electron-to-chromium": "^1.5.4",
+        "node-releases": "^2.0.18",
+        "update-browserslist-db": "^1.1.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
    "node_modules/busboy": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -532,12 +622,25 @@
      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
      "dev": true
    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.27",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.27.tgz",
+      "integrity": "sha512-o37j1vZqCoEgBuWWXLHQgTN/KDKe7zwpiY5CPeq2RvUqOyJw9xnrULzZAEVQ5p4h+zjMk7hgtOoPdnLxr7m/jw=="
+    },
    "node_modules/emoji-regex": {
      "version": "9.2.2",
      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
      "dev": true
    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/fast-glob": {
      "version": "3.3.2",
      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -603,6 +706,18 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
    "node_modules/fsevents": {
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -958,6 +1073,11 @@
        "node": "^10 || ^12 || >=14"
      }
    },
+    "node_modules/node-releases": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
+      "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g=="
+    },
    "node_modules/normalize-path": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -967,6 +1087,14 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/object-assign": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -1061,7 +1189,6 @@
      "version": "8.4.47",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
-      "dev": true,
      "funding": [
        {
          "type": "opencollective",
@@ -1209,8 +1336,7 @@
    "node_modules/postcss-value-parser": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
    },
    "node_modules/queue-microtask": {
      "version": "1.2.3",
@@ -1616,6 +1742,35 @@
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
+      "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "escalade": "^3.1.2",
+        "picocolors": "^1.0.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
    "node_modules/util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -9,12 +9,15 @@
    "lint": "next lint"
  },
  "dependencies": {
+    "@fontsource/roboto": "^5.1.0",
+    "autoprefixer": "^10.4.20",
+    "bootstrap-icons": "^1.11.3",
+    "next": "14.2.13",
    "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.13"
+    "react-dom": "^18"
  },
  "devDependencies": {
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1"
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.12"
  }
 }
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,12 +6,7 @@ module.exports = {
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
-    extend: {
-      colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
-      },
-    },
+    extend: {},
  },
  plugins: [],
 };