iod/page-assist
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

basic settings added

Browse Source
This commit is contained in:
n4ze3m
2023-04-10 23:38:26 +05:30
parent 2c66e38698
commit dba761dcb1
10 changed files with 252 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/Dashboard/Empty.tsx Normal file
View File

@@ -0,0 +1,52 @@
import React from "react";
export default function Empty() {
return (
<div className="text-center">
<svg
className="mx-auto h-12 w-12 text-gray-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
vectorEffect="non-scaling-stroke"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"
/>
</svg>
<h3 className="mt-2 text-sm font-medium text-gray-900">No Chats Yet</h3>
<p className="mt-1 text-sm text-gray-500">
Get started by installing the Page Assist Chrome Extension.
</p>
<div className="mt-6">
<button
type="button"
className="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="-ml-1 mr-2 h-5 w-5"
aria-hidden="true"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
viewBox="0 0 24 24"
>
<circle cx="12" cy="12" r="10"></circle>
<circle cx="12" cy="12" r="4"></circle>
<path d="M21.17 8L12 8"></path>
<path d="M3.95 6.06L8.54 14"></path>
<path d="M10.88 21.94L15.46 14"></path>
</svg>
Install Extension
</button>
</div>
</div>
);
}

15
src/components/Dashboard/index.tsx Normal file
View File

@@ -0,0 +1,15 @@
import React from "react";
import Empty from "./Empty";
export default function DashboardBoby() {
return (
<>
{/* align to center of the screen */}
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div className=" px-4 py-8 sm:px-10">
<Empty />
</div>
</div>
</>
);
}

25
src/components/Layouts/DashboardLayout.tsx
View File

@@ -8,10 +8,12 @@ import {
} from "@heroicons/react/24/outline";
import { ChevronDownIcon } from "@heroicons/react/20/solid";
import { useUser } from "@supabase/auth-helpers-react";
import { useRouter } from "next/router";
import Link from "next/link";
const navigation = [
{ name: "Home", href: "#", icon: HomeIcon, current: true },
{ name: "Settings", href: "#", icon: CogIcon, current: false },
{ name: "Home", href: "/dashboard", icon: HomeIcon, current: true },
{ name: "Settings", href: "/dashboard/settings", icon: CogIcon, current: false },
];
//@ts-ignore
@@ -26,6 +28,7 @@ export default function DashboardLayout({
}) {
const [sidebarOpen, setSidebarOpen] = useState(false);
const user = useUser();
const router = useRouter();
return (
<>
@@ -95,20 +98,22 @@ export default function DashboardLayout({
>
<div className="space-y-1 px-2">
{navigation.map((item) => (
<a
<Link
key={item.name}
href={item.href}
className={classNames(
item.current
router.pathname === item.href
? "bg-gray-100 text-gray-900"
: "text-gray-600 hover:bg-gray-50 hover:text-gray-900",
"group flex items-center rounded-md px-2 py-2 text-sm font-medium"
)}
aria-current={item.current ? "page" : undefined}
aria-current={
router.pathname === item.href ? "page" : undefined
}
>
<item.icon
className={classNames(
item.current
router.pathname === item.href
? "text-gray-500"
: "text-gray-400 group-hover:text-gray-500",
"mr-3 h-6 w-6 flex-shrink-0"
@@ -116,7 +121,7 @@ export default function DashboardLayout({
aria-hidden="true"
/>
{item.name}
</a>
</Link>
))}
</div>
</nav>
@@ -144,16 +149,16 @@ export default function DashboardLayout({
key={item.name}
href={item.href}
className={classNames(
item.current
router.pathname === item.href
? "bg-gray-100 text-gray-900"
: "text-gray-600 hover:bg-gray-50 hover:text-gray-900",
"group flex items-center rounded-md px-2 py-2 text-sm font-medium"
)}
aria-current={item.current ? "page" : undefined}
aria-current={router.pathname === item.href ? "page" : undefined}
>
<item.icon
className={classNames(
item.current
router.pathname === item.href
? "text-gray-500"
: "text-gray-400 group-hover:text-gray-500",
"mr-3 h-6 w-6 flex-shrink-0"

61
src/components/Settings/index.tsx Normal file
View File

@@ -0,0 +1,61 @@
import React from "react";
import { ClipboardIcon } from "@heroicons/react/24/outline";
import { api } from "~/utils/api";
export default function SettingsBody() {
const { data, status } = api.settings.getAccessToken.useQuery();
const [isCopied, setIsCopied] = React.useState(false);
return (
<>
{status === "loading" && <div>Loading...</div>}
{status === "success" && (
<div className="divide-ylg:col-span-9">
<div className="px-4 py-6 sm:p-6 lg:pb-8">
<div>
<h2 className="text-lg font-medium leading-6 text-gray-900">
Chrom Extension
</h2>
<p className="mt-1 text-sm text-gray-500">
Copy the following code and paste it into the extension.
</p>
</div>
<div className="mt-6 flex flex-col lg:flex-row">
<div className="flex-grow space-y-6">
<div className="flex">
<div className="flex-grow">
<input
type="password"
readOnly
defaultValue={data?.accessToken || ""}
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-sky-500 focus:ring-sky-500 sm:text-sm"
/>
</div>
<span className="ml-3">
<button
type="button"
onClick={() => {
setIsCopied(false);
navigator.clipboard.writeText(data?.accessToken || "");
setIsCopied(true);
}}
className="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2"
>
<ClipboardIcon
className="h-5 w-5 text-gray-500"
aria-hidden="true"
/>
<span className="ml-2">
{isCopied ? "Copied" : "Copy"}
</span>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
)}
</>
);
}