mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fresh settings layout

Browse Source
This commit is contained in:
m5r 2021-09-30 00:10:42 +02:00
parent d1b88078fb
commit 5e08863078
10 changed files with 28729 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/core/layouts/layout/index.tsx
View File

@ -28,11 +28,11 @@ const Layout: FunctionComponent<Props> = ({ children, title, pageTitle = title,
<> <>
{pageTitle ? ( {pageTitle ? (
<Head> <Head>
<title>{pageTitle}</title> <title>{pageTitle} | Shellphone</title>
</Head> </Head>
) : null} ) : null}
<div className="h-full w-full overflow-hidden fixed bg-gray-50"> <div className="h-full w-full overflow-hidden fixed bg-gray-100">
<div className="flex flex-col w-full h-full"> <div className="flex flex-col w-full h-full">
<div className="flex flex-col flex-1 w-full overflow-y-auto"> <div className="flex flex-col flex-1 w-full overflow-y-auto">
<main className="flex flex-col flex-1 my-0 h-full"> <main className="flex flex-col flex-1 my-0 h-full">

2
app/phone-calls/pages/keypad.tsx
View File

@ -74,7 +74,7 @@ const KeypadPage: BlitzPage = () => {
}); });
return ( return (
<div className="w-96 h-full flex flex-col justify-around py-5 mx-auto text-center text-black bg-white"> <div className="w-96 h-full flex flex-col justify-around py-5 mx-auto text-center text-black">
<div className="h-16 text-3xl text-gray-700"> <div className="h-16 text-3xl text-gray-700">
<span>{phoneNumber}</span> <span>{phoneNumber}</span>
</div> </div>

54
app/settings/components/settings-layout.tsx
View File

@ -1,17 +1,22 @@
import type { FunctionComponent } from "react"; import type { FunctionComponent } from "react";
import { useRouter } from "blitz"; import { Link, Routes, useRouter } from "blitz";
import { IoChevronBack } from "react-icons/io5"; import clsx from "clsx";
import { IoChevronBack, IoNotificationsOutline, IoCardOutline, IoPersonCircleOutline } from "react-icons/io5";
import Layout from "../../core/layouts/layout"; import Layout from "../../core/layouts/layout";
const pageTitle = "User Settings"; const subNavigation = [
{ name: "Account", href: Routes.Account(), icon: IoPersonCircleOutline },
{ name: "Plan & Billing", href: Routes.Billing(), icon: IoCardOutline },
{ name: "Notifications", href: Routes.Notifications(), icon: IoNotificationsOutline },
];
const SettingsLayout: FunctionComponent = ({ children }) => { const SettingsLayout: FunctionComponent = ({ children }) => {
const router = useRouter(); const router = useRouter();
return ( return (
<Layout title={pageTitle}> <Layout title="Settings">
<header className="px-4 sm:px-6 md:px-0"> <header className="bg-gray-100 px-2 sm:px-6 lg:px-8">
<header className="flex"> <header className="flex">
<span className="flex items-center cursor-pointer" onClick={router.back}> <span className="flex items-center cursor-pointer" onClick={router.back}>
<IoChevronBack className="h-8 w-8 mr-2" /> Back <IoChevronBack className="h-8 w-8 mr-2" /> Back
@ -19,7 +24,44 @@ const SettingsLayout: FunctionComponent = ({ children }) => {
</header> </header>
</header> </header>
<main className="flex flex-col flex-grow">{children}</main> <main className="flex-grow mx-auto w-full max-w-7xl pb-10 lg:py-12 lg:px-8">
<div className="lg:grid lg:grid-cols-12 lg:gap-x-5">
<aside className="py-6 px-2 sm:px-6 lg:py-0 lg:px-0 lg:col-span-3">
<nav className="space-y-1">
{subNavigation.map((item) => {
const isCurrentPage = item.href.pathname === router.pathname;
return (
<Link key={item.name} href={item.href}>
<a
className={clsx(
isCurrentPage
? "bg-gray-50 text-orange-600 hover:bg-white"
: "text-gray-900 hover:text-gray-900 hover:bg-gray-50",
"group rounded-md px-3 py-2 flex items-center text-sm font-medium",
)}
aria-current={isCurrentPage ? "page" : undefined}
>
<item.icon
className={clsx(
isCurrentPage
? "text-orange-500"
: "text-gray-400 group-hover:text-gray-500",
"flex-shrink-0 -ml-1 mr-3 h-6 w-6",
)}
aria-hidden="true"
/>
<span className="truncate">{item.name}</span>
</a>
</Link>
);
})}
</nav>
</aside>
<div className="overflow-y-auto space-y-6 px-2 sm:px-6 lg:px-0 lg:col-span-9">{children}</div>
</div>
</main>
</Layout> </Layout>
); );
}; };

2
app/settings/components/settings-section.tsx
View File

@ -6,7 +6,7 @@ type Props = {
}; };
const SettingsSection: FunctionComponent<Props> = ({ children, title, description }) => ( const SettingsSection: FunctionComponent<Props> = ({ children, title, description }) => (
<div className="px-4 sm:px-6 md:px-0 lg:grid lg:grid-cols-4 lg:gap-6"> <div className="px-4 sm:px-6 lg:px-0 lg:grid lg:grid-cols-4 lg:gap-6">
<div className="lg:col-span-1"> <div className="lg:col-span-1">
<h3 className="text-lg font-medium leading-6 text-gray-900">{title}</h3> <h3 className="text-lg font-medium leading-6 text-gray-900">{title}</h3>
{description ? <p className="mt-1 text-sm text-gray-600">{description}</p> : null} {description ? <p className="mt-1 text-sm text-gray-600">{description}</p> : null}

63
app/settings/pages/settings.tsx
View File

@ -1,63 +0,0 @@
import type { BlitzPage } from "blitz";
import { Routes, useMutation } from "blitz";
import { IoCardOutline, IoPersonCircleOutline } from "react-icons/io5";
import Layout from "../../core/layouts/layout";
import appLogger from "../../../integrations/logger";
import useRequireOnboarding from "../../core/hooks/use-require-onboarding";
import logout from "../../auth/mutations/logout";
const logger = appLogger.child({ page: "/settings" });
/* eslint-disable react/display-name */
const navigation = [
{
name: "Account",
href: "/settings/account",
icon: ({ className = "w-8 h-8" }) => <IoPersonCircleOutline className={className} />,
},
{
name: "Billing",
href: "/settings/billing",
icon: ({ className = "w-8 h-8" }) => <IoCardOutline className={className} />,
},
];
/* eslint-enable react/display-name */
const Settings: BlitzPage = () => {
useRequireOnboarding();
const [logoutMutation] = useMutation(logout);
return (
<>
<div className="flex flex-col space-y-6 p-6">
<h2 className="text-3xl font-bold">Settings</h2>
</div>
<div className="flex flex-col space-y-6 p-6">
<aside className="py-6 lg:col-span-3">
<nav className="space-y-1">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className="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"
>
<item.icon className="text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6" />
<span className="truncate">{item.name}</span>
</a>
))}
</nav>
</aside>
<button onClick={() => logoutMutation()}>Log out</button>
</div>
</>
);
};
Settings.getLayout = (page) => <Layout title="Settings">{page}</Layout>;
Settings.authenticate = { redirectTo: Routes.SignIn() };
export default Settings;

8
app/settings/pages/settings/billing.tsx
View File

@ -14,9 +14,13 @@ const logger = appLogger.child({ page: "/account/settings/billing" });
const Billing: BlitzPage = () => { const Billing: BlitzPage = () => {
/* /*
TODO: I want to be able to TODO: I want to be able to
- renew subscription (after pause/cancel for example) (message like "your subscription expired, would you like to renew ?") - subscribe
- know when is the last time I paid and for how much - cancel my sub
- upgrade to yearly
- downgrade to monthly
- resubscribe (after pause/cancel for example) (message like "your subscription expired, would you like to renew ?")
- know when is the next time I will pay and for how much - know when is the next time I will pay and for how much
- have access to my past invoices
*/ */
useRequireOnboarding(); useRequireOnboarding();

2
app/settings/pages/settings/account.tsx → app/settings/pages/settings/index.tsx
View File

@ -12,7 +12,7 @@ const Account: BlitzPage = () => {
useRequireOnboarding(); useRequireOnboarding();
return ( return (
<div className="flex flex-col space-y-6 p-6"> <div className="flex flex-col space-y-6">
<ProfileInformations /> <ProfileInformations />
<div className="hidden lg:block"> <div className="hidden lg:block">

14
app/settings/pages/settings/notifications.tsx Normal file
View File

@ -0,0 +1,14 @@
import type { BlitzPage } from "blitz";
import { Routes } from "blitz";
import SettingsLayout from "../../components/settings-layout";
const Notifications: BlitzPage = () => {
return <div>Coming soon</div>;
};
Notifications.getLayout = (page) => <SettingsLayout>{page}</SettingsLayout>;
Notifications.authenticate = { redirectTo: Routes.SignIn() };
export default Notifications;

28683
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -12,7 +12,7 @@
"prepare": "husky install" "prepare": "husky install"
}, },
"engines": { "engines": {
"node": ">=12 <15" "node": ">=16"
}, },
"prisma": { "prisma": {
"schema": "db/schema.prisma" "schema": "db/schema.prisma"