// fp-lib.jsx — Supabase client + shared hooks + UI primitives
// Exports to window: { sbClient, useAuth, useProfile, Spinner, Avatar, IgIcon, TypeIcon, CheckIcon, formatDate, monthKey, monthLabel, MONTH_NAMES, POST_TYPES }
const SUPABASE_URL = 'https://lcllulljdjhgtbzrovih.supabase.co';
const SUPABASE_ANON = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImxjbGx1bGxqZGpoZ3RienJvdmloIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzY3MTMyMTgsImV4cCI6MjA5MjI4OTIxOH0.oYBQHoTDpAYU7vF5rL1UWlI0X3YWUPI_gekRcTy8i9A';
const { createClient } = window.supabase;
const sbClient = createClient(SUPABASE_URL, SUPABASE_ANON);
const { useState, useEffect, useContext, createContext, useRef, useCallback } = React;
// ── Auth context ──────────────────────────────────────────
const AuthContext = createContext(null);
function AuthProvider({ children }) {
const [session, setSession] = useState(undefined); // undefined = loading
const [profile, setProfile] = useState(null);
useEffect(() => {
sbClient.auth.getSession().then(({ data }) => setSession(data.session));
const { data: { subscription } } = sbClient.auth.onAuthStateChange((_e, s) => setSession(s));
return () => subscription.unsubscribe();
}, []);
useEffect(() => {
if (!session) { setProfile(null); return; }
sbClient.from('profiles').select('*').eq('id', session.user.id).single()
.then(({ data }) => setProfile(data));
}, [session]);
return {children};
}
function useAuth() { return useContext(AuthContext); }
// ── Shared utils ──────────────────────────────────────────
const MONTH_NAMES = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];
const POST_TYPES = [
{ id: 'imagen', label: 'Imagen' },
{ id: 'carrusel', label: 'Carrusel' },
{ id: 'reel', label: 'Reel' },
];
function monthKey(dateStr) { return dateStr ? dateStr.slice(0,7) : '0000-00'; }
function monthLabel(key) {
const [y,m] = key.split('-');
return `${MONTH_NAMES[parseInt(m,10)-1]} ${y}`;
}
function formatDate(str) {
if (!str) return '';
const d = new Date(str + 'T12:00:00');
return d.toLocaleDateString('es-MX', { day:'numeric', month:'short', year:'numeric' });
}
// ── Tiny components ───────────────────────────────────────
function Spinner({ size = 24, color = 'var(--accent)' }) {
return (
);
}
function Avatar({ name = '?', size = 36, color = '#C96A42' }) {
return (
{name.slice(0,1).toUpperCase()}
);
}
function IgIcon({ name, size = 22 }) {
const icons = {
home: ,
search: ,
add: ,
reels: ,
profile: ,
grid: ,
list: ,
tag: ,
more: ,
settings: ,
back: ,
users: ,
brand: ,
trash: ,
edit: ,
logout: ,
check: ,
plus: ,
image: ,
};
return {icons[name] || null};
}
function TypeIcon({ type, size = 14, color = 'white' }) {
if (type === 'reel') return ;
if (type === 'carrusel') return ;
return ;
}
function CheckIcon({ size = 10, color = 'white' }) {
return ;
}
Object.assign(window, {
sbClient, AuthProvider, useAuth,
Spinner, Avatar, IgIcon, TypeIcon, CheckIcon,
formatDate, monthKey, monthLabel, MONTH_NAMES, POST_TYPES,
});