mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests 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 ? (
<Head>
<title>{pageTitle}</title>
<title>{pageTitle} | Shellphone</title>
</Head>
) : 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 flex-1 w-full overflow-y-auto">
<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 (
<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">
<span>{phoneNumber}</span>
</div>

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

@ -1,17 +1,22 @@
import type { FunctionComponent } from "react";
import { useRouter } from "blitz";
import { IoChevronBack } from "react-icons/io5";
import { Link, Routes, useRouter } from "blitz";
import clsx from "clsx";
import { IoChevronBack, IoNotificationsOutline, IoCardOutline, IoPersonCircleOutline } from "react-icons/io5";
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 router = useRouter();
return (
<Layout title={pageTitle}>
<header className="px-4 sm:px-6 md:px-0">
<Layout title="Settings">
<header className="bg-gray-100 px-2 sm:px-6 lg:px-8">
<header className="flex">
<span className="flex items-center cursor-pointer" onClick={router.back}>
<IoChevronBack className="h-8 w-8 mr-2" /> Back
@ -19,7 +24,44 @@ const SettingsLayout: FunctionComponent = ({ children }) => {
</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>
);
};

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

@ -6,7 +6,7 @@ type Props = {
};
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">
<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}

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 = () => {
/*
TODO: I want to be able to
- renew subscription (after pause/cancel for example) (message like "your subscription expired, would you like to renew ?")
- know when is the last time I paid and for how much
- subscribe
- 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
- have access to my past invoices
*/
useRequireOnboarding();

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

@ -12,7 +12,7 @@ const Account: BlitzPage = () => {
useRequireOnboarding();
return (
<div className="flex flex-col space-y-6 p-6">
<div className="flex flex-col space-y-6">
<ProfileInformations />
<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"
},
"engines": {
"node": ">=12 <15"
"node": ">=16"
},
"prisma": {
"schema": "db/schema.prisma"