From 872cc82c73382fa7a2da3c191e667ead1ca2a781 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Sat, 5 Oct 2024 09:48:09 +0700
Subject: [PATCH] add starbase new icon

---
 src/app/(theme)/connect/driver-dropdown.tsx   |   3 +-
 .../connect/saved-connection-storage.ts       |   5 +-
 src/components/icons/outerbase-icon.tsx       | 228 ++++++++++++++++++
 3 files changed, 233 insertions(+), 3 deletions(-)

diff --git a/src/app/(theme)/connect/driver-dropdown.tsx b/src/app/(theme)/connect/driver-dropdown.tsx
index de6ed00..bf3e5dd 100644
--- a/src/app/(theme)/connect/driver-dropdown.tsx
+++ b/src/app/(theme)/connect/driver-dropdown.tsx
@@ -13,6 +13,7 @@ import {
   MySQLIcon,
   RqliteIcon,
   SQLiteIcon,
+  StarbaseIcon,
   TursoIcon,
   ValtownIcon,
 } from "@/components/icons/outerbase-icon";
@@ -90,7 +91,7 @@ export default function DriverDropdown({
                 }}
               >
                 <div className="flex gap-4 px-2 items-center h-8">
-                  <SQLiteIcon className="w-6 h-6" />
+                  <StarbaseIcon className="w-6 h-6" />
                   <div className="font-semibold">StarbaseDB</div>
                 </div>
               </DropdownMenuItem>
diff --git a/src/app/(theme)/connect/saved-connection-storage.ts b/src/app/(theme)/connect/saved-connection-storage.ts
index 46df2ce..28eb6ef 100644
--- a/src/app/(theme)/connect/saved-connection-storage.ts
+++ b/src/app/(theme)/connect/saved-connection-storage.ts
@@ -2,6 +2,7 @@ import {
   CloudflareIcon,
   RqliteIcon,
   SQLiteIcon,
+  StarbaseIcon,
   TursoIcon,
   ValtownIcon,
 } from "@/components/icons/outerbase-icon";
@@ -93,8 +94,8 @@ export const DRIVER_DETAIL: Record<SupportedDriver, DriverDetail> =
     },
     starbase: {
       name: "starbase",
-      displayName: "Starbase",
-      icon: SQLiteIcon,
+      displayName: "StarbaseDB",
+      icon: StarbaseIcon,
       disableRemote: true,
       prefill: "",
       fields: [
diff --git a/src/components/icons/outerbase-icon.tsx b/src/components/icons/outerbase-icon.tsx
index 07a3d7f..802a224 100644
--- a/src/components/icons/outerbase-icon.tsx
+++ b/src/components/icons/outerbase-icon.tsx
@@ -1,5 +1,233 @@
 import { cn } from "@/lib/utils";
 
+export function StarbaseIcon({ className }: { className: string }) {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      className={cn("w-12 h-12 flex-shrink-0", className)}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="8.30762"
+        y="15.2308"
+        width="1.38462"
+        height="1.38462"
+        fill="black"
+      />
+      <rect
+        x="8.30762"
+        y="16.6154"
+        width="1.38462"
+        height="1.38462"
+        fill="black"
+      />
+      <rect
+        x="6.92285"
+        y="13.8461"
+        width="1.38462"
+        height="1.38462"
+        fill="black"
+      />
+      <rect
+        x="9.69238"
+        y="13.8461"
+        width="1.38462"
+        height="1.38462"
+        fill="black"
+      />
+      <rect
+        x="9.69238"
+        y="12.4615"
+        width="1.38462"
+        height="1.38462"
+        fill="black"
+      />
+      <rect
+        x="11.0771"
+        y="11.0769"
+        width="1.38462"
+        height="1.38462"
+        fill="black"
+      />
+      <rect
+        x="11.0771"
+        y="5.53845"
+        width="1.38462"
+        height="1.38462"
+        fill="black"
+      />
+      <rect
+        x="6.92285"
+        y="12.4615"
+        width="1.38462"
+        height="1.38462"
+        fill="black"
+      />
+      <rect
+        x="9.69238"
+        y="2.76923"
+        width="1.38462"
+        height="1.38462"
+        transform="rotate(180 9.69238 2.76923)"
+        fill="black"
+      />
+      <rect
+        x="9.69238"
+        y="1.38464"
+        width="1.38462"
+        height="1.38462"
+        transform="rotate(180 9.69238 1.38464)"
+        fill="black"
+      />
+      <rect
+        x="11.0771"
+        y="4.15387"
+        width="1.38462"
+        height="1.38462"
+        transform="rotate(180 11.0771 4.15387)"
+        fill="black"
+      />
+      <rect
+        x="8.30762"
+        y="4.15387"
+        width="1.38462"
+        height="1.38462"
+        transform="rotate(180 8.30762 4.15387)"
+        fill="black"
+      />
+      <rect
+        x="8.30762"
+        y="5.53845"
+        width="1.38462"
+        height="1.38462"
+        transform="rotate(180 8.30762 5.53845)"
+        fill="black"
+      />
+      <rect
+        x="11.0771"
+        y="5.53845"
+        width="1.38462"
+        height="1.38462"
+        transform="rotate(180 11.0771 5.53845)"
+        fill="black"
+      />
+      <rect
+        x="15.2305"
+        y="9.69232"
+        width="1.38462"
+        height="1.38462"
+        transform="rotate(-90 15.2305 9.69232)"
+        fill="black"
+      />
+      <rect
+        x="16.6152"
+        y="9.69232"
+        width="1.38462"
+        height="1.38462"
+        transform="rotate(-90 16.6152 9.69232)"
+        fill="black"
+      />
+      <rect
+        x="13.8457"
+        y="11.0769"
+        width="1.38462"
+        height="1.38462"
+        transform="rotate(-90 13.8457 11.0769)"
+        fill="black"
+      />
+      <rect
+        x="13.8457"
+        y="8.30768"
+        width="1.38462"
+        height="1.38462"
+        transform="rotate(-90 13.8457 8.30768)"
+        fill="black"
+      />
+      <rect
+        x="12.4619"
+        y="8.30768"
+        width="1.38462"
+        height="1.38462"
+        transform="rotate(-90 12.4619 8.30768)"
+        fill="black"
+      />
+      <rect
+        x="12.4619"
+        y="11.0769"
+        width="1.38462"
+        height="1.38462"
+        transform="rotate(-90 12.4619 11.0769)"
+        fill="black"
+      />
+      <rect
+        x="2.76953"
+        y="8.30768"
+        width="1.38462"
+        height="1.38462"
+        transform="rotate(90 2.76953 8.30768)"
+        fill="black"
+      />
+      <rect
+        x="1.38477"
+        y="8.30768"
+        width="1.38462"
+        height="1.38462"
+        transform="rotate(90 1.38477 8.30768)"
+        fill="black"
+      />
+      <rect
+        x="4.1543"
+        y="6.9231"
+        width="1.38462"
+        height="1.38462"
+        transform="rotate(90 4.1543 6.9231)"
+        fill="black"
+      />
+      <rect
+        x="4.1543"
+        y="9.69232"
+        width="1.38462"
+        height="1.38462"
+        transform="rotate(90 4.1543 9.69232)"
+        fill="black"
+      />
+      <rect
+        x="5.53809"
+        y="9.69232"
+        width="1.38462"
+        height="1.38462"
+        transform="rotate(90 5.53809 9.69232)"
+        fill="black"
+      />
+      <rect
+        x="5.53809"
+        y="6.9231"
+        width="1.38462"
+        height="1.38462"
+        transform="rotate(90 5.53809 6.9231)"
+        fill="black"
+      />
+      <rect
+        x="5.53809"
+        y="11.0769"
+        width="1.38462"
+        height="1.38462"
+        fill="black"
+      />
+      <rect
+        x="5.53809"
+        y="5.53845"
+        width="1.38462"
+        height="1.38462"
+        fill="black"
+      />
+    </svg>
+  );
+}
+
 export function MySQLIcon({ className }: { className?: string }) {
   return (
     <svg