New settings layouts. Segment management screen.

src/app/(main)/websites/[websiteId]/settings/SettingsPage.tsx

@@ -0,0 +1,25 @@
+'use client';
+import { Column, Icon, Row, Text } from '@umami/react-zen';
+import { WebsiteSettingsPage } from '@/app/(main)/settings/websites/[websiteId]/WebsiteSettingsPage';
+import { LinkButton } from '@/components/common/LinkButton';
+import { Arrow } from '@/components/icons';
+import { useNavigation } from '@/components/hooks';
+
+export function SettingsPage({ websiteId }: { websiteId: string }) {
+  const { pathname } = useNavigation();
+  return (
+    <Column gap>
+      <Row marginTop="3">
+        <LinkButton href={pathname.replace('/settings', '')}>
+          <Row alignItems="center" gap>
+            <Icon rotate={180}>
+              <Arrow />
+            </Icon>
+            <Text>Back</Text>
+          </Row>
+        </LinkButton>
+      </Row>
+      <WebsiteSettingsPage websiteId={websiteId} />
+    </Column>
+  );
+}

src/app/(main)/websites/[websiteId]/settings/page.tsx

@@ -0,0 +1,12 @@
+import { SettingsPage } from './SettingsPage';
+import { Metadata } from 'next';
+
+export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
+  const { websiteId } = await params;
+
+  return <SettingsPage websiteId={websiteId} />;
+}
+
+export const metadata: Metadata = {
+  title: 'Settings',
+};