120 lines
6.7 KiB
TypeScript
120 lines
6.7 KiB
TypeScript
import { prisma } from '@innungsapp/shared'
|
|
import Link from 'next/link'
|
|
import { ExternalLink, Settings, Layout, Search } from 'lucide-react'
|
|
|
|
export default async function LandingPagesOverview({
|
|
searchParams,
|
|
}: {
|
|
searchParams: Promise<{ q?: string }>
|
|
}) {
|
|
const { q = '' } = await searchParams
|
|
|
|
const organizations = await prisma.organization.findMany({
|
|
where: q ? {
|
|
OR: [
|
|
{ name: { contains: q, mode: 'insensitive' } },
|
|
{ slug: { contains: q, mode: 'insensitive' } },
|
|
]
|
|
} : {},
|
|
orderBy: { name: 'asc' },
|
|
})
|
|
|
|
return (
|
|
<div className="space-y-8 animate-in fade-in duration-500">
|
|
{/* Header */}
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-3xl font-black text-gray-900 tracking-tight font-outfit">
|
|
Landingpage-Verwaltung
|
|
</h1>
|
|
<p className="text-gray-500 font-medium">Alle Mandanten-Landingpages auf einen Blick verwalten.</p>
|
|
</div>
|
|
|
|
<div className="relative group w-full md:w-72">
|
|
<div className="absolute inset-y-0 left-3 flex items-center pointer-events-none text-gray-400 group-focus-within:text-[#E63946] transition-colors">
|
|
<Search size={18} />
|
|
</div>
|
|
<form method="GET">
|
|
<input
|
|
type="search"
|
|
name="q"
|
|
defaultValue={q}
|
|
placeholder="Landingpage suchen..."
|
|
className="w-full pl-10 pr-4 py-2.5 bg-white border rounded-xl text-sm outline-none focus:border-[#E63946] focus:ring-4 focus:ring-red-500/5 transition-all shadow-sm"
|
|
/>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{organizations.length === 0 ? (
|
|
<div className="col-span-full py-20 bg-white border border-dashed rounded-3xl flex flex-col items-center justify-center text-center">
|
|
<div className="bg-gray-50 p-4 rounded-2xl mb-4 text-gray-400">
|
|
<Layout size={40} strokeWidth={1.5} />
|
|
</div>
|
|
<p className="text-gray-500 font-medium">Keine Landingpages gefunden.</p>
|
|
{q && <Link href="/superadmin/landingpages" className="text-[#E63946] font-bold mt-2 text-sm hover:underline">Suche zurücksetzen</Link>}
|
|
</div>
|
|
) : (
|
|
organizations.map((org) => (
|
|
<div key={org.id} className="group bg-white rounded-3xl border border-gray-100 p-6 hover:border-[#E63946] hover:shadow-2xl hover:shadow-red-500/5 transition-all duration-500 flex flex-col h-full relative overflow-hidden">
|
|
{/* Accent line */}
|
|
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-gray-50 via-gray-100 to-gray-50 group-hover:from-red-100 group-hover:via-[#E63946] group-hover:to-red-100 transition-all duration-500" />
|
|
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div className="space-y-1">
|
|
<h3 className="font-black text-xl text-gray-900 group-hover:text-[#E63946] transition-colors truncate max-w-[200px]">
|
|
{org.name}
|
|
</h3>
|
|
<div className="flex items-center gap-1.5 text-xs font-mono text-gray-400">
|
|
<span className="text-[#E63946] opacity-50">/</span>
|
|
<span>{org.slug}</span>
|
|
</div>
|
|
</div>
|
|
<div className="p-2.5 bg-gray-50 rounded-2xl text-gray-400 group-hover:bg-red-50 group-hover:text-[#E63946] transition-all duration-500">
|
|
<Layout size={20} strokeWidth={2} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 space-y-4">
|
|
<div className="bg-gray-50/50 rounded-2xl p-4 border border-gray-100">
|
|
<div className="flex items-center justify-between text-[11px] font-bold uppercase tracking-widest text-gray-400 mb-2">
|
|
<span>Status</span>
|
|
<span className="flex items-center gap-1 text-green-500">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
|
|
Online
|
|
</span>
|
|
</div>
|
|
<div className="text-sm font-medium text-gray-600 truncate">
|
|
{org.landingPageTitle || 'Standard-Title'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-8 grid grid-cols-2 gap-3">
|
|
<a
|
|
href={`/${org.slug}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center justify-center gap-2 py-3 bg-gray-50 text-gray-600 rounded-2xl text-sm font-bold hover:bg-gray-100 transition-all border border-transparent"
|
|
>
|
|
<ExternalLink size={16} />
|
|
Ansehen
|
|
</a>
|
|
<Link
|
|
href={`/superadmin/organizations/${org.id}`}
|
|
className="flex items-center justify-center gap-2 py-3 bg-gray-900 text-white rounded-2xl text-sm font-bold hover:bg-black transition-all hover:shadow-lg hover:shadow-black/10 shadow-sm"
|
|
>
|
|
<Settings size={16} />
|
|
Editieren
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|