| 104 | * and we want to avoid client components. |
| 105 | */ |
| 106 | export function Image( |
| 107 | props: PolymorphicComponentProp< |
| 108 | 'img', |
| 109 | { |
| 110 | /** |
| 111 | * Sources for the image. |
| 112 | */ |
| 113 | sources: { |
| 114 | light: ImageSource; |
| 115 | dark?: ImageSource | null; |
| 116 | }; |
| 117 | } & ImageCommonProps |
| 118 | > |
| 119 | ) { |
| 120 | const { sources, style, inline = false, ...rest } = props; |
| 121 | |
| 122 | return ( |
| 123 | <> |
| 124 | <ImagePicture |
| 125 | {...rest} |
| 126 | inline={inline} |
| 127 | source={sources.light} |
| 128 | className={tcls( |
| 129 | rest.className, |
| 130 | inline ? 'inline' : 'block', |
| 131 | sources.dark ? 'dark:hidden' : null, |
| 132 | style |
| 133 | )} |
| 134 | /> |
| 135 | {sources.dark ? ( |
| 136 | <ImagePicture |
| 137 | source={sources.dark} |
| 138 | {...rest} |
| 139 | inline={inline} |
| 140 | // We don't want to preload the dark image, because it's not visible |
| 141 | // TODO: adapt based on the default theme |
| 142 | priority="lazy" |
| 143 | className={tcls( |
| 144 | rest.className, |
| 145 | 'hidden', |
| 146 | inline ? 'dark:inline' : 'dark:block', |
| 147 | style |
| 148 | )} |
| 149 | /> |
| 150 | ) : null} |
| 151 | </> |
| 152 | ); |
| 153 | } |
| 154 | |
| 155 | function ImagePicture( |
| 156 | props: PolymorphicComponentProp< |