saulteafarmer/mkstack
1
0
Fork 0
mirror of https://gitlab.com/soapbox-pub/mkstack.git synced 2025-08-27 13:09:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

LoginArea display and context improvements

Browse Source
This commit is contained in:
Alex Gleason 2025-06-01 11:00:39 -05:00
parent 37bee859b6
commit 34770a3145
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
CONTEXT.md
View File

@ -210,13 +210,15 @@ function MyComponent() {
<div> <div>
{/* other components ... */} {/* other components ... */}
<LoginArea /> <LoginArea className="max-w-60" />
</div> </div>
); );
} }
``` ```
The `LoginArea` component displays a "Log in" button when the user is logged out, and changes to an account switcher once the user is logged in. It handles all the login-related UI and interactions internally, including displaying login dialogs and switching between accounts. It should not be wrapped in any conditional logic. The `LoginArea` component handles all the login-related UI and interactions, including displaying login dialogs and switching between accounts. It should not be wrapped in any conditional logic.
`LoginArea` displays a "Log in" button when the user is logged out, and changes to an account switcher once the user is logged in. It is an inline-flex element by default. To make it expand to the width of its container, you can pass a className like `flex` (to make it a block element) or `w-full`. If it is left as inline-flex, it's recommended to set a max width.
### `npub`, `naddr`, and other Nostr addresses ### `npub`, `naddr`, and other Nostr addresses

13
src/components/auth/LoginArea.tsx
View File

@ -1,15 +1,20 @@
// NOTE: This file is stable and usually should not be modified. // NOTE: This file is stable and usually should not be modified.
// It is important that all functionality in this file is preserved, and should only be modified if explicitly requested. // It is important that all functionality in this file is preserved, and should only be modified if explicitly requested.
import React, { useState } from 'react'; import { useState } from 'react';
import { User } from 'lucide-react'; import { User } from 'lucide-react';
import { Button } from '@/components/ui/button.tsx'; import { Button } from '@/components/ui/button.tsx';
import LoginDialog from './LoginDialog'; import LoginDialog from './LoginDialog';
import SignupDialog from './SignupDialog'; import SignupDialog from './SignupDialog';
import { useLoggedInAccounts } from '@/hooks/useLoggedInAccounts'; import { useLoggedInAccounts } from '@/hooks/useLoggedInAccounts';
import { AccountSwitcher } from './AccountSwitcher'; import { AccountSwitcher } from './AccountSwitcher';
import { cn } from '@/lib/utils';
export function LoginArea() { export interface LoginAreaProps {
className?: string;
}
export function LoginArea({ className }: LoginAreaProps) {
const { currentUser } = useLoggedInAccounts(); const { currentUser } = useLoggedInAccounts();
const [loginDialogOpen, setLoginDialogOpen] = useState(false); const [loginDialogOpen, setLoginDialogOpen] = useState(false);
const [signupDialogOpen, setSignupDialogOpen] = useState(false); const [signupDialogOpen, setSignupDialogOpen] = useState(false);
@ -20,7 +25,7 @@ export function LoginArea() {
}; };
return ( return (
<div className="flex items-center justify-center max-w-60"> <div className={cn("inline-flex items-center justify-center", className)}>
{currentUser ? ( {currentUser ? (
<AccountSwitcher onAddAccountClick={() => setLoginDialogOpen(true)} /> <AccountSwitcher onAddAccountClick={() => setLoginDialogOpen(true)} />
) : ( ) : (
@ -29,7 +34,7 @@ export function LoginArea() {
className='flex items-center gap-2 px-4 py-2 rounded-full bg-primary text-primary-foreground w-full font-medium transition-all hover:bg-primary/90 animate-scale-in' className='flex items-center gap-2 px-4 py-2 rounded-full bg-primary text-primary-foreground w-full font-medium transition-all hover:bg-primary/90 animate-scale-in'
> >
<User className='w-4 h-4' /> <User className='w-4 h-4' />
<span>Log in</span> <span className='truncate'>Log in</span>
</Button> </Button>
)} )}