new changes

src/components/Dashboard/index.tsx

@@ -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>
+      )}
     </>
   );
 }