Function FeedEmptyScreen

packages/shared/src/components/FeedEmptyScreen.tsx:17–50

()

import { useAuthContext } from '../contexts/AuthContext';

function FeedEmptyScreen(): ReactElement | null {
  const router = useRouter();
  const { user } = useAuthContext();

  if (!user) {
    return null;
  }

  return (
    <PageContainer className="mx-auto">
      <EmptyScreenContainer>
        <Image
          className="h-40 w-40 object-contain"
          src={cloudinaryCharmNotEnoughTags}
          alt="daily.dev charm holding tags"
          loading="lazy"
        />
        <EmptyScreenTitle>Your feed filters are too specific.</EmptyScreenTitle>
        <EmptyScreenDescription>
          We couldn&apos;t fetch enough posts based on your selected tags. Try
          adding more tags using the feed settings.
        </EmptyScreenDescription>
        <EmptyScreenButton
          onClick={() => {
            router.push(`${webappUrl}feeds/${user.id}/edit`);
          }}
          size={ButtonSize.Large}
        >
          Feed filters
        </EmptyScreenButton>
      </EmptyScreenContainer>
    </PageContainer>
  );
}

export default FeedEmptyScreen;