CodeCow/stack
1
0
Fork 0
mirror of https://github.com/stack-auth/stack.git synced 2026-06-19 21:00:40 +08:00
Code Issues Actions 45 Packages Projects Releases Wiki Activity

Update user button demo to use real logged in user details, mock when not logged in

Browse Source
This commit is contained in:
Madison 2025-09-03 14:27:46 -05:00
parent 53ae9a880d
commit a49c7cec56
1 changed files with 35 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
docs/src/components/stack-auth/stack-user-button-demo.tsx
View File

@ -1,9 +1,8 @@
'use client';
import { UserButton } from '@stackframe/stack';
import { UserButton, useUser } from '@stackframe/stack';
import { Wrench } from "lucide-react";
import { useState } from "react";
import { StackContainer } from "../mdx";
import { DynamicCodeblock } from "../mdx/dynamic-code-block";
type UserButtonDemoProps = {
@ -19,7 +18,10 @@ export function UserButtonDemo() {
extraItems: false,
});
// Mock user data
// Get the actual logged-in user
const user = useUser();
// Mock user data (used when no user is logged in)
const mockUser = {
displayName: "John Doe",
primaryEmail: "john.doe@example.com",
@ -60,9 +62,9 @@ export function MyComponent() {
return (
<div className="w-full max-w-7xl mx-auto p-6 space-y-6">
{/* Main demo area */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
{/* Controls Panel */}
<div className="space-y-6">
<div className="space-y-4">
<h3 className="text-lg font-semibold">Component Options</h3>
{/* Show User Info Toggle */}
@ -111,18 +113,34 @@ export function MyComponent() {
{/* Component Preview */}
<div className="space-y-4">
<h3 className="text-lg font-semibold">Live Preview</h3>
<StackContainer color="blue" size="medium">
<UserButton
showUserInfo={props.showUserInfo}
mockUser={mockUser}
colorModeToggle={props.colorModeToggle ? () => console.log("color mode toggle clicked") : undefined}
extraItems={props.extraItems ? [{
text: 'Custom Action',
icon: <Wrench />,
onClick: () => console.log('Custom action clicked')
}] : undefined}
/>
</StackContainer>
<div className="space-y-3">
<div className="text-xs text-fd-muted-foreground">
{user ? (
<span className="text-green-600">✓ Using your actual account</span>
) : (
<span className="text-blue-600">→ Using mock data (sign in to see your account)</span>
)}
</div>
<div className="relative overflow-hidden rounded-lg border border-dashed border-blue-500/40 dark:border-blue-400/20 bg-gray-200/90 dark:bg-slate-900/30 shadow-sm p-4">
{/* Component demo label */}
<div className="absolute top-0 right-0 px-2 py-1 text-xs font-medium rounded-bl-md bg-gray-200/90 dark:bg-slate-800/80 border-l border-b border-gray-400/60 dark:border-gray-600/40">
<span className="text-blue-600/80 dark:text-blue-400/70">Component Demo</span>
</div>
<div className="stack-scope">
<UserButton
showUserInfo={props.showUserInfo}
mockUser={user ? undefined : mockUser}
colorModeToggle={props.colorModeToggle ? () => console.log("color mode toggle clicked") : undefined}
extraItems={props.extraItems ? [{
text: 'Custom Action',
icon: <Wrench />,
onClick: () => console.log('Custom action clicked')
}] : undefined}
/>
</div>
</div>
</div>
</div>
</div>