Skip to content

Commit de4ac6c

Browse files
bharatkashyapbharatkashyap
authored
[account] [docs] Add custom user details example (#4227)
1 parent 0520057 commit de4ac6c

20 files changed

+677
-0
lines changed

‎docs/data/toolpad/core/components/UserOrg.js

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import * as React from 'react';
2+
import { Box, Stack, Typography, Avatar, Link, Divider } from '@mui/material';
3+
import {
4+
AccountPreview,
5+
AccountPopoverFooter,
6+
SignOutButton,
7+
} from '@toolpad/core/Account';
8+
9+
import { useSession } from '@toolpad/core/useSession';
10+
11+
export function UserOrg() {
12+
const session = useSession();
13+
if (!session?.user) {
14+
return <Typography>No user session available</Typography>;
15+
}
16+
17+
const { logo: orgLogo, name: orgName, url: orgUrl } = session.org;
18+
19+
return (
20+
<Stack>
21+
<AccountPreview variant="expanded" />
22+
{session.org && (
23+
<Stack mb={1}>
24+
<Typography textAlign="center" fontSize="0.625rem" gutterBottom>
25+
This account is managed by
26+
</Typography>
27+
<Box display="flex" justifyContent="center" alignItems="center" gap={2}>
28+
<Avatar
29+
variant="square"
30+
src={orgLogo}
31+
alt={orgName}
32+
sx={{ width: 27, height: 24 }}
33+
/>
34+
<Stack>
35+
<Typography variant="caption" fontWeight="bolder">
36+
{orgName}
37+
</Typography>
38+
<Link
39+
variant="caption"
40+
href={orgUrl}
41+
target="_blank"
42+
rel="noopener noreferrer"
43+
>
44+
{orgUrl}
45+
</Link>
46+
</Stack>
47+
</Box>
48+
</Stack>
49+
)}
50+
<Divider />
51+
<AccountPopoverFooter>
52+
<SignOutButton />
53+
</AccountPopoverFooter>
54+
</Stack>
55+
);
56+
}

‎docs/data/toolpad/core/components/UserOrg.tsx

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import * as React from 'react';
2+
import { Box, Stack, Typography, Avatar, Link, Divider } from '@mui/material';
3+
import {
4+
AccountPreview,
5+
AccountPopoverFooter,
6+
SignOutButton,
7+
} from '@toolpad/core/Account';
8+
import { Session } from '@toolpad/core/AppProvider';
9+
import { useSession } from '@toolpad/core/useSession';
10+
11+
export interface CustomSession extends Session {
12+
org: {
13+
name: string;
14+
url: string;
15+
logo: string;
16+
};
17+
}
18+
19+
export function UserOrg() {
20+
const session = useSession<CustomSession>();
21+
if (!session?.user) {
22+
return <Typography>No user session available</Typography>;
23+
}
24+
25+
const { logo: orgLogo, name: orgName, url: orgUrl } = session.org;
26+
27+
return (
28+
<Stack>
29+
<AccountPreview variant="expanded" />
30+
{session.org && (
31+
<Stack mb={1}>
32+
<Typography textAlign="center" fontSize="0.625rem" gutterBottom>
33+
This account is managed by
34+
</Typography>
35+
<Box display="flex" justifyContent="center" alignItems="center" gap={2}>
36+
<Avatar
37+
variant="square"
38+
src={orgLogo}
39+
alt={orgName}
40+
sx={{ width: 27, height: 24 }}
41+
/>
42+
<Stack>
43+
<Typography variant="caption" fontWeight="bolder">
44+
{orgName}
45+
</Typography>
46+
<Link
47+
variant="caption"
48+
href={orgUrl}
49+
target="_blank"
50+
rel="noopener noreferrer"
51+
>
52+
{orgUrl}
53+
</Link>
54+
</Stack>
55+
</Box>
56+
</Stack>
57+
)}
58+
<Divider />
59+
<AccountPopoverFooter>
60+
<SignOutButton />
61+
</AccountPopoverFooter>
62+
</Stack>
63+
);
64+
}

‎docs/data/toolpad/core/components/account/AccountCustomUserDetails.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import * as React from 'react';
2+
import { Account } from '@toolpad/core/Account';
3+
import { AuthenticationContext, SessionContext } from '@toolpad/core/AppProvider';
4+
import { UserOrg } from '../UserOrg';
5+
6+
const demoSession = {
7+
user: {
8+
name: 'Bharat Kashyap',
9+
email: '[email protected]',
10+
image: 'https://avatars.githubusercontent.com/u/19550456',
11+
},
12+
org: {
13+
name: 'MUI Inc.',
14+
url: 'https://mui.com',
15+
logo: 'https://mui.com/static/logo.svg',
16+
},
17+
};
18+
19+
export default function AccountCustomUserDetails() {
20+
const [customSession, setCustomSession] = React.useState(demoSession);
21+
const authentication = React.useMemo(() => {
22+
return {
23+
signIn: () => {
24+
setCustomSession(demoSession);
25+
},
26+
signOut: () => {
27+
setCustomSession(null);
28+
},
29+
};
30+
}, []);
31+
32+
return (
33+
<AuthenticationContext.Provider value={authentication}>
34+
<SessionContext.Provider value={customSession}>
35+
{/* preview-start */}
36+
<Account
37+
slots={{
38+
popoverContent: UserOrg,
39+
}}
40+
/>
41+
{/* preview-end */}
42+
</SessionContext.Provider>
43+
</AuthenticationContext.Provider>
44+
);
45+
}

‎docs/data/toolpad/core/components/account/AccountCustomUserDetails.tsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import * as React from 'react';
2+
import { Account } from '@toolpad/core/Account';
3+
import { AuthenticationContext, SessionContext } from '@toolpad/core/AppProvider';
4+
import { UserOrg, CustomSession } from '../UserOrg';
5+
6+
const demoSession: CustomSession = {
7+
user: {
8+
name: 'Bharat Kashyap',
9+
email: '[email protected]',
10+
image: 'https://avatars.githubusercontent.com/u/19550456',
11+
},
12+
org: {
13+
name: 'MUI Inc.',
14+
url: 'https://mui.com',
15+
logo: 'https://mui.com/static/logo.svg',
16+
},
17+
};
18+
19+
export default function AccountCustomUserDetails() {
20+
const [customSession, setCustomSession] = React.useState<CustomSession | null>(
21+
demoSession,
22+
);
23+
const authentication = React.useMemo(() => {
24+
return {
25+
signIn: () => {
26+
setCustomSession(demoSession);
27+
},
28+
signOut: () => {
29+
setCustomSession(null);
30+
},
31+
};
32+
}, []);
33+
34+
return (
35+
<AuthenticationContext.Provider value={authentication}>
36+
<SessionContext.Provider value={customSession}>
37+
{/* preview-start */}
38+
<Account
39+
slots={{
40+
popoverContent: UserOrg,
41+
}}
42+
/>
43+
{/* preview-end */}
44+
</SessionContext.Provider>
45+
</AuthenticationContext.Provider>
46+
);
47+
}

‎docs/data/toolpad/core/components/account/AccountCustomUserDetails.tsx.preview

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<Account
2+
slots={{
3+
popoverContent: UserOrg,
4+
}}
5+
/>

‎docs/data/toolpad/core/components/account/AccountLocale.tsx.preview

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<Account
2+
localeText={{
3+
signInLabel: 'Login',
4+
signOutLabel: 'Logout',
5+
}}
6+
/>

‎docs/data/toolpad/core/components/account/AccountSlotsWallet.js

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
import * as React from 'react';
2+
import {
3+
Avatar,
4+
Button,
5+
Divider,
6+
Typography,
7+
Stack,
8+
IconButton,
9+
} from '@mui/material';
10+
import WalletIcon from '@mui/icons-material/AccountBalance';
11+
import SendIcon from '@mui/icons-material/Send';
12+
import ShoppingCart from '@mui/icons-material/ShoppingCart';
13+
import CopyIcon from '@mui/icons-material/ContentCopy';
14+
15+
import {
16+
Account,
17+
AccountPreview,
18+
AccountPopoverFooter,
19+
SignOutButton,
20+
} from '@toolpad/core/Account';
21+
22+
import { AuthenticationContext, SessionContext } from '@toolpad/core/AppProvider';
23+
24+
const demoSession = {
25+
user: {
26+
name: 'Bharat Kashyap',
27+
email: '[email protected]',
28+
image: 'https://avatars.githubusercontent.com/u/19550456',
29+
},
30+
};
31+
32+
const mockData = {
33+
address: '0xb794f5ea0ba39494ce839613fffba74279579268',
34+
balance: '1,234.56 ETH',
35+
usdBalance: '$2,345,678.90 USD',
36+
};
37+
38+
function CryptoWalletInfo() {
39+
return (
40+
<Stack direction="column">
41+
<AccountPreview variant="expanded" />
42+
<Divider />
43+
<Stack spacing={2} sx={{ width: 320, p: 2 }}>
44+
<Stack direction="row" spacing={2} alignItems="center">
45+
<Avatar sx={{ bgcolor: 'primary.main' }}>
46+
<WalletIcon />
47+
</Avatar>
48+
<Stack sx={{ flexGrow: 1, minWidth: 0 }}>
49+
<Typography
50+
variant="subtitle1"
51+
fontWeight="bold"
52+
sx={{
53+
display: 'flex',
54+
alignItems: 'center',
55+
overflow: 'hidden',
56+
textOverflow: 'ellipsis',
57+
whiteSpace: 'nowrap',
58+
}}
59+
>
60+
<span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
61+
{mockData.address}
62+
</span>
63+
<IconButton size="small" sx={{ ml: 1 }}>
64+
<CopyIcon fontSize="small" />
65+
</IconButton>
66+
</Typography>
67+
<Typography variant="body2" color="text.secondary">
68+
Main Account
69+
</Typography>
70+
</Stack>
71+
</Stack>
72+
<Divider />
73+
<Stack>
74+
<Typography variant="h6" fontWeight="bold">
75+
{mockData.balance}
76+
</Typography>
77+
<Typography variant="body2" color="text.secondary">
78+
{mockData.usdBalance}
79+
</Typography>
80+
</Stack>
81+
</Stack>
82+
<Divider />
83+
<AccountPopoverFooter sx={{ gap: 2, px: 2, justifyContent: 'center' }}>
84+
<Button
85+
variant="contained"
86+
disableElevation
87+
size="small"
88+
color="primary"
89+
startIcon={<SendIcon />}
90+
>
91+
Send
92+
</Button>
93+
<Button variant="outlined" disableElevation startIcon={<ShoppingCart />}>
94+
Buy
95+
</Button>
96+
<SignOutButton color="info" sx={{ textTransform: 'uppercase' }} />
97+
</AccountPopoverFooter>
98+
</Stack>
99+
);
100+
}
101+
102+
export default function AccountSlotsWallet() {
103+
const [session, setSession] = React.useState(demoSession);
104+
const authentication = React.useMemo(() => {
105+
return {
106+
signIn: () => {
107+
setSession(demoSession);
108+
},
109+
signOut: () => {
110+
setSession(null);
111+
},
112+
};
113+
}, []);
114+
115+
return (
116+
<AuthenticationContext.Provider value={authentication}>
117+
<SessionContext.Provider value={session}>
118+
<Account
119+
slots={{
120+
popoverContent: CryptoWalletInfo,
121+
}}
122+
/>
123+
</SessionContext.Provider>
124+
</AuthenticationContext.Provider>
125+
);
126+
}

0 commit comments

Comments
 (0)