Display a message when there are no results

src/components/ErrorBox.tsx

@@ -0,0 +1,16 @@
+type ErrorBoxProps = { title?: React.ReactNode; error?: React.ReactNode };
+
+export const ErrorBox = ({ title, error }: ErrorBoxProps) => {
+  if (!error) return null;
+
+  return (
+    <div className="mt-8 rounded bg-orange-700/20 p-4 text-orange-700">
+      <div className="flex flex-col gap-4">
+        {title && <div className="font-bold">{title}</div>}
+        <div>
+          <p className="font-medium text-sm">{error}</p>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/TranslatedError.tsx

@@ -0,0 +1,36 @@
+import isNil from "lodash/isNil";
+import { useTranslations } from "next-intl";
+
+import { Path } from "@/types";
+
+type TranslatedErrorProps = {
+  err: unknown;
+};
+
+export const TranslatedError = ({ err }: TranslatedErrorProps) => {
+  const t = useTranslations("Errors");
+
+  if (isNil(err)) {
+    return null;
+  }
+
+  let error: string | undefined;
+
+  if (typeof err === "string") {
+    error = err;
+  }
+
+  if (isNil(error) && err instanceof Error) {
+    error = err.message;
+  }
+
+  if (isNil(error)) {
+    error = "ERR_UNEXPECTED";
+  }
+
+  if (error?.startsWith("ERR_")) {
+    return t(error as Path<IntlMessages["Errors"]>);
+  }
+
+  return <span>{error}</span>;
+};