fix(ui): добавить монитор системы и выровнять chrome

Подключить SystemMonitor, IconTile, QuickActionGrid на /apps и skip-link. Co-authored-by: Cursor <[email protected]>
2026-08-17 15:36:55 +07:00
parent 4ce05a6669
commit 778c42bad8
17 changed files with 687 additions and 109 deletions
@@ -0,0 +1,82 @@
+/**
+ * ReUI Empty + IconStack — Frame-friendly (empty-state-14 / empty-state-12).
+ * Preview: https://reui.io/preview/base/empty-state-14 · https://reui.io/preview/base/empty-state-12
+ * Docs: https://reui.io/docs/components/base/icon-stack
+ */
+import { InboxIcon, type LucideIcon } from 'lucide-react'
+import { IconStack } from '@/components/reui/icon-stack'
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '@authportal/ui/components/empty'
+import { cn } from '@authportal/ui/lib/utils'
+import type { ReactNode } from 'react'
+
+interface EmptyStateProps {
+  icon?: LucideIcon
+  title: string
+  description?: string
+  action?: ReactNode
+  className?: string
+  stackedIcon?: boolean
+  centered?: boolean
+}
+
+export function EmptyState({
+  icon: Icon = InboxIcon,
+  title,
+  description,
+  action,
+  className,
+  stackedIcon = true,
+  centered = true,
+}: EmptyStateProps) {
+  const body = (
+    <Empty
+      className={cn(
+        'max-w-md flex-none border-0 bg-transparent p-0',
+        !centered && className,
+      )}
+    >
+      <EmptyHeader className="gap-5 text-center">
+        <EmptyMedia className="mb-0">
+          {stackedIcon ? (
+            <IconStack aria-hidden="true" className="h-14 w-12">
+              <Icon strokeWidth={1.9} aria-hidden="true" className="size-5" />
+            </IconStack>
+          ) : (
+            <span className="bg-muted text-muted-foreground flex size-10 items-center justify-center rounded-lg [&_svg]:size-5">
+              <Icon aria-hidden="true" />
+            </span>
+          )}
+        </EmptyMedia>
+        <div className="flex flex-col items-center gap-2">
+          <EmptyTitle className="text-base font-semibold tracking-tight">{title}</EmptyTitle>
+          {description ? (
+            <EmptyDescription className="max-w-sm text-sm/relaxed">{description}</EmptyDescription>
+          ) : null}
+        </div>
+      </EmptyHeader>
+      {action ? (
+        <EmptyContent className="mt-1 items-center justify-center">{action}</EmptyContent>
+      ) : null}
+    </Empty>
+  )
+
+  if (!centered) return body
+
+  return (
+    <div
+      className={cn(
+        'flex w-full flex-1 items-center justify-center py-14 sm:py-16',
+        className,
+      )}
+    >
+      {body}
+    </div>
+  )
+}