{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "hero-split-device-mockup", "title": "Hero Split Device Mockup", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/hero-split-device-mockup/hero-split-device-mockup.component.ts", "content": "// Dual viewport device mockup hero with interactive viewport controls (desktop /\n// tablet / mobile), dark-frame toggle, inner app tabs, KPI grid and a telemetry\n// sparkline. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport { ArrowRight, LucideAngularModule, Monitor, Moon, Smartphone, Sun, Tablet } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\n\nexport type HeroSplitDeviceMode = 'desktop' | 'tablet' | 'mobile'\nexport type HeroSplitDeviceTab = 'overview' | 'analytics' | 'activity'\n\ninterface HeroSplitKpi {\n label: string\n value: string\n change: string\n status: string\n}\n\nconst mockKpis: HeroSplitKpi[] = [\n { label: 'Active Sessions', value: '24,892', change: '+14.2%', status: 'up' },\n { label: 'Conversion Rate', value: '4.82%', change: '+0.6%', status: 'up' },\n { label: 'Avg TTFB', value: '18ms', change: '-4ms', status: 'optimal' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-hero-split-device-mockup, [ui-hero-split-device-mockup]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent, UiCardContentComponent],\n template: `\n
\n
\n \n
\n \n \n Fluid Container Queries • Tailwind v4 Ready\n \n \n\n

\n {{ title }}\n

\n\n

\n {{ description }}\n

\n\n \n
\n
\n \n \n \n
\n\n \n @if (isDarkMode()) {\n \n } @else {\n \n }\n {{ isDarkMode() ? 'Dark Frame' : 'Light Frame' }}\n \n
\n
\n\n \n
\n
\n \n
\n
\n \n \n \n
\n\n \n \n https://uipkge.dev/demo/dashboard-kpis\n
\n\n
\n \n LIVE\n
\n
\n\n \n
\n \n
\n
\n \n UI\n
\n
\n
Platform Metrics
\n
Production Cluster (us-east-1)
\n
\n
\n\n \n
\n \n \n
\n
\n\n \n
\n @for (kpi of kpis; track kpi.label) {\n
\n
\n
{{ kpi.label }}
\n
{{ kpi.value }}
\n
\n {{ kpi.change }}\n • vs last week\n
\n
\n
\n }\n
\n\n \n
\n
\n Real-time Telemetry Stream\n \n Synced: 0.2ms\n \n
\n\n \n \n \n \n \n
\n
\n
\n \n \n
\n `,\n})\nexport class UiHeroSplitDeviceMockupComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly Monitor = Monitor\n protected readonly Moon = Moon\n protected readonly Smartphone = Smartphone\n protected readonly Sun = Sun\n protected readonly Tablet = Tablet\n\n protected readonly kpis = mockKpis\n\n @Input() title = 'Responsive components with identical fidelity on every device.'\n @Input() description =\n 'Every primitive and block is engineered with fluid container queries and zero layout shift across desktop, tablet, and mobile displays.'\n @Input('class') className?: string\n\n readonly activeMode = signal('desktop')\n readonly isDarkMode = signal(true)\n readonly activeTab = signal('overview')\n\n readonly viewportWidthClass = computed(() => {\n const mode = this.activeMode()\n if (mode === 'desktop') return 'w-full max-w-2xl'\n if (mode === 'tablet') return 'w-full max-w-md'\n return 'w-full max-w-[320px]'\n })\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden py-16 sm:py-24 lg:py-28', this.className)\n }\n\n get frameClass(): string {\n return cn(\n 'border-border bg-card rounded-xl border p-2 shadow-md transition-colors duration-300 ease-out sm:p-3',\n this.viewportWidthClass(),\n this.isDarkMode() ? 'dark' : '',\n )\n }\n\n get kpiGridClass(): string {\n return cn('grid gap-2.5', this.activeMode() === 'mobile' ? 'grid-cols-1' : 'grid-cols-3')\n }\n\n modeClass(mode: HeroSplitDeviceMode): string {\n return cn(\n 'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none',\n this.activeMode() === mode\n ? 'bg-background text-foreground shadow-2xs'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n tabClass(tab: HeroSplitDeviceTab): string {\n return cn(\n 'rounded px-2 py-0.5 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none',\n this.activeTab() === tab\n ? 'bg-background text-foreground shadow-2xs'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n toggleDarkMode(): void {\n this.isDarkMode.update((v) => !v)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/hero-split-device-mockup/hero-split-device-mockup.component.ts" }, { "path": "packages/registry-angular/blocks/hero-split-device-mockup/index.ts", "content": "export {\n UiHeroSplitDeviceMockupComponent,\n type HeroSplitDeviceMode,\n type HeroSplitDeviceTab,\n} from './hero-split-device-mockup.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/hero-split-device-mockup/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json" ], "description": "Dual viewport device mockup hero with interactive viewport controls and real-time state synchronization.", "categories": [ "hero", "marketing" ], "deprecated": true, "replacedBy": "hero" }