fixed mobile tabs in settings
Peer Richelsen
parent
6ae1be6912
commit
0568e7250c
|
|
@ -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="sm:hidden">
|
||||
<label htmlFor="tabs" className="sr-only">
|
||||
Select a tab
|
||||
</label>
|
||||
<select
|
||||
id="tabs"
|
||||
name="tabs"
|
||||
className="block w-full focus:ring-neutral-900 focus:border-neutral-900 border-gray-300 rounded-md"
|
||||
defaultValue={tabs.find((tab) => tab.current).name}>
|
||||
{tabs.map((tab) => (
|
||||
<option key={tab.name}>{tab.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="hidden sm:block">
|
||||
<div className="border-b border-gray-200">
|
||||
<nav className="-mb-px flex space-x-8" aria-label="Tabs">
|
||||
{tabs.map((tab) => (
|
||||
<Link
|
||||
key={tab.name}
|
||||
href={tab.href}>
|
||||
<a
|
||||
|
||||
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 className="min-w-full overflow-scroll sm:mx-auto -mx-4 min-h-16">
|
||||
<nav className="-mb-px flex space-x-8 px-4 sm:px-0 " aria-label="Tabs">
|
||||
{tabs.map((tab) => (
|
||||
<Link key={tab.name} href={tab.href}>
|
||||
<a
|
||||
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>
|
||||
<main>{props.children}</main>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,10 @@
|
|||
import Head from 'next/head';
|
||||
import Shell from '../../components/Shell';
|
||||
import SettingsShell from '../../components/Settings';
|
||||
import prisma from '../../lib/prisma';
|
||||
import {getSession, useSession} 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>;
|
||||
}
|
||||
import Head from "next/head";
|
||||
import Shell from "../../components/Shell";
|
||||
import SettingsShell from "../../components/Settings";
|
||||
import prisma from "../../lib/prisma";
|
||||
import { getSession } from "next-auth/client";
|
||||
|
||||
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);
|
||||
if (!session) {
|
||||
return { redirect: { permanent: false, destination: '/auth/login' } };
|
||||
}
|
||||
const session = await getSession(context);
|
||||
if (!session) {
|
||||
return { redirect: { permanent: false, destination: "/auth/login" } };
|
||||
}
|
||||
|
||||
const user = await prisma.user.findFirst({
|
||||
where: {
|
||||
email: session.user.email,
|
||||
},
|
||||
select: {
|
||||
id: true,
|
||||
username: true,
|
||||
name: true,
|
||||
email: true,
|
||||
bio: true,
|
||||
avatar: true,
|
||||
timeZone: true,
|
||||
weekStart: true,
|
||||
}
|
||||
});
|
||||
const user = await prisma.user.findFirst({
|
||||
where: {
|
||||
email: session.user.email,
|
||||
},
|
||||
select: {
|
||||
id: true,
|
||||
username: true,
|
||||
name: true,
|
||||
email: true,
|
||||
bio: true,
|
||||
avatar: true,
|
||||
timeZone: true,
|
||||
weekStart: true,
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
props: {user}, // will be passed to the page component as props
|
||||
}
|
||||
return {
|
||||
props: { user }, // will be passed to the page component as props
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue