mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

fixed mobile tabs in settings

Browse source
This commit is contained in:
Peer Richelsen 2021-08-02 19:29:34 +02:00
parent 6ae1be6912
commit 0568e7250c
2 changed files with 77 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
components/Settings.tsx
View file

@ -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 { CreditCardIcon, UserIcon, CodeIcon, KeyIcon, UserGroupIcon } from "@heroicons/react/solid";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
@ -10,39 +10,40 @@ export default function SettingsShell(props) {
const router = useRouter(); const router = useRouter();
const tabs = [ 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: "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 ( return (
<div className="max-w-6xl"> <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">
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) => ( {tabs.map((tab) => (
<option key={tab.name}>{tab.name}</option> <Link key={tab.name} href={tab.href}>
))}
</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 <a
className={classNames( className={classNames(
tab.current tab.current
? "border-neutral-900 text-neutral-900" ? "border-neutral-900 text-neutral-900"
@ -63,8 +64,6 @@ export default function SettingsShell(props) {
))} ))}
</nav> </nav>
</div> </div>
</div>
</div>
<main>{props.children}</main> <main>{props.children}</main>
</div> </div>
); );

28
pages/settings/billing.tsx
View file

@ -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 ( return (
<Shell heading="Billing" subtitle="Manage your billing information and cancel your subscription."> <Shell heading="Billing" subtitle="Manage your billing information and cancel your subscription.">
<Head> <Head>
@ -18,10 +12,6 @@ export default function Billing(props) {
</Head> </Head>
<SettingsShell> <SettingsShell>
<div className="py-6 lg:pb-8 lg:col-span-9"> <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"> <div className="my-6">
<iframe <iframe
src="https://calendso.com/subscription-embed" src="https://calendso.com/subscription-embed"
@ -37,7 +27,7 @@ export default function Billing(props) {
export async function getServerSideProps(context) { 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({
@ -53,10 +43,10 @@ export async function getServerSideProps(context) {
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
} };
} }