finihsed demo

apps/demo/package.json

@@ -21,6 +21,10 @@
   },
   "devDependencies": {
     "@types/react": "^18.2.23",
-    "@types/react-dom": "^18.2.8"
+    "@types/react-dom": "^18.2.8",
+    "autoprefixer": "^10.4.17",
+    "daisyui": "^4.7.2",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1"
   }
 }

apps/demo/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

apps/demo/src/app/global.css

@@ -0,0 +1,4 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+

apps/demo/src/app/layout.tsx

@@ -1,6 +1,9 @@
 import { StackProvider } from "stack";
 import { stackServerApp } from "src/stack";
 import Provider from "src/components/Provider";
+import ColorMode from "src/components/ColorMode";
+import './global.css';
+import Link from "next/link";
 
 
 export default function RootLayout({
@@ -16,6 +19,12 @@ export default function RootLayout({
           app={stackServerApp}
         >
           <Provider>
+            <div className="sticky top-0 z-50 p-4 h-12 flex justify-between items-center py-4 border-b border-base-300">
+              <Link href="/" className="font-bold">
+                Stack Demo
+              </Link>
+              <ColorMode />
+            </div>
             {children}
           </Provider>
         </StackProvider>

apps/demo/src/app/page.tsx

@@ -1,47 +1,35 @@
 import Link from 'next/link';
-import CardFrame from 'stack/src/elements/CardFrame';
 import { stackServerApp } from 'src/stack';
-import ColorModeButton from 'src/components/ColorThemeButton';
-import SignOutButton from 'src/components/SignOutButton';
-import UserInfo from 'src/components/UserInfo';
-import UserInfoClient from 'src/components/UserInfoClient';
+
 
 export default async function Page() {
-  return (
-  // <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-  //   <div>
-  //     <div>Server:</div>
-  //     <UserInfo />
-  //     <div style={{ marginBottom: '1rem' }}/>
-  //     <div>Client:</div>
-  //     <UserInfoClient />
-  //   </div>
-      
-  //   <div style={{ marginBottom: '1rem' }}/>
-  //   <Link href="/handler/signin">
-  //     Sign in
-  //   </Link>
-  //   <Link href="/handler/signup">
-  //     Sign up
-  //   </Link>
-  //   <div style={{ marginBottom: '1rem' }}/>
-  //   <SignOutButton />
-  //   <Link href={stackServerApp.urls['signOut']}>
-  //     Sign out (server)
-  //   </Link>
-  //   <div style={{ marginBottom: '1rem' }}/>
-  //   <ColorModeButton />
+  const user = await stackServerApp.getUser();
 
-    //   <div style={{ marginBottom: '1rem' }}/>
-    //   <Link href="/protected-client">
-    //     Protected client
-    //   </Link>
-    //   <Link href="/protected-server">
-    //     Protected server
-    //   </Link>
-    // </div>
-    <div style={{ width: '100%', height: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-      <h1>Stack Demo</h1>
+  const authButtons = (
+    <div className='flex gap-5'>
+      <Link href={stackServerApp.urls.signIn}>
+        <button  className='btn btn-primary'>
+          Sign In
+        </button>
+      </Link>
+      <Link href="/handler/signup">
+        <button  className='btn btn-primary'>
+          Sign Up
+        </button>
+      </Link>
+    </div>
+  );
+  
+  return (
+    <div className='flex flex-col items-center justify-center h-screen w-full gap-10'>
+      {user ? (
+        <div className='flex flex-col gap-5 justify-center items-center'>
+          <p className='text-lg'>Logged in as: <span className='font-bold'>{user.primaryEmail}</span></p>
+          <Link href={stackServerApp.urls.signOut} className='text-blue-500'>
+            Sign Out
+          </Link>
+        </div>
+      ) : authButtons}
     </div>
   );
 }

apps/demo/src/components/ColorMode.tsx

@@ -2,7 +2,7 @@
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
 
-export default function ColorModeButton() {
+export default function ColorMode() {
   const [mounted, setMounted] = useState(false);
   const { theme, setTheme } = useTheme();
 
@@ -15,10 +15,8 @@ export default function ColorModeButton() {
     return null;
   }
   return (
-    <header>
-      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
-        Toggle {theme === 'light' ? 'Dark' : 'Light'}
-      </button>
-    </header>
+    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')} className='btn btn-ghost'>
+      {theme === 'light' ? 'Dark' : 'Light'} Mode
+    </button>
   );
 }

apps/demo/src/components/SignOutButton.tsx

@@ -1,9 +0,0 @@
-'use client';
-
-import { useUser } from "stack";
-import { runAsynchronously } from "stack-shared/dist/utils/promises";
-
-export default function SignOutButton() {
-  const user = useUser();
-  return (<button onClick={() => runAsynchronously(user?.signOut())}>Sign out</button>);
-}

apps/demo/src/components/UserInfo.tsx

@@ -1,19 +0,0 @@
-import { stackServerApp } from "src/stack";
-
-export default async function UserInfo() {
-  const user = await stackServerApp.getUser();
-  const serverUser = await stackServerApp.getServerUser();
-
-  return <div>
-    {user ? (
-      <div>User Status: Logged in as {user.displayName ?? user.primaryEmail}</div>
-    ) : (
-      <div>User Status: Not signed in</div>
-    )}
-    {serverUser ? (
-      <div>ServerUser Status: Logged in as {serverUser.displayName ?? serverUser.primaryEmail}</div>
-    ) : (
-      <div>ServerUser Status: Not signed in</div>
-    )}
-  </div>;
-}

apps/demo/src/components/UserInfoClient.tsx

@@ -1,17 +0,0 @@
-'use client';
-
-import { useUser } from "stack";
-
-export default function UserInfoClient() {
-  const user = useUser();
-  
-  return (
-    <div>
-      {user ? (
-        <div>User Status: Logged in as {user.displayName ?? user.primaryEmail}</div>
-      ) : (
-        <div>User Status: Not signed in</div>
-      )}
-    </div>
-  );
-}

apps/demo/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [require("daisyui")],
+};