Added settings layout.

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

@@ -0,0 +1,28 @@
+'use client';
+import { ReactNode } from 'react';
+import SettingsLayout from 'components/layout/SettingsLayout';
+import { useMessages } from 'components/hooks';
+
+export default function ({ children, teamId }: { children: ReactNode; teamId: string }) {
+  const { formatMessage, labels } = useMessages();
+
+  const items = [
+    {
+      key: 'team',
+      label: formatMessage(labels.team),
+      url: `/teams/${teamId}/settings/team`,
+    },
+    {
+      key: 'members',
+      label: formatMessage(labels.members),
+      url: `/teams/${teamId}/settings/members`,
+    },
+    {
+      key: 'websites',
+      label: formatMessage(labels.websites),
+      url: `/teams/${teamId}/settings/websites`,
+    },
+  ].filter(n => n);
+
+  return <SettingsLayout items={items}>{children}</SettingsLayout>;
+}

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

@@ -1,3 +1,5 @@
-import Layout from 'app/(main)/settings/layout';
+import TeamSettings from './TeamSettings';
 
-export default Layout;
+export default function ({ children, params: { teamId } }) {
+  return <TeamSettings teamId={teamId}>{children}</TeamSettings>;
+}

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

@@ -1,26 +1,23 @@
 'use client';
-import TeamEditForm from 'app/(main)/settings/teams/[teamId]/TeamEditForm';
-import { useLogin, useMessages, useTeam } from 'components/hooks';
-import { Loading } from 'react-basics';
+import { useContext } from 'react';
+import { useLogin, useMessages } from 'components/hooks';
 import PageHeader from 'components/layout/PageHeader';
 import { ROLES } from 'lib/constants';
+import TeamEditForm from 'app/(main)/settings/teams/[teamId]/TeamEditForm';
+import { TeamContext } from 'app/(main)/teams/[teamId]/TeamProvider';
 
 export default function Team({ teamId }: { teamId: string }) {
+  const team = useContext(TeamContext);
   const { user } = useLogin();
   const { formatMessage, labels } = useMessages();
-  const { data: team, isLoading } = useTeam(teamId);
   const allowEdit = !!team?.teamUser?.find(
     ({ userId, role }) => role === ROLES.teamOwner && userId === user.id,
   );
 
-  if (isLoading) {
-    return <Loading />;
-  }
-
   return (
     <>
       <PageHeader title={formatMessage(labels.team)} />
-      <TeamEditForm teamId={teamId} data={team} allowEdit={allowEdit} />
+      <TeamEditForm teamId={teamId} allowEdit={allowEdit} />
     </>
   );
 }