new changes
This commit is contained in:
n4ze3m
@@ -1,51 +1,64 @@
|
||||
import { useRouter } from "next/router";
|
||||
import React from "react";
|
||||
|
||||
export default function Empty() {
|
||||
const router = useRouter();
|
||||
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"
|
||||
>
|
||||
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<div className=" px-4 py-8 sm:px-10">
|
||||
<div className="text-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="-ml-1 mr-2 h-5 w-5"
|
||||
aria-hidden="true"
|
||||
className="mx-auto h-12 w-12 text-gray-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
Install Extension
|
||||
</button>
|
||||
<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
|
||||
onClick={() => {
|
||||
router.push(
|
||||
"https://chrome.google.com/webstore/detail/page-assist/ehkjdalbpmmaddcfdilplgknkgepeakd?hl=en&authuser=2"
|
||||
);
|
||||
}}
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
21
src/components/Dashboard/Loading.tsx
Normal file
21
src/components/Dashboard/Loading.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import React from "react";
|
||||
|
||||
export default function Loading() {
|
||||
return (
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
{/* create skelon loadinf */}
|
||||
{[1, 2, 3, 4, 5, 6].map((item) => (
|
||||
<div
|
||||
className="flex h-35 cursor-pointer rounded-md shadow-sm transition-shadow duration-300 ease-in-out hover:shadow-lg"
|
||||
key={item}
|
||||
>
|
||||
<div className="flex flex-1 items-center justify-between truncate rounded-md border border-gray-200 bg-white">
|
||||
<div className="flex-1 truncate px-4 py-4 text-sm">
|
||||
<h3 className="h-10 animate-pulse bg-gray-400 font-medium text-gray-900 hover:text-gray-600" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,15 +1,74 @@
|
||||
import React from "react";
|
||||
import Empty from "./Empty";
|
||||
import Loading from "./Loading";
|
||||
import { api } from "~/utils/api";
|
||||
import { ChevronRightIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
export default function DashboardBoby() {
|
||||
const { data: savedSites, status } = api.chat.getSavedSitesForChat.useQuery();
|
||||
|
||||
const iconUrl = (icon: string, url: string) => {
|
||||
// check if icon is valid url (http:// or https://)
|
||||
if (icon.startsWith("http://") || icon.startsWith("https://")) {
|
||||
return icon;
|
||||
}
|
||||
|
||||
// check if icon is valid url (//)
|
||||
if (icon.startsWith("//")) {
|
||||
return `https:${icon}`;
|
||||
}
|
||||
|
||||
const host = new URL(url).hostname;
|
||||
const protocol = new URL(url).protocol;
|
||||
|
||||
return `${protocol}//${host}/${icon}`;
|
||||
};
|
||||
|
||||
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 />
|
||||
{status === "loading" && <Loading />}
|
||||
{status === "success" && savedSites.data.length === 0 && <Empty />}
|
||||
{status === "success" && savedSites.data.length > 0 && (
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
{savedSites.data.map((site, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="bg-panel-header-light border-panel-border-light hover:bg-panel-border-light hover:border-panel-border-hover-light h-30 group relative flex cursor-pointer flex-row rounded-md border px-6 py-4 text-left transition duration-150 ease-in-out hover:border-gray-300"
|
||||
>
|
||||
<div className="flex h-full w-full flex-col space-y-2 ">
|
||||
<div className="text-scale-1200">
|
||||
<div className="flex w-full flex-row justify-between gap-1">
|
||||
<span
|
||||
className={`flex-shrink ${
|
||||
site?.title && site?.title?.length > 50
|
||||
? "truncate"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{site.title}
|
||||
</span>
|
||||
<ChevronRightIcon className="h-10 w-10 text-gray-400 group-hover:text-gray-500" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bottom-0">
|
||||
<div className="flex w-full flex-row gap-1">
|
||||
<img
|
||||
className="h-5 w-5 rounded-md"
|
||||
// @ts-ignore
|
||||
src={iconUrl(site.icon, site.url)}
|
||||
alt=""
|
||||
/>
|
||||
<span className="text-scale-1000 ml-3 flex-shrink truncate text-xs text-gray-400">
|
||||
{site.url && new URL(site.url).hostname}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user