45 lines
937 B
TypeScript
45 lines
937 B
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import { ProjectLogo } from './project-logo'
|
||
|
|
import { trpc } from '@/lib/trpc/client'
|
||
|
|
|
||
|
|
type ProjectLogoWithUrlProps = {
|
||
|
|
project: {
|
||
|
|
id: string
|
||
|
|
title: string
|
||
|
|
logoKey?: string | null
|
||
|
|
}
|
||
|
|
size?: 'sm' | 'md' | 'lg'
|
||
|
|
fallback?: 'icon' | 'initials'
|
||
|
|
className?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Project logo component that fetches the URL automatically via tRPC.
|
||
|
|
* Use this in client components when you only have the project data without the URL.
|
||
|
|
*/
|
||
|
|
export function ProjectLogoWithUrl({
|
||
|
|
project,
|
||
|
|
size = 'md',
|
||
|
|
fallback = 'icon',
|
||
|
|
className,
|
||
|
|
}: ProjectLogoWithUrlProps) {
|
||
|
|
const { data: logoUrl } = trpc.logo.getUrl.useQuery(
|
||
|
|
{ projectId: project.id },
|
||
|
|
{
|
||
|
|
enabled: !!project.logoKey,
|
||
|
|
staleTime: 60 * 1000, // Cache for 1 minute
|
||
|
|
}
|
||
|
|
)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ProjectLogo
|
||
|
|
project={project}
|
||
|
|
logoUrl={logoUrl}
|
||
|
|
size={size}
|
||
|
|
fallback={fallback}
|
||
|
|
className={className}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
}
|