Converted user and website settings.

This commit is contained in:
Mike Cao 2025-02-21 16:55:05 -08:00
parent 4c24e54fdd
commit b5c6194f36
59 changed files with 363 additions and 554 deletions

View file

@ -1,11 +1,10 @@
import { useContext } from 'react';
import { Button, Icon, Tabs, TabList, Tab, TabPanel, Text } from '@umami/react-zen';
import Link from 'next/link';
import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
import { Breadcrumb } from '@/components/common/Breadcrumb';
import { useMessages } from '@/components/hooks';
import { Icons } from '@/components/icons';
import { PageHeader } from '@/components/layout/PageHeader';
import Link from 'next/link';
import { Key, useContext, useState } from 'react';
import { Button, Icon, Item, Tabs, Text, useToasts } from 'react-basics';
import { ShareUrl } from './ShareUrl';
import { TrackingCode } from './TrackingCode';
import { WebsiteData } from './WebsiteData';
@ -19,31 +18,11 @@ export function WebsiteSettings({
openExternal?: boolean;
}) {
const website = useContext(WebsiteContext);
const { formatMessage, labels, messages } = useMessages();
const [tab, setTab] = useState<Key>('details');
const { showToast } = useToasts();
const handleSave = () => {
showToast({ message: formatMessage(messages.saved), variant: 'success' });
};
const breadcrumb = (
<Breadcrumb
data={[
{
label: formatMessage(labels.websites),
url: website.teamId ? `/teams/${website.teamId}/settings/websites` : '/settings/websites',
},
{
label: website.name,
},
]}
/>
);
const { formatMessage, labels } = useMessages();
return (
<>
<PageHeader title={website?.name} icon={<Icons.Globe />} breadcrumb={breadcrumb}>
<PageHeader title={website?.name} icon={<Icons.Globe />}>
<Link href={`/websites/${websiteId}`} target={openExternal ? '_blank' : null}>
<Button variant="primary">
<Icon>
@ -53,16 +32,26 @@ export function WebsiteSettings({
</Button>
</Link>
</PageHeader>
<Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}>
<Item key="details">{formatMessage(labels.details)}</Item>
<Item key="tracking">{formatMessage(labels.trackingCode)}</Item>
<Item key="share">{formatMessage(labels.shareUrl)}</Item>
<Item key="data">{formatMessage(labels.data)}</Item>
<Tabs>
<TabList>
<Tab id="details">{formatMessage(labels.details)}</Tab>
<Tab id="tracking">{formatMessage(labels.trackingCode)}</Tab>
<Tab id="share"> {formatMessage(labels.shareUrl)}</Tab>
<Tab id="data">{formatMessage(labels.data)}</Tab>
</TabList>
<TabPanel id="details">
<WebsiteEditForm websiteId={websiteId} />
</TabPanel>
<TabPanel id="tracking">
<TrackingCode websiteId={websiteId} />
</TabPanel>
<TabPanel id="share">
<ShareUrl />
</TabPanel>
<TabPanel id="data">
<WebsiteData websiteId={websiteId} />
</TabPanel>
</Tabs>
{tab === 'details' && <WebsiteEditForm websiteId={websiteId} onSave={handleSave} />}
{tab === 'tracking' && <TrackingCode websiteId={websiteId} />}
{tab === 'share' && <ShareUrl onSave={handleSave} />}
{tab === 'data' && <WebsiteData websiteId={websiteId} onSave={handleSave} />}
</>
);
}