Add embed section in Settings
This commit is contained in:
Bailey Pumfleet
parent
7d6a631f5d
commit
2726c8c87b
2 changed files with 113 additions and 1 deletions
|
|
@ -1,6 +1,6 @@
|
|||
import Link from 'next/link';
|
||||
import { useRouter } from "next/router";
|
||||
import { UserCircleIcon, KeyIcon } from '@heroicons/react/outline';
|
||||
import { UserCircleIcon, KeyIcon, CodeIcon } from '@heroicons/react/outline';
|
||||
|
||||
export default function SettingsShell(props) {
|
||||
const router = useRouter();
|
||||
|
|
@ -42,6 +42,15 @@ export default function SettingsShell(props) {
|
|||
</a>
|
||||
</Link>
|
||||
|
||||
<Link href="/settings/embed">
|
||||
<a className={router.pathname == "/settings/embed" ? "bg-blue-50 border-blue-500 text-blue-700 hover:bg-blue-50 hover:text-blue-700 group border-l-4 px-3 py-2 flex items-center text-sm font-medium" : "border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900 group border-l-4 px-3 py-2 flex items-center text-sm font-medium"}>
|
||||
<CodeIcon className={router.pathname == "/settings/embed" ? "text-blue-500 group-hover:text-blue-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6" : "text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6"} />
|
||||
<span className="truncate">
|
||||
Embed
|
||||
</span>
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
{/* <Link href="/settings/notifications">
|
||||
<a className={router.pathname == "/settings/notifications" ? "bg-blue-50 border-blue-500 text-blue-700 hover:bg-blue-50 hover:text-blue-700 group border-l-4 px-3 py-2 flex items-center text-sm font-medium" : "border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900 group border-l-4 px-3 py-2 flex items-center text-sm font-medium"}>
|
||||
<svg className={router.pathname == "/settings/notifications" ? "text-blue-500 group-hover:text-blue-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6" : "text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6"} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
|
|
|
|||
103
pages/settings/embed.tsx
Normal file
103
pages/settings/embed.tsx
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
import Head from 'next/head';
|
||||
import Link from 'next/link';
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import prisma from '../../lib/prisma';
|
||||
import Modal from '../../components/Modal';
|
||||
import Shell from '../../components/Shell';
|
||||
import SettingsShell from '../../components/Settings';
|
||||
import Avatar from '../../components/Avatar';
|
||||
import { signIn, useSession, getSession } from 'next-auth/client';
|
||||
import TimezoneSelect from 'react-timezone-select';
|
||||
|
||||
export default function Embed(props) {
|
||||
const [ session, loading ] = useSession();
|
||||
const router = useRouter();
|
||||
|
||||
if (loading) {
|
||||
return <p className="text-gray-400">Loading...</p>;
|
||||
}
|
||||
|
||||
return(
|
||||
<Shell heading="Embed">
|
||||
<Head>
|
||||
<title>Embed | Calendso</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<SettingsShell>
|
||||
<div className="py-6 px-4 sm:p-6 lg:pb-8 lg:col-span-9">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-lg leading-6 font-medium text-gray-900">Iframe Embed</h2>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
The easiest way to embed Calendso on your website.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 space-x-4">
|
||||
<div>
|
||||
<label htmlFor="iframe" className="block text-sm font-medium text-gray-700">
|
||||
Standard iframe
|
||||
</label>
|
||||
<div className="mt-1">
|
||||
<textarea
|
||||
id="iframe"
|
||||
className="h-32 shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
placeholder="Loading..."
|
||||
defaultValue={'<iframe src="https://calendso.com/' + session.user.username + '" frameborder="0" allowfullscreen></iframe>'}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="fullscreen" className="block text-sm font-medium text-gray-700">
|
||||
Responsive full screen iframe
|
||||
</label>
|
||||
<div className="mt-1">
|
||||
<textarea
|
||||
id="fullscreen"
|
||||
className="h-32 shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
placeholder="Loading..."
|
||||
defaultValue={'<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Schedule a meeting</title><style>body {margin: 0;}iframe {height: calc(100vh - 4px);width: calc(100vw - 4px);box-sizing: border-box;}</style></head><body><iframe src="https://calendso.com/' + session.user.username + '" frameborder="0" allowfullscreen></iframe></body></html>'}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-6">
|
||||
<h2 className="text-lg leading-6 font-medium text-gray-900">Calendso API</h2>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
Leverage our API for full control and customizability.
|
||||
</p>
|
||||
</div>
|
||||
<a href="https://api.docs.calendso.com" className="btn btn-primary">Browse our API documentation</a>
|
||||
</div>
|
||||
</SettingsShell>
|
||||
</Shell>
|
||||
);
|
||||
}
|
||||
|
||||
export async function getServerSideProps(context) {
|
||||
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,
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
props: {user}, // will be passed to the page component as props
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue