fix(ui): sidebar spacing/scrolling, navy accent bars, reduced border radius
- Sidebar: proper min-h-0 + overflow-y-auto scrolling, px-3 spacing, text-[13px] items with truncate, tighter py-2 rows, user card with navy avatar chip, w-60 width - KPI cards: navy #0a1d37 left accent bar instead of orange, navy icon chips, rounded-xl (was rounded-2xl), reduced shadow intensity - All cards/panels: rounded-xl (down from rounded-2xl/3xl) - Activity chart: navy bars instead of orange, rounded-t-md (less rounded) - Intelligence Hub actions: rounded-lg (was rounded-2xl) - Control Plane cards: rounded-xl with hover:border-[#0a1d37]/10 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ashwin Kumar
parent
df560a91ea
commit
1f59fbbc4c
2 changed files with 145 additions and 152 deletions
|
|
@ -30,9 +30,9 @@ const links: LinkItem[] = [
|
|||
{ href: '/admin/developers', label: 'Developers Management', icon: 'developers.svg', group: 'Management' },
|
||||
{ href: '/admin/video-editors', label: 'Video Editor Management', icon: 'developers.svg', group: 'Management' },
|
||||
{ href: '/admin/fitness-trainers', label: 'Fitness Trainer Management', icon: 'tutor.svg', group: 'Management' },
|
||||
{ href: '/admin/catering-services', label: 'Catering Services Mgmt.', icon: 'company.svg', group: 'Management' },
|
||||
{ href: '/admin/catering-services', label: 'Catering Services', icon: 'company.svg', group: 'Management' },
|
||||
{ href: '/admin/graphic-designers', label: 'Graphics Designer Mgmt.', icon: 'developers.svg', group: 'Management' },
|
||||
{ href: '/admin/social-media-managers', label: 'Social Media Mgr. Mgmt.', icon: 'developers.svg', group: 'Management' },
|
||||
{ href: '/admin/social-media-managers', label: 'Social Media Mgr.', icon: 'developers.svg', group: 'Management' },
|
||||
{ href: '/admin/jobs', label: 'Jobs Management', icon: 'jobs.svg', group: 'Management' },
|
||||
{ href: '/admin/leads', label: 'Leads Management', icon: 'leads.svg', group: 'Management' },
|
||||
|
||||
|
|
@ -47,7 +47,7 @@ const links: LinkItem[] = [
|
|||
|
||||
{ href: '/admin/review', label: 'Review Management', icon: 'reviews.svg', group: 'Platform' },
|
||||
{ href: '/admin/support', label: 'Support Management', icon: 'support.svg', group: 'Platform' },
|
||||
{ href: '/admin/kb', label: 'Knowledge Base Mgmt.', icon: 'reviews.svg', group: 'Platform' },
|
||||
{ href: '/admin/kb', label: 'Knowledge Base', icon: 'reviews.svg', group: 'Platform' },
|
||||
{ href: '/admin/notifications', label: 'Notifications', icon: 'reviews.svg', group: 'Platform' },
|
||||
{ href: '/admin/report', label: 'Report Management', icon: 'report.svg', group: 'Platform' },
|
||||
];
|
||||
|
|
@ -61,11 +61,6 @@ export default function AdminSidebar() {
|
|||
return location.pathname === href || location.pathname.startsWith(`${href}/`);
|
||||
};
|
||||
|
||||
const topLinks = links.filter(l => l.group === '__top__');
|
||||
const mgmtLinks = links.filter(l => l.group === 'Management');
|
||||
const finLinks = links.filter(l => l.group === 'Finance');
|
||||
const platLinks = links.filter(l => l.group === 'Platform');
|
||||
|
||||
const NavItem = (item: LinkItem) => {
|
||||
const active = isActive(item.href, item.aliasPrefix);
|
||||
return (
|
||||
|
|
@ -74,57 +69,74 @@ export default function AdminSidebar() {
|
|||
activeClass=""
|
||||
inactiveClass=""
|
||||
title={item.label}
|
||||
class={`relative flex items-center gap-3 rounded-xl py-2.5 pl-4 pr-3 text-sm font-semibold tracking-wide transition-all duration-150 ${
|
||||
class={`relative flex min-w-0 items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-semibold transition-colors duration-150 ${
|
||||
active
|
||||
? 'bg-slate-50 text-[#0a1d37] before:absolute before:left-0 before:top-1/2 before:h-6 before:-translate-y-1/2 before:w-1 before:rounded-r-full before:bg-[#fd6216] before:content-[\'\']'
|
||||
: 'text-[#0a1d37]/60 hover:bg-slate-50 hover:text-[#0a1d37]'
|
||||
? 'bg-slate-100 text-[#0a1d37] before:absolute before:left-0 before:top-1/2 before:h-5 before:-translate-y-1/2 before:w-[3px] before:rounded-r-full before:bg-[#fd6216] before:content-[\'\']'
|
||||
: 'text-[#0a1d37]/55 hover:bg-slate-50 hover:text-[#0a1d37]'
|
||||
}`}
|
||||
>
|
||||
<img
|
||||
src={`/sidebar-icons/${item.icon}`}
|
||||
alt=""
|
||||
class="h-[18px] w-[18px] shrink-0"
|
||||
style={active ? 'opacity:0.9' : 'opacity:0.4'}
|
||||
class="h-4 w-4 shrink-0"
|
||||
style={active ? 'opacity:0.85' : 'opacity:0.35'}
|
||||
/>
|
||||
<span class="truncate">{item.label}</span>
|
||||
</A>
|
||||
);
|
||||
};
|
||||
|
||||
const GroupLabel = (label: string) => (
|
||||
<div class="px-4 pb-2 pt-4">
|
||||
<p class="text-[10px] font-bold uppercase tracking-widest text-slate-400">{label}</p>
|
||||
</div>
|
||||
);
|
||||
const topLinks = links.filter(l => l.group === '__top__');
|
||||
const mgmtLinks = links.filter(l => l.group === 'Management');
|
||||
const finLinks = links.filter(l => l.group === 'Finance');
|
||||
const platLinks = links.filter(l => l.group === 'Platform');
|
||||
|
||||
return (
|
||||
<aside class="flex h-full w-64 flex-col border-r border-slate-100 bg-white py-5">
|
||||
{/* Top (Dashboard) */}
|
||||
<nav class="px-3">
|
||||
<aside class="flex h-full w-60 flex-col border-r border-slate-100 bg-white">
|
||||
|
||||
{/* Top: Dashboard link */}
|
||||
<div class="px-3 pt-4 pb-2">
|
||||
{topLinks.map(NavItem)}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Scrollable nav groups */}
|
||||
<div class="scrollbar mt-1 min-h-0 flex-1 overflow-y-auto px-3">
|
||||
{GroupLabel('Management')}
|
||||
{/* Scrollable groups */}
|
||||
<div class="scrollbar flex-1 overflow-y-auto px-3 pb-3" style="min-height:0">
|
||||
|
||||
{/* Management */}
|
||||
<p class="mt-3 mb-1.5 px-2 text-[10px] font-bold uppercase tracking-widest text-slate-400">
|
||||
Management
|
||||
</p>
|
||||
<div class="space-y-0.5">
|
||||
{mgmtLinks.map(NavItem)}
|
||||
</div>
|
||||
|
||||
{GroupLabel('Finance')}
|
||||
{/* Finance */}
|
||||
<p class="mt-4 mb-1.5 px-2 text-[10px] font-bold uppercase tracking-widest text-slate-400">
|
||||
Finance
|
||||
</p>
|
||||
<div class="space-y-0.5">
|
||||
{finLinks.map(NavItem)}
|
||||
</div>
|
||||
|
||||
{GroupLabel('Platform')}
|
||||
{/* Platform */}
|
||||
<p class="mt-4 mb-1.5 px-2 text-[10px] font-bold uppercase tracking-widest text-slate-400">
|
||||
Platform
|
||||
</p>
|
||||
<div class="space-y-0.5">
|
||||
{platLinks.map(NavItem)}
|
||||
</div>
|
||||
|
||||
{/* User card at bottom */}
|
||||
<div class="mt-2 border-t border-slate-100 px-4 pt-4">
|
||||
<div class="flex items-center gap-3 rounded-xl bg-slate-50 p-3">
|
||||
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[#fd6216] text-sm font-black text-white">
|
||||
</div>
|
||||
|
||||
{/* User card */}
|
||||
<div class="border-t border-slate-100 px-3 py-3">
|
||||
<div class="flex items-center gap-2.5 rounded-lg bg-slate-50 px-3 py-2.5">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[#0a1d37] text-xs font-black text-white">
|
||||
A
|
||||
</div>
|
||||
<div class="min-w-0 flex-1 overflow-hidden">
|
||||
<p class="truncate text-xs font-bold text-[#0a1d37]">Admin User</p>
|
||||
<p class="truncate text-[10px] text-slate-500">master_admin@nxtgauge.io</p>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="truncate text-[12px] font-bold text-[#0a1d37]">Admin User</p>
|
||||
<p class="truncate text-[10px] text-slate-400">master_admin@nxtgauge.io</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,38 +11,18 @@ type KpiCard = {
|
|||
label: string;
|
||||
value: string;
|
||||
badge?: string;
|
||||
badgeColor?: string;
|
||||
badgeColor: string;
|
||||
href: string;
|
||||
icon: Component<any>;
|
||||
accentColor: string; // full tailwind class for the left bar bg
|
||||
chipBg: string;
|
||||
chipFg: string;
|
||||
};
|
||||
|
||||
const KPI: KpiCard[] = [
|
||||
{
|
||||
label: 'Total Users', value: '—', badge: '+0%', badgeColor: 'text-emerald-600 bg-emerald-50',
|
||||
href: '/admin/users', icon: Users,
|
||||
accentColor: 'bg-[#fd6216]', chipBg: 'bg-[#fd6216]/5', chipFg: 'text-[#fd6216]',
|
||||
},
|
||||
{
|
||||
label: 'Total Revenue', value: '—', badge: 'Weekly', badgeColor: 'text-[#0a1d37] bg-slate-100',
|
||||
href: '/admin/invoice', icon: Receipt,
|
||||
accentColor: 'bg-[#0a1d37]', chipBg: 'bg-[#0a1d37]/5', chipFg: 'text-[#0a1d37]',
|
||||
},
|
||||
{
|
||||
label: 'Active Roles', value: '—', badge: 'Live', badgeColor: 'text-amber-600 bg-amber-50',
|
||||
href: '/admin/runtime-roles', icon: Briefcase,
|
||||
accentColor: 'bg-[#fd6216]', chipBg: 'bg-amber-50', chipFg: 'text-amber-600',
|
||||
},
|
||||
{
|
||||
label: 'Pending Approvals', value: '—', badge: 'Action Required', badgeColor: 'text-white bg-red-500',
|
||||
href: '/admin/approval', icon: Clock,
|
||||
accentColor: 'bg-[#fd6216]', chipBg: 'bg-red-50', chipFg: 'text-red-600',
|
||||
},
|
||||
{ label: 'Total Users', value: '—', badge: '+0%', badgeColor: 'text-emerald-600 bg-emerald-50', href: '/admin/users', icon: Users },
|
||||
{ label: 'Total Revenue', value: '—', badge: 'Weekly', badgeColor: 'text-[#0a1d37] bg-slate-100', href: '/admin/invoice', icon: Receipt },
|
||||
{ label: 'Active Roles', value: '—', badge: 'Live', badgeColor: 'text-amber-600 bg-amber-50', href: '/admin/runtime-roles', icon: Briefcase},
|
||||
{ label: 'Pending Approvals', value: '—', badge: 'Action Required', badgeColor: 'text-white bg-red-500', href: '/admin/approval', icon: Clock },
|
||||
];
|
||||
|
||||
// Activity chart data (placeholder heights)
|
||||
const ACTIVITY = [
|
||||
{ day: 'MON', h: 40 }, { day: 'TUE', h: 65 }, { day: 'WED', h: 95 },
|
||||
{ day: 'THU', h: 70 }, { day: 'FRI', h: 55 }, { day: 'SAT', h: 30 }, { day: 'SUN', h: 45 },
|
||||
|
|
@ -55,9 +35,9 @@ const QUICK_ACTIONS = [
|
|||
];
|
||||
|
||||
const PIPELINE = [
|
||||
{ name: 'Candidate Roles', type: 'External Role', status: 'Active', statusBg: 'bg-emerald-50 text-emerald-600', progress: 85, color: 'bg-[#fd6216]' },
|
||||
{ name: 'Onboarding Flows', type: 'Schema Builder', status: 'Pending', statusBg: 'bg-amber-50 text-amber-600', progress: 42, color: 'bg-amber-400' },
|
||||
{ name: 'Dashboard Config', type: 'UI Config', status: 'Draft', statusBg: 'bg-slate-100 text-slate-500', progress: 12, color: 'bg-slate-400' },
|
||||
{ name: 'Candidate Roles', type: 'External Role', status: 'Active', statusColor: 'text-emerald-600 bg-emerald-50', progress: 85, barColor: 'bg-[#fd6216]' },
|
||||
{ name: 'Onboarding Flows', type: 'Schema Builder', status: 'Pending', statusColor: 'text-amber-600 bg-amber-50', progress: 42, barColor: 'bg-amber-400' },
|
||||
{ name: 'Dashboard Config', type: 'UI Config', status: 'Draft', statusColor: 'text-slate-500 bg-slate-100', progress: 12, barColor: 'bg-slate-300' },
|
||||
];
|
||||
|
||||
const CONTROL: Array<{ label: string; href: string; desc: string; icon: Component<any>; iconBg: string; iconFg: string }> = [
|
||||
|
|
@ -72,62 +52,64 @@ const CONTROL: Array<{ label: string; href: string; desc: string; icon: Componen
|
|||
export default function AdminDashboard() {
|
||||
return (
|
||||
<AdminShell>
|
||||
<div class="space-y-8">
|
||||
<div class="space-y-6">
|
||||
|
||||
{/* ── KPI Cards ── */}
|
||||
<div class="grid grid-cols-2 gap-6 lg:grid-cols-4">
|
||||
<div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
|
||||
{KPI.map((kpi) => {
|
||||
const Icon = kpi.icon;
|
||||
return (
|
||||
<A
|
||||
href={kpi.href}
|
||||
class="relative overflow-hidden rounded-2xl bg-white p-6 shadow-[0_8px_32px_rgba(10,29,55,0.04)] transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_12px_40px_rgba(10,29,55,0.08)]"
|
||||
class="relative overflow-hidden rounded-xl bg-white p-5 shadow-[0_4px_20px_rgba(10,29,55,0.06)] transition-all duration-200 hover:-translate-y-px hover:shadow-[0_8px_28px_rgba(10,29,55,0.10)]"
|
||||
>
|
||||
{/* Left accent bar */}
|
||||
<div class={`absolute left-0 top-0 h-full w-1.5 ${kpi.accentColor}`} />
|
||||
{/* Left navy accent bar */}
|
||||
<div class="absolute left-0 top-0 h-full w-1.5 rounded-l-xl bg-[#0a1d37]" />
|
||||
|
||||
<div class="flex items-start justify-between">
|
||||
<div class={`flex h-12 w-12 items-center justify-center rounded-xl ${kpi.chipBg}`}>
|
||||
<Icon class={`h-6 w-6 ${kpi.chipFg}`} />
|
||||
<div class="flex items-start justify-between pl-1">
|
||||
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-[#0a1d37]/6">
|
||||
<Icon class="h-5 w-5 text-[#0a1d37]" />
|
||||
</div>
|
||||
{kpi.badge && (
|
||||
<span class={`rounded-full px-2 py-1 text-[11px] font-bold ${kpi.badgeColor}`}>
|
||||
<span class={`rounded-md px-2 py-0.5 text-[10px] font-bold ${kpi.badgeColor}`}>
|
||||
{kpi.badge}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h3 class="mt-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">
|
||||
<div class="mt-4 pl-1">
|
||||
<h3 class="text-[10px] font-bold uppercase tracking-widest text-slate-400">
|
||||
{kpi.label}
|
||||
</h3>
|
||||
<p class="mt-1 text-3xl font-black tracking-tight text-[#0a1d37]">
|
||||
{kpi.value}
|
||||
</p>
|
||||
</div>
|
||||
</A>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* ── Activity Chart + Intelligence Hub ── */}
|
||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
{/* ── Activity + Intelligence Hub ── */}
|
||||
<div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
||||
|
||||
{/* Activity Chart */}
|
||||
<div class="lg:col-span-2 rounded-3xl bg-white p-8 shadow-[0_8px_32px_rgba(10,29,55,0.04)]">
|
||||
<div class="mb-8 flex items-end justify-between">
|
||||
<div class="lg:col-span-2 rounded-xl bg-white p-6 shadow-[0_4px_20px_rgba(10,29,55,0.06)]">
|
||||
<div class="mb-6 flex items-end justify-between">
|
||||
<div>
|
||||
<h2 class="text-xl font-black tracking-tight text-[#0a1d37]">System Activity</h2>
|
||||
<p class="mt-0.5 text-sm text-slate-500">Platform traffic & Tracecoin velocity</p>
|
||||
<h2 class="text-lg font-black tracking-tight text-[#0a1d37]">System Activity</h2>
|
||||
<p class="mt-0.5 text-sm text-slate-400">Platform traffic & Tracecoin velocity</p>
|
||||
</div>
|
||||
<select class="rounded-lg border-0 bg-slate-50 py-2 pl-3 pr-8 text-xs font-bold text-[#0a1d37] focus:ring-0">
|
||||
<select class="rounded-lg border border-slate-200 bg-white py-1.5 pl-3 pr-8 text-xs font-semibold text-[#0a1d37] focus:outline-none focus:ring-2 focus:ring-[#0a1d37]/10">
|
||||
<option>Last 7 Days</option>
|
||||
<option>Last 30 Days</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex h-52 items-end justify-between gap-3">
|
||||
<div class="flex h-44 items-end justify-between gap-2">
|
||||
{ACTIVITY.map((d) => (
|
||||
<div class="group flex flex-1 flex-col items-center gap-2">
|
||||
<div class="group flex flex-1 flex-col items-center gap-1.5">
|
||||
<div
|
||||
class={`w-full rounded-t-xl transition-all duration-200 ${d.day === 'WED' ? 'bg-[#fd6216] shadow-lg shadow-[#fd6216]/20' : 'bg-slate-100 group-hover:bg-[#0a1d37]'}`}
|
||||
class={`w-full rounded-t-md transition-all duration-200 ${d.day === 'WED' ? 'bg-[#0a1d37] shadow-lg shadow-[#0a1d37]/20' : 'bg-slate-100 group-hover:bg-slate-300'}`}
|
||||
style={`height: ${d.h}%`}
|
||||
/>
|
||||
<span class={`text-[10px] font-bold ${d.day === 'WED' ? 'text-[#0a1d37]' : 'text-slate-400'}`}>
|
||||
|
|
@ -138,21 +120,21 @@ export default function AdminDashboard() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Intelligence Hub + System Health */}
|
||||
{/* Intelligence Hub + Pipeline */}
|
||||
<div class="space-y-4">
|
||||
{/* Intelligence Hub */}
|
||||
<div class="relative overflow-hidden rounded-3xl bg-[#0a1d37] p-6 text-white">
|
||||
<div class="absolute -right-4 -top-4 h-24 w-24 rounded-full bg-white/5 blur-2xl" />
|
||||
<h2 class="mb-4 text-lg font-black">Intelligence Hub</h2>
|
||||
<div class="space-y-2.5">
|
||||
<div class="relative overflow-hidden rounded-xl bg-[#0a1d37] p-5 text-white">
|
||||
<div class="absolute -right-4 -top-4 h-20 w-20 rounded-full bg-white/5 blur-2xl" />
|
||||
<h2 class="mb-3 text-base font-black">Intelligence Hub</h2>
|
||||
<div class="space-y-2">
|
||||
{QUICK_ACTIONS.map((a) => {
|
||||
const Icon = a.icon;
|
||||
return (
|
||||
<A
|
||||
href={a.href}
|
||||
class="group flex w-full items-center justify-between rounded-2xl bg-white/10 p-3.5 transition-all hover:bg-white/15"
|
||||
class="group flex w-full items-center justify-between rounded-lg bg-white/10 px-3.5 py-3 transition-all hover:bg-white/15"
|
||||
>
|
||||
<span class="text-sm font-semibold">{a.label}</span>
|
||||
<span class="text-[13px] font-semibold">{a.label}</span>
|
||||
<Icon class="h-4 w-4 text-[#fd6216] transition-transform group-hover:translate-x-0.5" />
|
||||
</A>
|
||||
);
|
||||
|
|
@ -161,26 +143,25 @@ export default function AdminDashboard() {
|
|||
</div>
|
||||
|
||||
{/* Pipeline Status */}
|
||||
<div class="rounded-3xl bg-white p-6 shadow-[0_8px_32px_rgba(10,29,55,0.04)]">
|
||||
<h2 class="mb-4 text-[11px] font-black uppercase tracking-widest text-[#0a1d37]">
|
||||
<div class="rounded-xl bg-white p-5 shadow-[0_4px_20px_rgba(10,29,55,0.06)]">
|
||||
<h2 class="mb-4 text-[10px] font-bold uppercase tracking-widest text-[#0a1d37]">
|
||||
Pipeline Status
|
||||
</h2>
|
||||
<div class="space-y-4">
|
||||
{PIPELINE.map((p) => (
|
||||
<div class="space-y-1.5">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-bold text-[#0a1d37]">{p.name}</p>
|
||||
<div class="mb-1.5 flex items-center justify-between gap-2">
|
||||
<div class="min-w-0">
|
||||
<p class="truncate text-[13px] font-bold text-[#0a1d37]">{p.name}</p>
|
||||
<p class="text-[10px] text-slate-400">{p.type}</p>
|
||||
</div>
|
||||
<span class={`rounded-full px-2 py-0.5 text-[10px] font-black uppercase ${p.statusBg}`}>
|
||||
<span class={`shrink-0 rounded-md px-2 py-0.5 text-[10px] font-bold uppercase ${p.statusColor}`}>
|
||||
{p.status}
|
||||
</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full overflow-hidden rounded-full bg-slate-100">
|
||||
<div class={`h-full rounded-full ${p.color}`} style={`width: ${p.progress}%`} />
|
||||
<div class={`h-full rounded-full ${p.barColor}`} style={`width: ${p.progress}%`} />
|
||||
</div>
|
||||
<p class="text-right text-[10px] font-bold text-slate-400">{p.progress}%</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -190,28 +171,28 @@ export default function AdminDashboard() {
|
|||
|
||||
{/* ── Control Plane ── */}
|
||||
<div>
|
||||
<div class="mb-5 flex items-center justify-between">
|
||||
<h2 class="text-xl font-black tracking-tight text-[#0a1d37]">Control Plane</h2>
|
||||
<span class="rounded-full border border-slate-200 bg-white px-3 py-1 text-[11px] font-bold uppercase tracking-widest text-slate-400 shadow-sm">
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<h2 class="text-lg font-black tracking-tight text-[#0a1d37]">Control Plane</h2>
|
||||
<span class="rounded-md border border-slate-200 bg-white px-2.5 py-1 text-[10px] font-bold uppercase tracking-widest text-slate-400">
|
||||
{CONTROL.length} modules
|
||||
</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{CONTROL.map((item) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<A
|
||||
href={item.href}
|
||||
class="group flex items-start gap-4 rounded-2xl border border-slate-100 bg-white p-5 shadow-[0_8px_32px_rgba(10,29,55,0.04)] transition-all duration-200 hover:-translate-y-0.5 hover:border-[#fd6216]/20 hover:shadow-[0_12px_40px_rgba(10,29,55,0.08)]"
|
||||
class="group flex items-start gap-3.5 rounded-xl border border-slate-100 bg-white p-4 shadow-[0_4px_20px_rgba(10,29,55,0.04)] transition-all duration-200 hover:-translate-y-px hover:border-[#0a1d37]/10 hover:shadow-[0_8px_28px_rgba(10,29,55,0.08)]"
|
||||
>
|
||||
<div class={`mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl ${item.iconBg}`}>
|
||||
<div class={`mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${item.iconBg}`}>
|
||||
<Icon class={`h-4 w-4 ${item.iconFg}`} />
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-sm font-bold text-[#0a1d37] transition-colors group-hover:text-[#fd6216]">{item.label}</p>
|
||||
<p class="truncate text-[13px] font-bold text-[#0a1d37] transition-colors group-hover:text-[#fd6216]">{item.label}</p>
|
||||
<p class="mt-0.5 text-[11px] leading-relaxed text-slate-400">{item.desc}</p>
|
||||
</div>
|
||||
<ArrowRight class="mt-0.5 h-4 w-4 shrink-0 text-slate-200 transition-all group-hover:translate-x-0.5 group-hover:text-[#fd6216]" />
|
||||
<ArrowRight class="mt-0.5 h-3.5 w-3.5 shrink-0 text-slate-200 transition-all group-hover:translate-x-0.5 group-hover:text-[#0a1d37]" />
|
||||
</A>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue