49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import { Key, useContext, useState } from 'react';
|
|
import { Item, Tabs, useToasts } from 'react-basics';
|
|
import Icons from 'components/icons';
|
|
import UserEditForm from './UserEditForm';
|
|
import PageHeader from 'components/layout/PageHeader';
|
|
import { useMessages } from 'components/hooks';
|
|
import UserWebsites from './UserWebsites';
|
|
import { UserContext } from './UserProvider';
|
|
import Breadcrumb from 'components/common/Breadcrumb';
|
|
|
|
export function UserSettings({ userId }: { userId: string }) {
|
|
const { formatMessage, labels, messages } = useMessages();
|
|
const [tab, setTab] = useState<Key>('details');
|
|
const user = useContext(UserContext);
|
|
const { showToast } = useToasts();
|
|
|
|
const handleSave = () => {
|
|
showToast({ message: formatMessage(messages.saved), variant: 'success' });
|
|
};
|
|
|
|
const breadcrumb = (
|
|
<Breadcrumb
|
|
data={[
|
|
{
|
|
label: formatMessage(labels.users),
|
|
url: '/settings/users',
|
|
},
|
|
{
|
|
label: user.username,
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<PageHeader title={user?.username} icon={<Icons.User />} breadcrumb={breadcrumb} />
|
|
<Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
|
|
<Item key="details">{formatMessage(labels.details)}</Item>
|
|
<Item key="websites">{formatMessage(labels.websites)}</Item>
|
|
</Tabs>
|
|
{tab === 'details' && <UserEditForm userId={userId} onSave={handleSave} />}
|
|
{tab === 'websites' && <UserWebsites userId={userId} />}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default UserSettings;
|