64 lines
2.8 KiB
TypeScript
64 lines
2.8 KiB
TypeScript
import React from 'react';
|
||
import { Badge } from '../../shared/components/Badge';
|
||
import { Button } from '../../shared/components/Button';
|
||
import { CAPABILITIES_LIST } from '../../core/capabilities/types';
|
||
import { useDemoStore } from '../../mock/store';
|
||
import { Grid, Check, Sparkles, Plus } from 'lucide-react';
|
||
|
||
export const AppsCatalogModule: React.FC = () => {
|
||
const { customCapabilities, toggleCapability } = useDemoStore();
|
||
|
||
return (
|
||
<div className="space-y-4 animate-fade-in">
|
||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 bg-krona-surface p-3.5 rounded-xl border border-krona-border shadow-krona-soft">
|
||
<div>
|
||
<h2 className="text-sm font-bold text-krona-primary">
|
||
Каталог приложений & Модульная экосистема Кроны
|
||
</h2>
|
||
<p className="text-xs text-krona-secondary">
|
||
Подключайте и отключайте функциональные блоки для адаптации платформы под новые ниши
|
||
</p>
|
||
</div>
|
||
|
||
<Badge variant="gold" size="md">Всего модулей: {CAPABILITIES_LIST.length}</Badge>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3.5">
|
||
{CAPABILITIES_LIST.map((app) => {
|
||
const isEnabled = customCapabilities[app.id];
|
||
|
||
return (
|
||
<div
|
||
key={app.id}
|
||
className="p-4 rounded-xl border border-krona-border bg-krona-surface shadow-krona-soft flex flex-col justify-between space-y-3"
|
||
>
|
||
<div>
|
||
<div className="flex items-center justify-between mb-1.5">
|
||
<span className="text-[10px] uppercase font-bold text-krona-secondary">{app.category}</span>
|
||
<Badge variant={isEnabled ? 'green' : 'neutral'} size="sm">
|
||
{isEnabled ? 'Активен' : 'Отключен'}
|
||
</Badge>
|
||
</div>
|
||
<h4 className="text-xs font-bold text-krona-primary">{app.name}</h4>
|
||
<p className="text-[11px] text-krona-secondary mt-1 leading-relaxed">
|
||
{app.description}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="pt-2 border-t border-krona-border/50 flex justify-end">
|
||
<Button
|
||
variant={isEnabled ? 'secondary' : 'primary'}
|
||
size="sm"
|
||
className="w-full text-xs"
|
||
onClick={() => toggleCapability(app.id)}
|
||
>
|
||
{isEnabled ? 'Отключить модуль' : 'Включить в контур'}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|