feat(core): new empty states for doc/collection/tag (#8197)

AF-1329, AF-1330

packages/frontend/component/src/index.ts

@@ -28,6 +28,7 @@ export * from './ui/slider';
 export * from './ui/switch';
 export * from './ui/table';
 export * from './ui/tabs';
+export * from './ui/themed-img';
 export * from './ui/toast';
 export * from './ui/tooltip';
 export * from './utils';

packages/frontend/component/src/ui/empty/empty.tsx

@@ -16,6 +16,9 @@ export type EmptyContentProps = {
   descriptionStyle?: CSSProperties;
 };
 
+/**
+ * @deprecated use different empty components for different use cases, like `EmptyDocs` for documentation empty state
+ */
 export const Empty = ({
   containerStyle,
   title,

packages/frontend/component/src/ui/themed-img/index.tsx

@@ -0,0 +1,17 @@
+import { useTheme } from 'next-themes';
+import { forwardRef, type HTMLAttributes } from 'react';
+
+export interface ThemedImgProps
+  extends Omit<HTMLAttributes<HTMLImageElement>, 'src'> {
+  lightSrc: string;
+  darkSrc?: string;
+}
+
+export const ThemedImg = forwardRef<HTMLImageElement, ThemedImgProps>(
+  function ThemedImg({ lightSrc, darkSrc, ...attrs }, ref) {
+    const { resolvedTheme } = useTheme();
+    const src = resolvedTheme === 'dark' && darkSrc ? darkSrc : lightSrc;
+
+    return <img ref={ref} src={src} {...attrs} />;
+  }
+);

packages/frontend/component/src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './observe-resize';
 export { startScopedViewTransition } from './view-transition';
+export * from './with-unit';