Renamed query hooks. Fixed conversion bugs.

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

@@ -1,99 +1,31 @@
 import { ReactNode } from 'react';
-import { Button, Icon, Text } from '@umami/react-zen';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import classNames from 'classnames';
+import { Row, Heading } from '@umami/react-zen';
 import { Favicon } from '@/components/common/Favicon';
-import { useMessages, useTeamUrl, useWebsite } from '@/components/hooks';
-import { Icons } from '@/components/icons';
+import { useWebsiteQuery } from '@/components/hooks';
 import { ActiveUsers } from '@/components/metrics/ActiveUsers';
-import styles from './WebsiteHeader.module.css';
+import { WebsiteTabs } from '@/app/(main)/websites/[websiteId]/WebsiteTabs';
 
 export function WebsiteHeader({
   websiteId,
-  showLinks = true,
   children,
 }: {
   websiteId: string;
-  showLinks?: boolean;
   children?: ReactNode;
 }) {
-  const { formatMessage, labels } = useMessages();
-  const { renderTeamUrl } = useTeamUrl();
-  const pathname = usePathname();
-  const { data: website } = useWebsite(websiteId);
+  const { data: website } = useWebsiteQuery(websiteId);
   const { name, domain } = website || {};
 
-  const links = [
-    {
-      label: formatMessage(labels.overview),
-      icon: <Icons.Overview />,
-      path: '',
-    },
-    {
-      label: formatMessage(labels.events),
-      icon: <Icons.Lightning />,
-      path: '/events',
-    },
-    {
-      label: formatMessage(labels.sessions),
-      icon: <Icons.User />,
-      path: '/sessions',
-    },
-    {
-      label: formatMessage(labels.realtime),
-      icon: <Icons.Clock />,
-      path: '/realtime',
-    },
-    {
-      label: formatMessage(labels.compare),
-      icon: <Icons.Compare />,
-      path: '/compare',
-    },
-    {
-      label: formatMessage(labels.reports),
-      icon: <Icons.Reports />,
-      path: '/reports',
-    },
-  ];
-
   return (
-    <div className={styles.header}>
-      <div className={styles.title}>
+    <>
+      <Row alignItems="center" gap="3" marginY="6">
         <Favicon domain={domain} />
-        <Text>{name}</Text>
-        <ActiveUsers websiteId={websiteId} />
-      </div>
-      <div className={styles.actions}>
-        {showLinks && (
-          <div className={styles.links}>
-            {links.map(({ label, icon, path }) => {
-              const selected = path
-                ? pathname.includes(path)
-                : pathname.match(/^\/websites\/[\w-]+$/);
-
-              return (
-                <Link
-                  key={label}
-                  href={renderTeamUrl(`/websites/${websiteId}${path}`)}
-                  shallow={true}
-                >
-                  <Button
-                    variant="quiet"
-                    className={classNames({
-                      [styles.selected]: selected,
-                    })}
-                  >
-                    <Icon className={styles.icon}>{icon}</Icon>
-                    <Text className={styles.label}>{label}</Text>
-                  </Button>
-                </Link>
-              );
-            })}
-          </div>
-        )}
+        <Heading>
+          {name}
+          <ActiveUsers websiteId={websiteId} />
+        </Heading>
         {children}
-      </div>
-    </div>
+      </Row>
+      <WebsiteTabs websiteId={websiteId} />
+    </>
   );
 }