@jhits/plugin-images 0.0.1

package/src/components/BackgroundImage.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Image } from './Image';
+import { Edit2, Loader2 } from 'lucide-react';
+
+export interface BackgroundImageProps {
+    id: string;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    backgroundSize?: 'cover' | 'contain' | 'auto' | string;
+    backgroundPosition?: string;
+    backgroundRepeat?: 'repeat' | 'no-repeat' | 'repeat-x' | 'repeat-y';
+}
+
+/**
+ * BackgroundImage Component
+ * * A container that handles a background image with admin edit capabilities.
+ * The edit button appears on hover anywhere within the container.
+ */
+export function BackgroundImage({
+    id,
+    className = '',
+    style = {},
+    children,
+    backgroundSize = 'cover',
+    backgroundPosition = 'center',
+}: BackgroundImageProps) {
+    const [isAdmin, setIsAdmin] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+
+    // Authentication check for Admin/Dev users
+    useEffect(() => {
+        const checkUser = async () => {
+            try {
+                const res = await fetch('/api/me');
+                const data = await res.json();
+                if (data.loggedIn && (data.user?.role === 'admin' || data.user?.role === 'dev')) {
+                    setIsAdmin(true);
+                }
+            } catch (error) {
+                console.error('Failed to check user role:', error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+        checkUser();
+    }, []);
+
+    const handleEditClick = (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // Dispatch event to the GlobalImageEditor
+        window.dispatchEvent(new CustomEvent('open-image-editor', { detail: { id } }));
+    };
+
+    return (
+        <div
+            data-background-image-component="true"
+            data-background-image-id={id}
+            className={`group relative overflow-hidden w-full ${className}`}
+            style={style}
+        >
+            {/* 1. BACKGROUND IMAGE LAYER (z-0) */}
+            <div className="absolute inset-0 z-0 pointer-events-none">
+                <Image
+                    id={id}
+                    alt=""
+                    fill
+                    className="w-full h-full"
+                    objectFit={backgroundSize === 'cover' ? 'cover' : 'contain'}
+                    objectPosition={backgroundPosition}
+                    editable={false} // We handle the button manually below
+                />
+            </div>
+
+            {/* 2. CONTENT LAYER (z-10) */}
+            <div className="relative z-10 w-full h-full">
+                {children}
+            </div>
+
+            {/* 3. ADMIN UI LAYER (z-50) - Dashboard Theme */}
+            {!isLoading && isAdmin && (
+                <div className="absolute inset-0 z-50 pointer-events-none">
+                    <button
+                        type="button"
+                        onClick={handleEditClick}
+                        className="
+                            pointer-events-auto absolute bottom-8 left-8 
+                            flex items-center gap-3 px-6 py-3 
+                            bg-neutral-100 dark:bg-neutral-800 
+                            text-neutral-900 dark:text-neutral-100 
+                            rounded-full shadow-2xl 
+                            border border-neutral-300 dark:border-neutral-700 
+                            cursor-pointer hover:bg-neutral-200 dark:hover:bg-neutral-700
+                            opacity-0 group-hover:opacity-100 
+                            translate-y-4 group-hover:translate-y-0 
+                            transition-all duration-500 ease-out
+                        "
+                    >
+                        <Edit2 size={16} strokeWidth={2.5} className="text-primary" />
+                        <span className="text-[11px] font-black uppercase tracking-[0.2em]">
+                            Edit Background
+                        </span>
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+}