fix: runtime bugs

Author: pan93412

app/(admin)/(question-management)/database/[id]/_components/relation-card.tsx

@@ -2,7 +2,6 @@
 
 import { CardLayout } from "@/components/card-layout";
 import { useSuspenseQuery } from "@apollo/client/react";
-import Image from "next/image";
 import { DATABASE_DETAIL_QUERY } from "./query";
 
 export function RelationCard({ id }: { id: string }) {
@@ -22,19 +21,17 @@ export function RelationCard({ id }: { id: string }) {
           ? (
             <div>
               <div className="overflow-hidden rounded-lg border">
-                <Image
-                  unoptimized
-                  src={database.relationFigure}
-                  alt="資料庫關係圖"
-                  className="h-auto max-h-96 w-full object-contain"
-                  onError={(e) => {
-                    e.currentTarget.style.display = "none";
-                    e.currentTarget.nextElementSibling?.classList.remove("hidden");
-                  }}
-                />
-                <div className="hidden p-4 text-center text-muted-foreground">
-                  無法載入圖片
-                </div>
+                <picture>
+                  <img
+                    src={database.relationFigure}
+                    alt="資料庫關係圖"
+                    className="h-auto max-h-96 w-full object-contain"
+                    onError={(e) => {
+                      e.currentTarget.style.display = "none";
+                      e.currentTarget.nextElementSibling?.classList.remove("hidden");
+                    }}
+                  />
+                </picture>
               </div>
             </div>
           )

components/app-sidebar.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { Book, Code, LibrarySquare, type LucideIcon, SquareUser } from "lucide-react";
-import Image from "next/image";
 import * as React from "react";
 
 import { NavMain } from "@/components/nav-main";
@@ -20,6 +19,7 @@ import { useUser } from "@/providers/use-user";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { Suspense } from "react";
+import { Logo } from "./logo";
 
 export interface NavItem {
   title: string;
@@ -127,13 +127,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                     rounded-lg text-sidebar-primary-foreground
                   `}
                 >
-                  <Image
-                    src="/logo.svg"
-                    unoptimized
-                    alt="Database Playground"
-                    width={16}
-                    height={16}
-                  />
+                  <Logo />
                 </div>
                 <div className="grid flex-1 text-left text-sm leading-tight">
                   <span className="truncate font-medium">資料庫練功坊</span>