102 lines
3.6 KiB
TypeScript
102 lines
3.6 KiB
TypeScript
import * as React from 'react';
|
|
import type { Metadata } from 'next';
|
|
import Avatar from '@mui/material/Avatar';
|
|
import Box from '@mui/material/Box';
|
|
import Button from '@mui/material/Button';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import Stack from '@mui/material/Stack';
|
|
import Tooltip from '@mui/material/Tooltip';
|
|
import Typography from '@mui/material/Typography';
|
|
import { ChatText as ChatTextIcon } from '@phosphor-icons/react/dist/ssr/ChatText';
|
|
import { DotsThree as DotsThreeIcon } from '@phosphor-icons/react/dist/ssr/DotsThree';
|
|
import { Image as ImageIcon } from '@phosphor-icons/react/dist/ssr/Image';
|
|
import { UserPlus as UserPlusIcon } from '@phosphor-icons/react/dist/ssr/UserPlus';
|
|
|
|
import { config } from '@/config';
|
|
import { ProfileTabs } from '@/components/dashboard/social/profile-tabs';
|
|
|
|
export const metadata = { title: `Profile | Social | Dashboard | ${config.site.name}` } satisfies Metadata;
|
|
|
|
interface LayoutProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export default function Layout({ children }: LayoutProps): React.JSX.Element {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
maxWidth: 'var(--Content-maxWidth)',
|
|
m: 'var(--Content-margin)',
|
|
p: 'var(--Content-padding)',
|
|
width: 'var(--Content-width)',
|
|
}}
|
|
>
|
|
<Stack spacing={4}>
|
|
<Stack spacing={4}>
|
|
<Box
|
|
sx={{
|
|
backgroundImage: `url(/assets/image-abstract-2.png)`,
|
|
backgroundPosition: 'center',
|
|
backgroundRepeat: 'no-repeat',
|
|
backgroundSize: 'cover',
|
|
borderRadius: 1,
|
|
height: '348px',
|
|
position: 'relative',
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
alignItems: 'flex-end',
|
|
bottom: 0,
|
|
display: 'flex',
|
|
justifyContent: 'flex-end',
|
|
left: 0,
|
|
opacity: 0,
|
|
p: 3,
|
|
position: 'absolute',
|
|
right: 0,
|
|
top: 0,
|
|
'&:hover': { opacity: '100%' },
|
|
}}
|
|
>
|
|
<Button color="secondary" startIcon={<ImageIcon />} variant="contained">
|
|
Change cover
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
|
|
<Avatar src="/assets/avatar.png" sx={{ '--Avatar-size': '64px' }} />
|
|
<div>
|
|
<Typography variant="h6">Sofia Rivers</Typography>
|
|
<Typography color="text.secondary" variant="overline">
|
|
Product Designer
|
|
</Typography>
|
|
</div>
|
|
</Stack>
|
|
<Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
|
|
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', display: { md: 'flex', xs: 'none' } }}>
|
|
<Button color="secondary" size="small" startIcon={<UserPlusIcon />}>
|
|
Connect
|
|
</Button>
|
|
<Button size="small" startIcon={<ChatTextIcon />} variant="contained">
|
|
Message
|
|
</Button>
|
|
</Stack>
|
|
<Tooltip title="More options">
|
|
<IconButton>
|
|
<DotsThreeIcon weight="bold" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
<Stack spacing={4}>
|
|
<ProfileTabs />
|
|
{children}
|
|
</Stack>
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
}
|