watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-07 14:17:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Website header updates.

Browse source
This commit is contained in:
Mike Cao 2025-04-04 23:26:52 -07:00
parent 2b99274895
commit 96c2c32d14
26 changed files with 137 additions and 247 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/app/(main)/settings/websites/[websiteId]/WebsiteTransferForm.tsx
View file

@ -57,6 +57,7 @@ export function WebsiteTransferForm({
};
const handleChange = (key: Key) => {
console.log('KEY', key);
setTeamId(key as string);
};
@ -73,10 +74,10 @@ export function WebsiteTransferForm({
</Text>
<FormField name="teamId">
{!isTeamWebsite && (
<Select onSelectionChange={handleChange} value={teamId}>
<Select onSelectionChange={handleChange} selectedKey={teamId}>
{items.map(({ id, name }) => {
return (
<ListItem key={id} id={id}>
<ListItem key={`${id}!!!!`} id={`${id}????`}>
{name}
</ListItem>
);

5
src/app/(main)/websites/[websiteId]/WebsiteCompareBar.tsx Normal file
View file

@ -0,0 +1,5 @@
import { Row } from '@umami/react-zen';
export function WebsiteCompareBar({ websiteId }: { websiteId: string }) {
return <Row>compare {websiteId}</Row>;
}

3
src/app/(main)/websites/[websiteId]/WebsiteFilterButton.module.css
View file

@ -1,3 +0,0 @@
.button {
font-weight: 700;
}

3
src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx
View file

@ -2,7 +2,6 @@ import { Button, Icon, Icons, MenuTrigger, Popover, Text } from '@umami/react-ze
import { FilterSelectForm } from '@/app/(main)/reports/[reportId]/FilterSelectForm';
import { useFields, useMessages, useNavigation, useDateRange } from '@/components/hooks';
import { OPERATOR_PREFIXES } from '@/lib/constants';
import styles from './WebsiteFilterButton.module.css';
export function WebsiteFilterButton({
websiteId,
@ -28,7 +27,7 @@ export function WebsiteFilterButton({
return (
<MenuTrigger>
<Button className={styles.button} variant="quiet">
<Button variant="quiet">
<Icon>
<Icons.Plus />
</Icon>

54
src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
View file

@ -1,16 +1,4 @@
import {
Column,
Row,
Heading,
MenuTrigger,
Button,
Icon,
Icons,
Popover,
Menu,
MenuItem,
MenuSeparator,
} from '@umami/react-zen';
import { Column, Row, Heading } from '@umami/react-zen';
import { Favicon } from '@/components/common/Favicon';
import { ActiveUsers } from '@/components/metrics/ActiveUsers';
import { WebsiteTabs } from '@/app/(main)/websites/[websiteId]/WebsiteTabs';
@ -18,61 +6,35 @@ import { useWebsite } from '@/components/hooks/useWebsite';
import { WebsiteFilterButton } from '@/app/(main)/websites/[websiteId]/WebsiteFilterButton';
import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter';
import { FilterBar } from '@/components/metrics/FilterBar';
import { useMessages } from '@/components/hooks';
import { WebsiteMenu } from '@/app/(main)/websites/[websiteId]/WebsiteMenu';
import { WebsiteCompareBar } from '@/app/(main)/websites/[websiteId]/WebsiteCompareBar';
export function WebsiteHeader({
websiteId,
showFilter = true,
allowEdit = true,
compareMode = false,
}: {
websiteId: string;
showFilter?: boolean;
allowEdit?: boolean;
compareMode?: boolean;
}) {
const website = useWebsite();
const { formatMessage, labels } = useMessages();
const { name, domain } = website || {};
const items = [
{ label: formatMessage(labels.previousPeriod), value: 'prev' },
{ label: formatMessage(labels.previousYear), value: 'yoy' },
];
const { id: websiteId, name, domain } = website || {};
return (
<Column marginY="6" gap="6">
<Row alignItems="center" justifyContent="space-between" gap="3">
<Row alignItems="center" gap="3">
<Favicon domain={domain} />
<Heading>
{name}
<ActiveUsers websiteId={websiteId} />
</Heading>
<Heading>{name}</Heading>
</Row>
<ActiveUsers websiteId={websiteId} />
<Row alignItems="center" gap="3">
{showFilter && <WebsiteFilterButton websiteId={websiteId} />}
<WebsiteDateFilter websiteId={websiteId} />
{allowEdit && (
<MenuTrigger>
<Button variant="quiet">
<Icon>
<Icons.More />
</Icon>
</Button>
<Popover placement="bottom end">
<Menu>
<MenuItem>Compare dates</MenuItem>
<MenuItem>Share</MenuItem>
<MenuSeparator />
<MenuItem>Settings</MenuItem>
</Menu>
</Popover>
</MenuTrigger>
)}
{allowEdit && <WebsiteMenu websiteId={websiteId} />}
</Row>
</Row>
{compareMode && items.map(item => <div key={item.value}>{item.label}</div>)}
<WebsiteCompareBar websiteId={websiteId} />
<FilterBar websiteId={websiteId} />
<WebsiteTabs websiteId={websiteId} />
</Column>

49
src/app/(main)/websites/[websiteId]/WebsiteMenu.tsx Normal file
View file

@ -0,0 +1,49 @@
import {
Button,
Icon,
Icons,
Menu,
MenuItem,
MenuSeparator,
MenuTrigger,
Popover,
Text,
} from '@umami/react-zen';
import { Fragment } from 'react';
import { Lucide } from '@/components/icons';
import { useMessages } from '@/components/hooks';
export function WebsiteMenu({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();
const menuItems = [
{ label: formatMessage(labels.compare), icon: <Lucide.GitCompare /> },
{ label: formatMessage(labels.share), icon: <Lucide.Share /> },
{ label: formatMessage(labels.edit), icon: <Lucide.Edit />, seperator: true },
];
return (
<MenuTrigger>
<Button variant="quiet">
<Icon>
<Icons.More />
</Icon>
</Button>
<Popover placement="bottom end">
<Menu>
{menuItems.map(({ label, icon, seperator }, index) => {
return (
<Fragment key={index}>
{seperator && <MenuSeparator />}
<MenuItem>
<Icon>{icon}</Icon>
<Text>{label}</Text>
</MenuItem>
</Fragment>
);
})}
</Menu>
</Popover>
</MenuTrigger>
);
}