export const Hero: FC = () => {
  // When Hero is imported into a server component, I'd like this to use <CloudflareImageServer>.
  // When Hero is imported into a client component, I'd like this to use <CloudflareImageClient>. 
  return <CloudflareImage></CloudflareImage>
}

export const Hero: FC = () => {
  // When Hero is imported into a server component, I'd like this to use <CloudflareImageServer>.
  // When Hero is imported into a client component, I'd like this to use <CloudflareImageClient>. 
  return <CloudflareImage></CloudflareImage>
}

// home/page.tsx
export const Page: NextPage = () => {
  <Hero></Hero>
}

// home/page.tsx
export const Page: NextPage = () => {
  <Hero></Hero>
}

// components/some-client-component.tsx
'use client'

export const SomeClientComponent: FC = () => {
  <Hero></Hero>
}

// components/some-client-component.tsx
'use client'

export const SomeClientComponent: FC = () => {
  <Hero></Hero>
}