mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 09:33:46 +00:00
Enhance AdminPanel with modern icon components for improved visual consistency
- Introduced new icon components for analytics, users, tariffs, marketing, and system sections. - Updated AdminGroup interface to accept React nodes for icons, enhancing flexibility. - Refactored icon rendering in GroupSection for better styling and layout.
This commit is contained in:
PEDZEO
@@ -1,6 +1,38 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
// Group header icons
|
||||
const AnalyticsGroupIcon = () => (
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
const UsersGroupIcon = () => (
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
const TariffsGroupIcon = () => (
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
const MarketingGroupIcon = () => (
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
const SystemGroupIcon = () => (
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
// Modern icons with consistent styling
|
||||
const ChartBarIcon = () => (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
@@ -109,7 +141,7 @@ interface AdminItem {
|
||||
interface AdminGroup {
|
||||
id: string
|
||||
title: string
|
||||
icon: string
|
||||
icon: React.ReactNode
|
||||
gradient: string
|
||||
borderColor: string
|
||||
iconBg: string
|
||||
@@ -143,7 +175,9 @@ function GroupSection({ group }: { group: AdminGroup }) {
|
||||
{/* Group Header */}
|
||||
<div className={`px-4 py-3 bg-gradient-to-r ${group.gradient} border-b ${group.borderColor}`}>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span className="text-lg">{group.icon}</span>
|
||||
<div className={`p-1.5 rounded-lg ${group.iconBg} ${group.iconColor}`}>
|
||||
{group.icon}
|
||||
</div>
|
||||
<h2 className="text-sm font-semibold text-dark-100">{group.title}</h2>
|
||||
</div>
|
||||
</div>
|
||||
@@ -170,7 +204,7 @@ export default function AdminPanel() {
|
||||
{
|
||||
id: 'analytics',
|
||||
title: t('admin.groups.analytics', 'Аналитика'),
|
||||
icon: '📊',
|
||||
icon: <AnalyticsGroupIcon />,
|
||||
gradient: 'from-emerald-500/10 to-emerald-500/5',
|
||||
borderColor: 'border-emerald-500/20',
|
||||
iconBg: 'bg-emerald-500/20',
|
||||
@@ -193,7 +227,7 @@ export default function AdminPanel() {
|
||||
{
|
||||
id: 'users',
|
||||
title: t('admin.groups.users', 'Пользователи'),
|
||||
icon: '👥',
|
||||
icon: <UsersGroupIcon />,
|
||||
gradient: 'from-blue-500/10 to-blue-500/5',
|
||||
borderColor: 'border-blue-500/20',
|
||||
iconBg: 'bg-blue-500/20',
|
||||
@@ -222,7 +256,7 @@ export default function AdminPanel() {
|
||||
{
|
||||
id: 'tariffs',
|
||||
title: t('admin.groups.tariffs', 'Тарифы и продажи'),
|
||||
icon: '💰',
|
||||
icon: <TariffsGroupIcon />,
|
||||
gradient: 'from-amber-500/10 to-amber-500/5',
|
||||
borderColor: 'border-amber-500/20',
|
||||
iconBg: 'bg-amber-500/20',
|
||||
@@ -251,7 +285,7 @@ export default function AdminPanel() {
|
||||
{
|
||||
id: 'marketing',
|
||||
title: t('admin.groups.marketing', 'Маркетинг'),
|
||||
icon: '📣',
|
||||
icon: <MarketingGroupIcon />,
|
||||
gradient: 'from-rose-500/10 to-rose-500/5',
|
||||
borderColor: 'border-rose-500/20',
|
||||
iconBg: 'bg-rose-500/20',
|
||||
@@ -280,7 +314,7 @@ export default function AdminPanel() {
|
||||
{
|
||||
id: 'system',
|
||||
title: t('admin.groups.system', 'Система'),
|
||||
icon: '⚙️',
|
||||
icon: <SystemGroupIcon />,
|
||||
gradient: 'from-violet-500/10 to-violet-500/5',
|
||||
borderColor: 'border-violet-500/20',
|
||||
iconBg: 'bg-violet-500/20',
|
||||
|
||||
Reference in New Issue
Block a user