rikrdo/mercadodevida
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(F-104): completed feature

Browse Source
This commit is contained in:
chattie
2026-08-21 08:01:18 +02:00
parent c07776822d
commit 9b42c506f3
14 changed files with 286 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
project/apps/admin/src/app/(dashboard)/cms/page.tsx
View File

@@ -25,6 +25,15 @@ const EyeOffIcon = (
const EMPTY_FORM = { slug: '', title: '', body: '' };
// Plantillas de páginas principales de la tienda. Cada una se corresponde con
// una ruta pública que renderiza el contenido CMS si existe (y está publicada).
const TEMPLATES = [
{ slug: 'home', label: 'Home', route: '/', icon: '🏠', defaultTitle: 'Bienvenido a Mercado de Vida', hint: 'Sección de bienvenida destacada en la página de inicio.' },
{ slug: 'products', label: 'Productos', route: '/products', icon: '🛒', defaultTitle: 'Nuestros productos', hint: 'Texto introductorio del listado de productos.' },
{ slug: 'categories', label: 'Categorías', route: '/categories', icon: '🗂️', defaultTitle: 'Nuestras categorías', hint: 'Texto introductorio del listado de categorías.' },
{ slug: 'brands', label: 'Marcas', route: '/brands', icon: '🏷️', defaultTitle: 'Nuestras marcas', hint: 'Texto introductorio del listado de marcas.' },
];
export default function CmsPage() {
const [items, setItems] = useState<Page[]>([]);
const [loading, setLoading] = useState(true);
@@ -45,6 +54,13 @@ export default function CmsPage() {
useEffect(() => { load(); }, [load]);
const openCreate = () => { setEditing(null); setForm(EMPTY_FORM); setShowForm(true); };
const openTemplate = (tpl: typeof TEMPLATES[number]) => {
const existing = items.find(p => p.slug === tpl.slug);
if (existing) { openEdit(existing); return; }
setEditing(null);
setForm({ slug: tpl.slug, title: tpl.defaultTitle, body: '' });
setShowForm(true);
};
const openEdit = (p: Page) => { setEditing(p); setForm({ slug: p.slug, title: p.title, body: p.body }); setShowForm(true); };
const handleSave = async () => {
@@ -82,6 +98,38 @@ export default function CmsPage() {
{msg && <div className={`p-4 rounded-xl text-sm ${msg.startsWith('Error') ? 'bg-red-50 text-red-700' : 'bg-green-50 text-green-700'}`}>{msg}</div>}
{/* Plantillas de páginas principales */}
<div className="bg-white border border-gray-200 rounded-xl p-6">
<h2 className="font-semibold text-gray-900 mb-1">Plantillas de la tienda</h2>
<p className="text-xs text-gray-400 mb-4">
Contenido editable de las páginas principales. Solo se muestra si la página está creada y publicada.
</p>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
{TEMPLATES.map(tpl => {
const existing = items.find(p => p.slug === tpl.slug);
return (
<button key={tpl.slug} onClick={() => openTemplate(tpl)}
className="text-left p-4 border border-gray-200 rounded-xl hover:border-[#2D6A4F] transition-colors group">
<div className="flex items-center justify-between mb-1">
<span className="text-lg">{tpl.icon}</span>
{existing ? (
<span className={`px-2 py-0.5 rounded-full text-[10px] font-medium ${
existing.status === 'published' ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'
}`}>
{existing.status === 'published' ? 'Publicada' : 'Borrador'}
</span>
) : (
<span className="px-2 py-0.5 rounded-full text-[10px] font-medium bg-gray-100 text-gray-500">Sin crear</span>
)}
</div>
<p className="text-sm font-semibold text-gray-900 group-hover:text-[#2D6A4F]">{tpl.label} <span className="text-xs font-mono text-gray-400">{tpl.route}</span></p>
<p className="text-xs text-gray-400 mt-1">{tpl.hint}</p>
</button>
);
})}
</div>
</div>
{showForm && (
<div className="bg-white border border-gray-200 rounded-xl p-6 space-y-4">
<h2 className="font-semibold text-gray-900">{editing ? 'Editar página' : 'Nueva página'}</h2>