diff --git a/components/FormList.tsx b/components/FormList.tsx index 8556c89edf..8ef0d04963 100644 --- a/components/FormList.tsx +++ b/components/FormList.tsx @@ -37,7 +37,7 @@ export default function FormList() { return ( <> -
+
{forms && (forms.length === 0 ? (
@@ -53,7 +53,7 @@ export default function FormList() {
) : ( -
diff --git a/components/layout/AnalyticsCard.tsx b/components/layout/AnalyticsCard.tsx deleted file mode 100644 index a3055e0df5..0000000000 --- a/components/layout/AnalyticsCard.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from "react"; -import { QuestionMarkCircleIcon } from "@heroicons/react/outline"; -import { classNames } from "../../lib/utils"; - -interface Props { - KPI: string | number; - typeText?: boolean; - label: string; - toolTipText: string; - trend: number; -} - -const AnalyticsCard: React.FC = ({ - KPI, - typeText = false, - label, - toolTipText, - trend, -}) => { - return ( -
-
- {label}{" "} - {toolTipText && ( - - )} -
-
- {KPI} - {trend && ( -
- {trend} % -
- )} -
-
- ); -}; - -export default AnalyticsCard; diff --git a/components/layout/BaseLayoutAuthorized.tsx b/components/layout/BaseLayoutAuthorized.tsx new file mode 100644 index 0000000000..96c06c2b4d --- /dev/null +++ b/components/layout/BaseLayoutAuthorized.tsx @@ -0,0 +1,73 @@ +import { signIn, useSession } from "next-auth/react"; +import Head from "next/head"; +import { classNames } from "../../lib/utils"; +import Loading from "../Loading"; +import MenuBreadcrumbs from "./MenuBreadcrumbs"; +import MenuProfile from "./MenuProfile"; +import MenuSteps from "./MenuSteps"; +import NewFormNavButton from "./NewFormNavButton"; + +interface BaseLayoutAuthorizedProps { + title: string; + breadcrumbs: any; + steps?: any; + currentStep?: string; + children: React.ReactNode; + limitHeightScreen?: boolean; +} + +export default function BaseLayoutAuthorized({ + title, + breadcrumbs, + steps, + currentStep, + children, + limitHeightScreen = false, +}: BaseLayoutAuthorizedProps) { + const { data: session, status } = useSession(); + + if (status === "loading") { + return ; + } + + if (!session) { + signIn(); + return
You need to be authenticated to view this page.
; + } + + return ( + <> + + {title} + +
+
+
+
+
+
+ + +
+
+ {steps && ( + + )} +
+
+ +
+
+
+
+ {children} +
+
+ + ); +} diff --git a/components/layout/FullWidth.tsx b/components/layout/FullWidth.tsx new file mode 100644 index 0000000000..ad832e0b88 --- /dev/null +++ b/components/layout/FullWidth.tsx @@ -0,0 +1,9 @@ +interface Props { + children?: React.ReactNode; +} + +const FullWidth: React.FC = ({ children }) => { + return
{children}
; +}; + +export default FullWidth; diff --git a/components/layout/LayoutBasic.tsx b/components/layout/LayoutBasic.tsx deleted file mode 100644 index f59eb184a5..0000000000 --- a/components/layout/LayoutBasic.tsx +++ /dev/null @@ -1,136 +0,0 @@ -/* This example requires Tailwind CSS v2.0+ */ -import { Fragment } from "react"; -import Image from "next/image"; -import { Disclosure, Menu, Transition } from "@headlessui/react"; -import { MenuIcon, XIcon } from "@heroicons/react/outline"; -import { signIn, signOut, useSession } from "next-auth/react"; -import Loading from "../Loading"; - -function classNames(...classes) { - return classes.filter(Boolean).join(" "); -} - -export default function Layout({ children }) { - const { data: session, status } = useSession(); - - if (status === "loading") { - return ; - } - - if (!session) { - signIn(); - return
You need to be authenticated to view this page.
; - } - - return ( -
- - {({ open }) => ( - <> -
-
-
-
- snoopForms logo -
-
-
- {/* Profile dropdown */} - - {({ open }) => ( - <> -
- - Open user menu - profile - -
- - - - {({ active }) => ( - - )} - - - - - )} - -
-
- {/* Mobile menu button */} - - Open main menu - {open ? ( - -
-
-
- - -
-
-
- user avatar -
-
-
- -
-
- - - )} - - -
{children}
-
- ); -} diff --git a/components/layout/LayoutFormBasic.tsx b/components/layout/LayoutFormBasic.tsx deleted file mode 100644 index 4dba7accae..0000000000 --- a/components/layout/LayoutFormBasic.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import Head from "next/head"; -import MenuBreadcrumbs from "./MenuBreadcrumbs"; -import MenuSteps from "./MenuSteps"; -import MenuProfile from "./MenuProfile"; -import { signIn, useSession } from "next-auth/react"; -import Loading from "../Loading"; - -export default function LayoutShare({ title, formId, currentStep, children }) { - const { data: session, status } = useSession(); - - if (status === "loading") { - return ; - } - - if (!session) { - signIn(); - return
You need to be authenticated to view this page.
; - } - - return ( - <> - - {title} - -
-
-
-
-
- - -
- {/* Profile dropdown */} - -
-
-
-
- - {/* Main content */} -
-
{children}
-
-
-
- - ); -} diff --git a/components/layout/LayoutFormBuilder.tsx b/components/layout/LayoutFormBuilder.tsx deleted file mode 100644 index a2390cbf2d..0000000000 --- a/components/layout/LayoutFormBuilder.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { signIn, useSession } from "next-auth/react"; -import Head from "next/head"; -import Loading from "../Loading"; -import MenuBreadcrumbs from "./MenuBreadcrumbs"; -import MenuProfile from "./MenuProfile"; -import MenuSteps from "./MenuSteps"; - -export default function LayoutFormResults({ - title, - formId, - currentStep, - children, -}) { - const { data: session, status } = useSession(); - - if (status === "loading") { - return ; - } - - if (!session) { - signIn(); - return
You need to be authenticated to view this page.
; - } - - return ( - <> - - {title} - -
-
-
-
-
- - -
- {/* Profile dropdown */} - -
-
-
-
- - {/* Main content */} - {children} -
-
- - ); -} diff --git a/components/layout/LayoutFormResults.tsx b/components/layout/LayoutFormResults.tsx deleted file mode 100644 index 42ffb16343..0000000000 --- a/components/layout/LayoutFormResults.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { signIn, useSession } from "next-auth/react"; -import Head from "next/head"; -import { classNames } from "../../lib/utils"; -import Loading from "../Loading"; -import MenuBreadcrumbs from "./MenuBreadcrumbs"; -import MenuProfile from "./MenuProfile"; -import MenuSteps from "./MenuSteps"; - -export default function LayoutFormResults({ - title, - formId, - resultMode, - setResultMode, - currentStep, - children, -}) { - const { data: session, status } = useSession(); - - if (status === "loading") { - return ; - } - - if (!session) { - signIn(); - return
You need to be authenticated to view this page.
; - } - - const resultModes = [ - { name: "Summary", id: "summary", icon: "" }, - { name: "Responses", id: "responses", icon: "" }, - { name: "Analytics", id: "analytics", icon: "" }, - ]; - return ( - <> - - {title} - -
-
-
-
-
- - -
- {/* Profile dropdown */} - -
-
-
-
-
- -
-
-
- - {/* Main content */} - {children} -
-
- - ); -} diff --git a/components/layout/LimitedWidth.tsx b/components/layout/LimitedWidth.tsx new file mode 100644 index 0000000000..5463678744 --- /dev/null +++ b/components/layout/LimitedWidth.tsx @@ -0,0 +1,9 @@ +interface Props { + children?: React.ReactNode; +} + +const LimitedWidth: React.FC = ({ children }) => { + return
{children}
; +}; + +export default LimitedWidth; diff --git a/components/layout/MenuBreadcrumbs.tsx b/components/layout/MenuBreadcrumbs.tsx index 682ed89579..3e549493b6 100644 --- a/components/layout/MenuBreadcrumbs.tsx +++ b/components/layout/MenuBreadcrumbs.tsx @@ -1,38 +1,11 @@ -import { HomeIcon, PlusIcon } from "@heroicons/react/outline"; +import { HomeIcon } from "@heroicons/react/outline"; import Link from "next/link"; -import { useForm } from "../../lib/forms"; -import Router from "next/router"; -import StandardButton from "../StandardButton"; -import { createForm } from "../../lib/forms"; - -export default function MenuBreadcrumbs({ formId }) { - const newForm = async () => { - const form = await createForm(); - await Router.push(`/forms/${form.id}/welcome`); - }; - - const { form, isLoadingForm } = useForm(formId); - - const pages = [ - { name: "Forms", href: "/forms", current: false }, - { name: form.name, href: "#", current: true }, - ]; - - if (isLoadingForm) { - return
; - } +export default function MenuBreadcrumbs({ breadcrumbs }) { return (