Update to shadcn/ui (vercel#38)

Author: leerob

Diff for: .env.local.example

@@ -25,8 +25,8 @@ yarn-debug.log*
 yarn-error.log*
 .pnpm-debug.log*
 
-# local env files
-.env*.local
+# env files
+.env*
 
 # vercel
 .vercel

Diff for: .eslintrc.json

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2023 Vercel, Inc.
+Copyright (c) 2024 Vercel, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

Diff for: .gitignore

@@ -1,32 +1,25 @@
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/9113740/201498864-2a900c64-d88f-4ed4-b5cf-770bcb57e1f5.png">
-  <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/9113740/201498152-b171abb8-9225-487a-821c-6ff49ee48579.png">
-  <img alt="Shows all of the tools in the stack for this template, also listed in the README file." src="https://user-images.githubusercontent.com/9113740/201498152-b171abb8-9225-487a-821c-6ff49ee48579.png">
-</picture>
-
 <div align="center"><strong>Next.js 14 Admin Dashboard Template</strong></div>
 <div align="center">Built with the Next.js App Router</div>
 <br />
 <div align="center">
 <a href="http://admin-dash-template.vercel.sh/">Demo</a>
 <span> · </span>
-<a href="https://vercel.com/templates/next.js/admin-dashboard-tailwind-planetscale-react-nextjs">Clone & Deploy</a>
+<a href="https://vercel.com/templates/next.js/admin-dashboard-tailwind-postgres-react-nextjs">Clone & Deploy</a>
 <span>
 </div>
 
 ## Overview
 
 This is a starter template using the following stack:
 
-- Framework - [Next.js 14](https://nextjs.org/14)
+- Framework - [Next.js 14](https://nextjs.org/)
 - Language - [TypeScript](https://www.typescriptlang.org)
 - Auth - [NextAuth.js](https://next-auth.js.org)
-- Database - [Vercel Postgres](https://vercel.com/postgres)
+- Database - [Postgres](https://vercel.com/postgres)
 - Deployment - [Vercel](https://vercel.com/docs/concepts/next.js/overview)
 - Styling - [Tailwind CSS](https://tailwindcss.com)
-- Components - [Tremor](https://www.tremor.so)
+- Components - [Shadcn UI](https://ui.shadcn.com/)
 - Analytics - [Vercel Analytics](https://vercel.com/analytics)
-- Linting - [ESLint](https://eslint.org)
 - Formatting - [Prettier](https://prettier.io)
 
 This template uses the new Next.js App Router. This includes support for enhanced layouts, colocation of components, tests, and styles, component-level data fetching, and more.
@@ -52,6 +45,8 @@ Insert a row for testing:
 INSERT INTO users (id, email, name, username) VALUES (1, '[email protected]', 'Me', 'username');
 ```
 
+Copy the `.env.example` file to `.env` and update the values.
+
 Finally, run the following commands to start the development server:
 
 ```

Diff for: LICENSE.md

@@ -0,0 +1,9 @@
+'use server';
+
+import { deleteUserById } from '@/lib/db';
+import { revalidatePath } from 'next/cache';
+
+export async function deleteUser(userId: number) {
+  await deleteUserById(userId);
+  revalidatePath('/');
+}

Diff for: README.md

@@ -1,2 +1 @@
-export { GET, POST } from '../../../auth';
-export const runtime = 'edge';
+export { GET, POST } from '@/lib/auth';

Diff for: app/actions.ts

@@ -1,3 +1,76 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+ 
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+ 
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+ 
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+ 
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+ 
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+ 
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+ 
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+ 
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+ 
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+ 
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

Diff for: app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,33 @@
+import { useEffect, useRef, useState } from 'react';
+
+export function useInfiniteScroll(onIntersect: () => void) {
+  const sentinelRef = useRef<HTMLElement | null>(null);
+  const [observer, setObserver] = useState<IntersectionObserver | null>(null);
+
+  useEffect(() => {
+    if (observer) {
+      observer.disconnect();
+    }
+
+    const obs = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          onIntersect();
+        }
+      },
+      {
+        rootMargin: '50px 0px 0px 0px'
+      }
+    );
+
+    setObserver(obs);
+
+    if (sentinelRef.current) {
+      obs.observe(sentinelRef.current);
+    }
+
+    return () => obs.disconnect();
+  }, [onIntersect]);
+
+  return sentinelRef;
+}

Diff for: app/auth.ts

@@ -1,14 +1,15 @@
 import './globals.css';
 
+import Link from 'next/link';
 import { Analytics } from '@vercel/analytics/react';
-import Nav from './nav';
-import Toast from './toast';
-import { Suspense } from 'react';
+import { Logo, SettingsIcon, UsersIcon, VercelLogo } from '@/components/icons';
+import { User } from './user';
+import { NavItem } from './nav-item';
 
 export const metadata = {
   title: 'Next.js App Router + NextAuth + Tailwind CSS',
   description:
-    'A user admin dashboard configured with Next.js, Postgres, NextAuth, Tailwind CSS, TypeScript, ESLint, and Prettier.'
+    'A user admin dashboard configured with Next.js, Postgres, NextAuth, Tailwind CSS, TypeScript, and Prettier.'
 };
 
 export default function RootLayout({
@@ -18,13 +19,52 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" className="h-full bg-gray-50">
-      <body className="h-full">
-        <Suspense>
-          <Nav />
-        </Suspense>
-        {children}
+      <body>
+        <div className="grid min-h-screen w-full lg:grid-cols-[280px_1fr]">
+          <div className="hidden border-r bg-gray-100/40 lg:block dark:bg-gray-800/40">
+            <div className="flex h-full max-h-screen flex-col gap-2">
+              <div className="flex h-[60px] items-center border-b px-5">
+                <Link
+                  className="flex items-center gap-2 font-semibold"
+                  href="/"
+                >
+                  <Logo />
+                  <span className="">ACME</span>
+                </Link>
+              </div>
+              <div className="flex-1 overflow-auto py-2">
+                <nav className="grid items-start px-4 text-sm font-medium">
+                  <NavItem href="/">
+                    <UsersIcon className="h-4 w-4" />
+                    Users
+                  </NavItem>
+                  <NavItem href="/settings">
+                    <SettingsIcon className="h-4 w-4" />
+                    Settings
+                  </NavItem>
+                  <NavItem href="https://vercel.com/templates/next.js/admin-dashboard-tailwind-postgres-react-nextjs">
+                    <VercelLogo className="h-4 w-4" />
+                    Deploy
+                  </NavItem>
+                </nav>
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-col">
+            <header className="flex h-14 lg:h-[60px] items-center gap-4 border-b bg-gray-100/40 px-6 dark:bg-gray-800/40 justify-between lg:justify-end">
+              <Link
+                className="flex items-center gap-2 font-semibold lg:hidden"
+                href="/"
+              >
+                <Logo />
+                <span className="">ACME</span>
+              </Link>
+              <User />
+            </header>
+            {children}
+          </div>
+        </div>
         <Analytics />
-        <Toast />
       </body>
     </html>
   );

Diff for: app/dismiss-button.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import clsx from 'clsx';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+export function NavItem({
+  href,
+  children
+}: {
+  href: string;
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname();
+
+  return (
+    <Link
+      href={href}
+      className={clsx(
+        'flex items-center gap-3 rounded-lg  px-3 py-2 text-gray-900  transition-all hover:text-gray-900  dark:text-gray-50 dark:hover:text-gray-50',
+        {
+          'bg-gray-100 dark:bg-gray-800': pathname === href
+        }
+      )}
+    >
+      {children}
+    </Link>
+  );
+}