New settings layouts. Segment management screen.

This commit is contained in:
Mike Cao 2025-08-07 05:14:35 -07:00
parent 2dbcf63eeb
commit eb7b6978d3
70 changed files with 762 additions and 499 deletions

View file

@ -1,9 +1,10 @@
'use client';
import { UsersDataTable } from './UsersDataTable';
import { Column } from '@umami/react-zen';
import { SectionHeader } from '@/components/common/SectionHeader';
import { useMessages } from '@/components/hooks';
import { UserAddButton } from './UserAddButton';
import { PageHeader } from '@/components/common/PageHeader';
import { Panel } from '@/components/common/Panel';
export function UsersPage() {
const { formatMessage, labels } = useMessages();
@ -11,11 +12,13 @@ export function UsersPage() {
const handleSave = () => {};
return (
<Column gap>
<SectionHeader title={formatMessage(labels.users)}>
<Column gap="6">
<PageHeader title={formatMessage(labels.users)}>
<UserAddButton onSave={handleSave} />
</SectionHeader>
<UsersDataTable />
</PageHeader>
<Panel>
<UsersDataTable />
</Panel>
</Column>
);
}

View file

@ -0,0 +1,10 @@
import { useContext } from 'react';
import { User } from '@/components/icons';
import { PageHeader } from '@/components/common/PageHeader';
import { UserContext } from '@/app/(main)/admin/users/[userId]/UserProvider';
export function UserHeader() {
const user = useContext(UserContext);
return <PageHeader title={user?.username} icon={<User />} />;
}

View file

@ -1,11 +1,19 @@
'use client';
import { Column } from '@umami/react-zen';
import { UserSettings } from './UserSettings';
import { UserProvider } from './UserProvider';
import { UserHeader } from '@/app/(main)/admin/users/[userId]/UserHeader';
import { Panel } from '@/components/common/Panel';
export function UserPage({ userId }: { userId: string }) {
return (
<UserProvider userId={userId}>
<UserSettings userId={userId} />
<Column gap="6">
<UserHeader />
<Panel>
<UserSettings userId={userId} />
</Panel>
</Column>
</UserProvider>
);
}

View file

@ -1,19 +1,13 @@
import { useContext } from 'react';
import { Tabs, Tab, TabList, TabPanel } from '@umami/react-zen';
import { User } from '@/components/icons';
import { Column, Tabs, Tab, TabList, TabPanel } from '@umami/react-zen';
import { UserEditForm } from './UserEditForm';
import { SectionHeader } from '@/components/common/SectionHeader';
import { useMessages } from '@/components/hooks';
import { UserWebsites } from './UserWebsites';
import { UserContext } from './UserProvider';
export function UserSettings({ userId }: { userId: string }) {
const { formatMessage, labels } = useMessages();
const user = useContext(UserContext);
return (
<>
<SectionHeader title={user?.username} icon={<User />} />
<Column gap="6">
<Tabs>
<TabList>
<Tab id="details">{formatMessage(labels.details)}</Tab>
@ -26,6 +20,6 @@ export function UserSettings({ userId }: { userId: string }) {
<UserWebsites userId={userId} />
</TabPanel>
</Tabs>
</>
</Column>
);
}