refactor front end hooks

src/components/SplashImage.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { usePathname } from "next/navigation";
+import Image from "next/image";
+import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
+
+type SplashImageProps = {
+    children: React.ReactNode;
+};
+
+export default function SplashImage({ children }: SplashImageProps) {
+    const pathname = usePathname();
+    const { env } = useEnvContext();
+    const { isUnlocked } = useLicenseStatusContext();
+
+    function showBackgroundImage() {
+        if (!isUnlocked()) {
+            return false;
+        }
+        if (!env.branding.background_image_path) {
+            return false;
+        }
+        const pathsPrefixes = ["/auth/login", "/auth/signup", "/auth/resource", "/auth/org"];
+        for (const prefix of pathsPrefixes) {
+            if (pathname.startsWith(prefix)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    return (
+        <>
+            {showBackgroundImage() && (
+                <Image
+                    src={env.branding.background_image_path!}
+                    alt="Background"
+                    layout="fill"
+                    objectFit="cover"
+                    quality={100}
+                    className="-z-10"
+                />
+            )}
+
+            {children}
+        </>
+    );
+}