Fixed 'use client' usage.

src/app/(main)/settings/teams/TeamAddForm.tsx

@@ -1,4 +1,3 @@
-'use client';
 import {
   Form,
   FormRow,

src/app/(main)/settings/teams/TeamJoinForm.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { useRef } from 'react';
 import {
   Form,

src/app/(main)/settings/teams/TeamLeaveButton.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
 import { useMessages, useLocale, useLogin } from 'components/hooks';
 import TeamDeleteForm from './TeamLeaveForm';

src/app/(main)/settings/teams/TeamLeaveForm.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { useApi, useMessages } from 'components/hooks';
 import { touch } from 'store/modified';
 import ConfirmationForm from 'components/common/ConfirmationForm';

src/app/(main)/settings/teams/TeamsAddButton.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { Button, Icon, Modal, ModalTrigger, Text } from 'react-basics';
 import Icons from 'components/icons';
 import { useMessages } from 'components/hooks';

src/app/(main)/settings/teams/TeamsDataTable.tsx

@@ -1,4 +1,3 @@
-'use client';
 import DataTable from 'components/common/DataTable';
 import TeamsTable from 'app/(main)/settings/teams/TeamsTable';
 import { useTeams } from 'components/hooks';

src/app/(main)/settings/teams/TeamsHeader.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { Flexbox } from 'react-basics';
 import PageHeader from 'components/layout/PageHeader';
 import { ROLES } from 'lib/constants';

src/app/(main)/settings/teams/TeamsJoinButton.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { Button, Icon, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
 import Icons from 'components/icons';
 import { useMessages } from 'components/hooks';

src/app/(main)/settings/teams/TeamsPage.tsx

@@ -0,0 +1,12 @@
+'use client';
+import TeamsDataTable from './TeamsDataTable';
+import TeamsHeader from './TeamsHeader';
+
+export default function TeamsPage() {
+  return (
+    <>
+      <TeamsHeader />
+      <TeamsDataTable />
+    </>
+  );
+}

src/app/(main)/settings/teams/TeamsTable.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { GridColumn, GridTable, Icon, Text, useBreakpoint } from 'react-basics';
 import { useMessages } from 'components/hooks';
 import Icons from 'components/icons';

src/app/(main)/settings/teams/WebsiteTags.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { Button, Icon, Icons, Text } from 'react-basics';
 import styles from './WebsiteTags.module.css';
 

src/app/(main)/settings/teams/[teamId]/members/TeamMemberRemoveButton.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { useApi, useMessages } from 'components/hooks';
 import { Icon, Icons, LoadingButton, Text } from 'react-basics';
 import { touch } from 'store/modified';

src/app/(main)/settings/teams/[teamId]/members/TeamMembersDataTable.tsx

@@ -1,4 +1,3 @@
-'use client';
 import DataTable from 'components/common/DataTable';
 import TeamMembersTable from './TeamMembersTable';
 import { useTeamMembers } from 'components/hooks';

src/app/(main)/settings/teams/[teamId]/members/TeamMembersPage.tsx

@@ -1,17 +1,18 @@
 'use client';
+import TeamProvider from 'app/(main)/teams/[teamId]/TeamProvider';
 import TeamMembersDataTable from './TeamMembersDataTable';
 import PageHeader from 'components/layout/PageHeader';
 import { useMessages } from 'components/hooks';
 
-export function TeamMembers({ teamId }: { teamId: string }) {
+export function TeamMembersPage({ teamId }: { teamId: string }) {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <>
+    <TeamProvider teamId={teamId}>
       <PageHeader title={formatMessage(labels.members)} />
       <TeamMembersDataTable teamId={teamId} allowEdit={true} />
-    </>
+    </TeamProvider>
   );
 }
 
-export default TeamMembers;
+export default TeamMembersPage;

src/app/(main)/settings/teams/[teamId]/members/TeamMembersTable.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { GridColumn, GridTable, useBreakpoint } from 'react-basics';
 import { useMessages, useLogin } from 'components/hooks';
 import { ROLES } from 'lib/constants';

src/app/(main)/settings/teams/[teamId]/members/page.tsx

@@ -1,13 +1,8 @@
-import TeamMembers from './TeamMembers';
-import TeamProvider from 'app/(main)/teams/[teamId]/TeamProvider';
+import TeamMembersPage from './TeamMembersPage';
 import { Metadata } from 'next';
 
 export default function ({ params: { teamId } }) {
-  return (
-    <TeamProvider teamId={teamId}>
-      <TeamMembers teamId={teamId} />
-    </TeamProvider>
-  );
+  return <TeamMembersPage teamId={teamId} />;
 }
 
 export const metadata: Metadata = {

src/app/(main)/settings/teams/[teamId]/team/TeamAdmin.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { ActionForm, Button, Modal, ModalTrigger } from 'react-basics';
 import { useMessages } from 'components/hooks';
 import TeamDeleteForm from './TeamDeleteForm';

src/app/(main)/settings/teams/[teamId]/team/TeamDeleteForm.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { useApi, useMessages } from 'components/hooks';
 import { touch } from 'store/modified';
 import TypeConfirmationForm from 'components/common/TypeConfirmationForm';

src/app/(main)/settings/teams/[teamId]/team/TeamDetails.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { useContext, useState } from 'react';
 import { Item, Tabs, Flexbox, Text, Icon } from 'react-basics';
 import PageHeader from 'components/layout/PageHeader';
@@ -10,7 +9,7 @@ import TeamAdmin from './TeamAdmin';
 import LinkButton from 'components/common/LinkButton';
 import { TeamContext } from 'app/(main)/teams/[teamId]/TeamProvider';
 
-export function Team({ teamId }: { teamId: string }) {
+export function TeamDetails({ teamId }: { teamId: string }) {
   const team = useContext(TeamContext);
   const { formatMessage, labels } = useMessages();
   const { user } = useLogin();
@@ -42,4 +41,4 @@ export function Team({ teamId }: { teamId: string }) {
   );
 }
 
-export default Team;
+export default TeamDetails;

src/app/(main)/settings/teams/[teamId]/team/TeamEditForm.tsx

@@ -1,4 +1,3 @@
-'use client';
 import {
   SubmitButton,
   Form,

src/app/(main)/settings/teams/[teamId]/team/TeamPage.tsx

@@ -0,0 +1,13 @@
+'use client';
+import TeamProvider from 'app/(main)/teams/[teamId]/TeamProvider';
+import TeamDetails from './TeamDetails';
+
+export function TeamMembersPage({ teamId }: { teamId: string }) {
+  return (
+    <TeamProvider teamId={teamId}>
+      <TeamDetails teamId={teamId} />
+    </TeamProvider>
+  );
+}
+
+export default TeamMembersPage;

src/app/(main)/settings/teams/[teamId]/team/page.tsx

@@ -1,13 +1,8 @@
-import Team from './Team';
-import TeamProvider from 'app/(main)/teams/[teamId]/TeamProvider';
 import { Metadata } from 'next';
+import TeamPage from './TeamPage';
 
 export default function ({ params: { teamId } }) {
-  return (
-    <TeamProvider teamId={teamId}>
-      <Team teamId={teamId} />
-    </TeamProvider>
-  );
+  return <TeamPage teamId={teamId} />;
 }
 
 export const metadata: Metadata = {

src/app/(main)/settings/teams/[teamId]/websites/TeamWebsiteRemoveButton.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { useApi, useMessages } from 'components/hooks';
 import { Icon, Icons, LoadingButton, Text } from 'react-basics';
 

src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesDataTable.tsx

@@ -1,4 +1,3 @@
-'use client';
 import DataTable from 'components/common/DataTable';
 import { useTeamWebsites } from 'components/hooks';
 import TeamWebsitesTable from './TeamWebsitesTable';

src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesPage.tsx

@@ -1,17 +1,18 @@
 'use client';
+import TeamProvider from 'app/(main)/teams/[teamId]/TeamProvider';
 import TeamWebsitesDataTable from './TeamWebsitesDataTable';
 import PageHeader from 'components/layout/PageHeader';
 import { useMessages } from 'components/hooks';
 
-export function TeamWebsites({ teamId }: { teamId: string }) {
+export function TeamWebsitesPage({ teamId }: { teamId: string }) {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <>
+    <TeamProvider teamId={teamId}>
       <PageHeader title={formatMessage(labels.websites)} />
       <TeamWebsitesDataTable teamId={teamId} allowEdit={true} />
-    </>
+    </TeamProvider>
   );
 }
 
-export default TeamWebsites;
+export default TeamWebsitesPage;

src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesTable.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { GridColumn, GridTable, Icon, Text } from 'react-basics';
 import { useLogin, useMessages } from 'components/hooks';
 import Icons from 'components/icons';

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

@@ -1,15 +1,10 @@
-import TeamWebsites from './TeamWebsites';
-import TeamProvider from 'app/(main)/teams/[teamId]/TeamProvider';
+import TeamWebsitesPage from './TeamWebsitesPage';
 import { Metadata } from 'next';
 
 export default function ({ params: { teamId } }) {
-  return (
-    <TeamProvider teamId={teamId}>
-      <TeamWebsites teamId={teamId} />
-    </TeamProvider>
-  );
+  return <TeamWebsitesPage teamId={teamId} />;
 }
 
 export const metadata: Metadata = {
-  title: 'Teams websites - Umami',
+  title: 'Teams Websites - Umami',
 };

src/app/(main)/settings/teams/page.tsx

@@ -1,14 +1,8 @@
 import { Metadata } from 'next';
-import TeamsDataTable from './TeamsDataTable';
-import TeamsHeader from './TeamsHeader';
+import TeamsPage from './TeamsPage';
 
 export default function () {
-  return (
-    <>
-      <TeamsHeader />
-      <TeamsDataTable />
-    </>
-  );
+  return <TeamsPage />;
 }
 
 export const metadata: Metadata = {