feat: color resource card based on remote connection type

outerbase · Feb 26, 2025 · 7a90994 · 7a90994
1 parent aab9cf3
commit 7a90994
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/src/app/(outerbase)/local/page.tsx b/src/app/(outerbase)/local/page.tsx
@@ -38,6 +38,7 @@ export default function LocalConnectionPage() {
         id: conn.id,
         type: conn.content.driver,
         status: "",
+        color: conn.content.label || "default",
       } as ResourceItemProps;
     });
   }, [localBases]);

diff --git a/src/app/(outerbase)/resource-item-helper.tsx b/src/app/(outerbase)/resource-item-helper.tsx
@@ -2,6 +2,7 @@ import { Input } from "@/components/orbit/input";
 import { MenuBar } from "@/components/orbit/menu-bar";
 import ResourceCard from "@/components/resource-card";
 import {
+  getDatabaseColor,
   getDatabaseFriendlyName,
   getDatabaseIcon,
   getDatabaseVisual,
@@ -36,6 +37,7 @@ export interface ResourceItemProps {
   href: string;
   status?: string;
   lastUsed: number;
+  color?: string;
 }
 
 export function getResourceItemPropsFromBase(
@@ -46,6 +48,7 @@ export function getResourceItemPropsFromBase(
     id: base.id,
     type: base.sources[0]?.type ?? "database",
     name: base.name,
+    color: getDatabaseColor(base.sources[0]?.type ?? "database"),
     href: `/w/${workspace.short_name}/${base.short_name}`,
     lastUsed: base.last_analytics_event?.created_at
       ? new Date(base.last_analytics_event?.created_at).getTime()
@@ -243,7 +246,7 @@ export function ResourceItemList({
                   <ResourceCard
                     key={resource.id}
                     className="w-full"
-                    color="default"
+                    color={resource.color ?? "default"}
                     icon={getDatabaseIcon(resource.type)}
                     href={resource.href}
                     title={resource.name}

diff --git a/src/components/resource-card/utils.tsx b/src/components/resource-card/utils.tsx
@@ -4,6 +4,7 @@ import {
   PostgreIcon,
   RqliteIcon,
   SQLiteIcon,
+  TursoIcon,
 } from "../icons/outerbase-icon";
 import { CloudflareIcon, StarbaseIcon, ValTownIcon } from "./icon";
 import {
@@ -41,8 +42,9 @@ export function getDatabaseIcon(type: string) {
   if (type === "cloudflare" || type === "cloudflare-d1") return CloudflareIcon;
   if (type === "valtown") return ValTownIcon;
   if (type === "starbasedb" || type === "starbase") return StarbaseIcon;
-  if (type === "libsql" || type === "turso") return SQLiteIcon;
+  if (type === "libsql" || type === "turso") return TursoIcon;
   if (type === "rqlite") return RqliteIcon;
+  if (type === "sqlite") return SQLiteIcon;
   if (type === "board") return ChartBar;
 
   return Database;
@@ -56,3 +58,10 @@ export function getDatabaseVisual(type: string) {
 
   return GeneralVisual;
 }
+
+export function getDatabaseColor(type: string) {
+  if (type === "cloudflare" || type === "cloudflare-d1") return "yellow";
+  if (type === "starbasedb" || type === "starbase") return "rainbow";
+  if (type === "libsql" || type === "turso") return "green";
+  return "default";
+}