build ok,

002_source/cms/src/app/dashboard/social/profile/layout.tsx

@@ -0,0 +1,101 @@
+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>
+  );
+}