website refactor

apps/website/templates/ProfileLayoutShellTemplate.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import { Container } from '@/ui/Container';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
+import { ProfileSidebarTemplate } from '@/templates/ProfileSidebarTemplate';
+import { ProfileLayoutViewData } from '@/lib/view-data/ProfileLayoutViewData';
+
+interface ProfileLayoutShellTemplateProps {
+  viewData: ProfileLayoutViewData;
+  children: ReactNode;
+}
+
+export function ProfileLayoutShellTemplate({ viewData, children }: ProfileLayoutShellTemplateProps) {
+  return (
+    <Box minHeight="screen" backgroundColor="#0C0D0F">
+      <Container size="lg" py={8}>
+        <Stack direction="row" gap={8} alignItems="start">
+          <Box as="aside" width="64" flexShrink={0}>
+            <ProfileSidebarTemplate viewData={viewData} />
+          </Box>
+          <Box as="main" flexGrow={1} minWidth="0">
+            {children}
+          </Box>
+        </Stack>
+      </Container>
+    </Box>
+  );
+}