| @@ -1,6 +1,7 @@ |
| 1 | 1 | import type { EnvironmentId } from "@t3tools/contracts"; |
| 2 | 2 | import { isProjectFaviconFallbackUrl } from "@t3tools/shared/projectFavicon"; |
| 3 | 3 | import { FolderIcon } from "lucide-react"; |
| 4 | +import type { ComponentType } from "react"; |
| 4 | 5 | import { useState } from "react"; |
| 5 | 6 | import { useAssetUrl } from "../assets/assetUrls"; |
| 6 | 7 | |
| @@ -10,29 +11,46 @@ export function ProjectFavicon(input: { · 3 unmodified lines |
| 10 | 11 | environmentId: EnvironmentId; |
| 11 | 12 | cwd: string; |
| 12 | 13 | className?: string | undefined; |
| 14 | + fallbackIcon?: ComponentType<{ className?: string }>; |
| 13 | 15 | }) { |
| 14 | 16 | const src = useAssetUrl(input.environmentId, { |
| 15 | 17 | _tag: "project-favicon", |
| 16 | 18 | cwd: input.cwd, |
| 17 | 19 | }); |
| 20 | + const FallbackIcon = input.fallbackIcon ?? FolderIcon; |
| 18 | 21 | |
| 19 | 22 | if (!src || isProjectFaviconFallbackUrl(src)) { |
| 20 | | − return <ProjectFaviconFallback className={input.className} />; |
| 23 | + return <ProjectFaviconFallback className={input.className} icon={FallbackIcon} />; |
| 21 | 24 | } |
| 22 | 25 | |
| 23 | | − return <ProjectFaviconImage key={src} src={src} className={input.className} />; |
| 26 | + return ( |
| 27 | + <ProjectFaviconImage |
| 28 | + key={src} |
| 29 | + src={src} |
| 30 | + className={input.className} |
| 31 | + fallbackIcon={FallbackIcon} |
| 32 | + /> |
| 33 | + ); |
| 24 | 34 | } |
| 25 | 35 | |
| 26 | | −function ProjectFaviconFallback({ className }: { readonly className?: string | undefined }) { |
| 27 | | − return <FolderIcon className={`size-3.5 shrink-0 text-muted-foreground/50 ${className ?? ""}`} />; |
| 36 | +function ProjectFaviconFallback({ |
| 37 | + className, |
| 38 | + icon: Icon, |
| 39 | +}: { |
| 40 | + readonly className?: string | undefined; |
| 41 | + readonly icon: ComponentType<{ className?: string }>; |
| 42 | +}) { |
| 43 | + return <Icon className={`size-3.5 shrink-0 text-muted-foreground/50 ${className ?? ""}`} />; |
| 28 | 44 | } |
| 29 | 45 | |
| 30 | 46 | function ProjectFaviconImage({ |
| 31 | 47 | src, |
| 32 | 48 | className, |
| 49 | + fallbackIcon: FallbackIcon, |
| 33 | 50 | }: { |
| 34 | 51 | readonly src: string; |
| 35 | 52 | readonly className?: string | undefined; |
| 53 | + readonly fallbackIcon: ComponentType<{ className?: string }>; |
| 36 | 54 | }) { |
| 37 | 55 | const [status, setStatus] = useState<"loading" | "loaded" | "error">(() => |
| 38 | 56 | loadedProjectFaviconSrcs.has(src) ? "loaded" : "loading", |
| @@ -40,7 +58,9 @@ function ProjectFaviconImage({ · 1 unmodified line |
| 40 | 58 | |
| 41 | 59 | return ( |
| 42 | 60 | <> |
| 43 | | − {status !== "loaded" ? <ProjectFaviconFallback className={className} /> : null} |
| 61 | + {status !== "loaded" ? ( |
| 62 | + <ProjectFaviconFallback className={className} icon={FallbackIcon} /> |
| 63 | + ) : null} |
| 44 | 64 | <img |
| 45 | 65 | src={src} |
| 46 | 66 | alt="" |