fixed mobile tabs in settings

components/Settings.tsx

@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import Link from "next/link";
 import { CreditCardIcon, UserIcon, CodeIcon, KeyIcon, UserGroupIcon } from "@heroicons/react/solid";
 import { useRouter } from "next/router";
 
@@ -10,60 +10,59 @@ export default function SettingsShell(props) {
   const router = useRouter();
 
   const tabs = [
-    { name: "Profile", href: "/settings/profile", icon: UserIcon, current: router.pathname == "/settings/profile" },
+    {
-    { name: "Password", href: "/settings/password", icon: KeyIcon, current: router.pathname == "/settings/password" },
+      name: "Profile",
+      href: "/settings/profile",
+      icon: UserIcon,
+      current: router.pathname == "/settings/profile",
+    },
+    {
+      name: "Password",
+      href: "/settings/password",
+      icon: KeyIcon,
+      current: router.pathname == "/settings/password",
+    },
     { name: "Embed", href: "/settings/embed", icon: CodeIcon, current: router.pathname == "/settings/embed" },
-    { name: "Teams", href: "/settings/teams", icon: UserGroupIcon, current: router.pathname == "/settings/teams" },
+    {
-    { name: "Billing", href: "/settings/billing", icon: CreditCardIcon, current: router.pathname == "/settings/billing" },
+      name: "Teams",
+      href: "/settings/teams",
+      icon: UserGroupIcon,
+      current: router.pathname == "/settings/teams",
+    },
+    {
+      name: "Billing",
+      href: "/settings/billing",
+      icon: CreditCardIcon,
+      current: router.pathname == "/settings/billing",
+    },
   ];
 
   return (
     <div className="max-w-6xl">
-      <div>
+      <div className="min-w-full overflow-scroll sm:mx-auto -mx-4 min-h-16">
-        <div className="sm:hidden">
+        <nav className="-mb-px flex space-x-8 px-4 sm:px-0 " aria-label="Tabs">
-          <label htmlFor="tabs" className="sr-only">
+          {tabs.map((tab) => (
-            Select a tab
+            <Link key={tab.name} href={tab.href}>
-          </label>
+              <a
-          <select
+                className={classNames(
-            id="tabs"
+                  tab.current
-            name="tabs"
+                    ? "border-neutral-900 text-neutral-900"
-            className="block w-full focus:ring-neutral-900 focus:border-neutral-900 border-gray-300 rounded-md"
+                    : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
-            defaultValue={tabs.find((tab) => tab.current).name}>
+                  "group inline-flex items-center py-4 px-1 border-b-2 font-medium text-sm"
-            {tabs.map((tab) => (
+                )}
-              <option key={tab.name}>{tab.name}</option>
+                aria-current={tab.current ? "page" : undefined}>
-            ))}
+                <tab.icon
-          </select>
+                  className={classNames(
-        </div>
+                    tab.current ? "text-neutral-900" : "text-gray-400 group-hover:text-gray-500",
-        <div className="hidden sm:block">
+                    "-ml-0.5 mr-2 h-5 w-5"
-          <div className="border-b border-gray-200">
+                  )}
-            <nav className="-mb-px flex space-x-8" aria-label="Tabs">
+                  aria-hidden="true"
-              {tabs.map((tab) => (
+                />
-                <Link
+                <span>{tab.name}</span>
-                  key={tab.name}
+              </a>
-                  href={tab.href}>
+            </Link>
-                  <a
+          ))}
-
+        </nav>
-                    className={classNames(
-                      tab.current
-                        ? "border-neutral-900 text-neutral-900"
-                        : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
-                      "group inline-flex items-center py-4 px-1 border-b-2 font-medium text-sm"
-                    )}
-                    aria-current={tab.current ? "page" : undefined}>
-                    <tab.icon
-                      className={classNames(
-                        tab.current ? "text-neutral-900" : "text-gray-400 group-hover:text-gray-500",
-                        "-ml-0.5 mr-2 h-5 w-5"
-                      )}
-                      aria-hidden="true"
-                    />
-                    <span>{tab.name}</span>
-                  </a>
-                </Link>
-              ))}
-            </nav>
-          </div>
-        </div>
       </div>
       <main>{props.children}</main>
     </div>

pages/settings/billing.tsx

@@ -1,16 +1,10 @@
-import Head from 'next/head';
+import Head from "next/head";
-import Shell from '../../components/Shell';
+import Shell from "../../components/Shell";
-import SettingsShell from '../../components/Settings';
+import SettingsShell from "../../components/Settings";
-import prisma from '../../lib/prisma';
+import prisma from "../../lib/prisma";
-import {getSession, useSession} from 'next-auth/client';
+import { getSession } from "next-auth/client";
-
-export default function Billing(props) {
-    const [ session, loading ] = useSession();
-
-    if (loading) {
-        return <div className="loader"><span className="loader-inner"></span></div>;
-    }
 
+export default function Billing() {
   return (
     <Shell heading="Billing" subtitle="Manage your billing information and cancel your subscription.">
       <Head>
@@ -18,10 +12,6 @@ export default function Billing(props) {
       </Head>
       <SettingsShell>
         <div className="py-6 lg:pb-8 lg:col-span-9">
-          <div className="mb-6">
-            <h2 className="text-lg leading-6 font-medium text-gray-900">Change your Subscription</h2>
-            <p className="mt-1 text-sm text-gray-500">Cancel, update credit card or change plan</p>
-          </div>
           <div className="my-6">
             <iframe
               src="https://calendso.com/subscription-embed"
@@ -35,28 +25,28 @@ export default function Billing(props) {
 }
 
 export async function getServerSideProps(context) {
-    const session = await getSession(context);
+  const session = await getSession(context);
-    if (!session) {
+  if (!session) {
-        return { redirect: { permanent: false, destination: '/auth/login' } };
+    return { redirect: { permanent: false, destination: "/auth/login" } };
-    }
+  }
 
-    const user = await prisma.user.findFirst({
+  const user = await prisma.user.findFirst({
-        where: {
+    where: {
-            email: session.user.email,
+      email: session.user.email,
-        },
+    },
-        select: {
+    select: {
-            id: true,
+      id: true,
-            username: true,
+      username: true,
-            name: true,
+      name: true,
-            email: true,
+      email: true,
-            bio: true,
+      bio: true,
-            avatar: true,
+      avatar: true,
-            timeZone: true,
+      timeZone: true,
-            weekStart: true,
+      weekStart: true,
-        }
+    },
-    });
+  });
 
-    return {
+  return {
-      props: {user}, // will be passed to the page component as props
+    props: { user }, // will be passed to the page component as props
-    }
+  };
 }