src/app/globals.css

@@ -2,6 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
+@import "rose-pine.css";
 
 /* @layer base { */
 /*     :root { */

src/app/ui/tables/data-table.tsx

@@ -32,8 +32,6 @@ import {
   TableRow,
 } from "@/components/ui/table"
 import { EyeIcon } from "lucide-react"
-import { usePathname } from "next/navigation"
-import { useRouter } from "next/navigation"
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
@@ -68,8 +66,7 @@ export function DataTable<TData, TValue>({
       columnVisibility,
     },
   })
-  const pathname = usePathname()
-  const router = useRouter()
+
   const [filterBy, setFilterBy] = useState(table.getAllColumns()[0])
   return (<>
     <div className="flex justify-between py-4">
@@ -104,9 +101,6 @@ export function DataTable<TData, TValue>({
           className="max-w-sm"
         />
       </div>
-
-      <Button onClick={() => router.push(pathname + "/create")}>Create new {pathname.slice(1)}</Button>
-
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button variant="outline" className="justify-self-end">

tailwind.config.js

@@ -2,7 +2,10 @@
 module.exports = {
   darkMode: ["class"],
   content: [
-    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
   ],
   prefix: "",
   theme: {