skybridge/demo/dist/665.js

"use strict";(self.webpackChunkdemo=self.webpackChunkdemo||[]).push([[665],{665:(e,t,a)=>{a.r(t),a.d(t,{default:()=>c});var r=a(914),l=a.n(r),n=a(435),i=a(101);const c=()=>{const[e,t]=(0,r.useState)(0),[a,c]=(0,r.useState)(!1);(0,r.useEffect)(()=>{const e=setInterval(()=>{t(e=>e>=100?0:e+1)},100);return()=>clearInterval(e)},[]);const o=[{label:"Active Users",value:"1,234",icon:i.IconUsers,color:"blue"},{label:"Total Revenue",value:"$45,678",icon:i.IconChartLine,color:"green"},{label:"Projects",value:"89",icon:i.IconRocket,color:"orange"}];return l().createElement(n.Container,{size:"xl",py:"xl"},l().createElement(n.Stack,{gap:"xl"},l().createElement(n.Group,{justify:"space-between",align:"center"},l().createElement("div",null,l().createElement(n.Title,{order:1},"Demo Application"),l().createElement(n.Text,{c:"dimmed",size:"lg",mt:"xs"},"A sample federated application showcasing module federation")),l().createElement(n.ActionIcon,{size:"lg",variant:"light",loading:a,onClick:()=>{c(!0),setTimeout(()=>c(!1),1500)}},l().createElement(i.IconRefresh,{size:18}))),l().createElement(n.Alert,{icon:l().createElement(i.IconInfoCircle,{size:16}),title:"Welcome!",color:"blue",variant:"light"},"This is a demo application loaded via Module Federation. It demonstrates how microfrontends can be seamlessly integrated into the shell application."),l().createElement(n.SimpleGrid,{cols:{base:1,sm:3},spacing:"md"},o.map(e=>l().createElement(n.Paper,{key:e.label,p:"md",radius:"md",withBorder:!0},l().createElement(n.Group,{justify:"space-between"},l().createElement("div",null,l().createElement(n.Text,{c:"dimmed",size:"sm",fw:500,tt:"uppercase"},e.label),l().createElement(n.Text,{fw:700,size:"xl"},e.value)),l().createElement(e.icon,{size:24,color:`var(--mantine-color-${e.color}-6)`}))))),l().createElement(n.Card,{shadow:"sm",padding:"lg",radius:"md",withBorder:!0},l().createElement(n.Card.Section,{withBorder:!0,inheritPadding:!0,py:"xs"},l().createElement(n.Group,{justify:"space-between"},l().createElement(n.Text,{fw:500},"System Performance"),l().createElement(n.Badge,{color:"green",variant:"light"},"Healthy"))),l().createElement(n.Card.Section,{inheritPadding:!0,py:"md"},l().createElement(n.Stack,{gap:"xs"},l().createElement(n.Text,{size:"sm",c:"dimmed"},"CPU Usage: ",e.toFixed(1),"%"),l().createElement(n.Progress,{value:e,size:"sm",color:"blue",animated:!0})))),l().createElement("div",null,l().createElement(n.Title,{order:2,mb:"md"},"Features"),l().createElement(n.SimpleGrid,{cols:{base:1,sm:2},spacing:"md"},[{title:"Real-time Analytics",description:"Monitor your data in real-time"},{title:"Team Collaboration",description:"Work together seamlessly"},{title:"Cloud Integration",description:"Connect with cloud services"},{title:"Custom Reports",description:"Generate detailed reports"}].map((e,t)=>l().createElement(n.Card,{key:t,shadow:"sm",padding:"lg",radius:"md",withBorder:!0},l().createElement(n.Group,{mb:"xs"},l().createElement(i.IconCheck,{size:16,color:"var(--mantine-color-green-6)"}),l().createElement(n.Text,{fw:500},e.title)),l().createElement(n.Text,{size:"sm",c:"dimmed"},e.description))))),l().createElement(n.Divider,null),l().createElement(n.Group,{justify:"center"},l().createElement(n.Button,{variant:"outline",size:"md"},"View Documentation"),l().createElement(n.Button,{size:"md"},"Get Started"))))}}}]);