| ... | ... | @@ -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: { |
| 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({ |
| 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="" |
Utkarsh Patil <73941998+UtkarshUsername@users.noreply.github.com> 2026-07-22 19:50:20+05:30
GitHub <noreply@github.com> 2026-07-22 16:20:20+02:00