UNPKG

@lobehub/ui

Version:

Lobe UI is an open-source UI component library for building AIGC web apps

github.com/lobehub/lobe-ui

lobehub/lobe-ui

1 lines • 5.62 kB
1
{"version":3,"file":"PageSkeleton.mjs","names":["styles","surfaceStyles"],"sources":["../../../src/dashboard/PageSkeleton/PageSkeleton.tsx"],"sourcesContent":["'use client';\n\nimport Skeleton from '@/base-ui/Skeleton';\n\nimport { styles as surfaceStyles } from '../Surface/style';\nimport { styles } from './style';\nimport type {\n LoadingAnnouncerProps,\n PageHeaderSkeletonProps,\n PageLoadingProps,\n TableSkeletonProps,\n} from './type';\n\nconst bone = { height: undefined, width: undefined };\nconst lineWidths = [\n ['68%', '36%'],\n ['52%', '28%'],\n ['76%', '42%'],\n ['58%', '32%'],\n] as const;\n\nfunction LoadingAnnouncer({ label }: LoadingAnnouncerProps) {\n return (\n <output aria-live=\"polite\" className={styles.srOnly}>\n {label}\n </output>\n );\n}\n\nLoadingAnnouncer.displayName = 'LoadingAnnouncer';\n\nfunction PageHeaderSkeleton({ action = true }: PageHeaderSkeletonProps) {\n return (\n <div aria-hidden className={styles.header}>\n <div className={styles.headerCopy}>\n <Skeleton className={styles.title} style={bone} />\n <Skeleton.Text fontSize={14} width=\"46%\" />\n </div>\n {action ? <Skeleton className={styles.action} style={bone} /> : null}\n </div>\n );\n}\n\nPageHeaderSkeleton.displayName = 'PageHeaderSkeleton';\n\nfunction TableSkeleton({ framed = true, leading = 'text', rows = 6 }: TableSkeletonProps) {\n const head = [96, 72, 64, 48];\n return (\n <div aria-hidden className={framed ? `${styles.table} ${surfaceStyles.card}` : styles.table}>\n <div className={styles.thead}>\n {head.map((width, index) => (\n <Skeleton className={styles.theadCell} key={index} style={{ ...bone, width }} />\n ))}\n </div>\n {Array.from({ length: rows }, (_, index) => (\n <div className={styles.row} key={index}>\n {leading === 'avatar' ? <Skeleton.Avatar shape=\"circle\" size={24} /> : null}\n {leading === 'icon' ? <Skeleton.Avatar shape=\"square\" size={24} /> : null}\n <div className={styles.copy}>\n <Skeleton.Text\n fontSize={14}\n rows={2}\n width={[...lineWidths[index % lineWidths.length]]}\n />\n </div>\n <Skeleton className={styles.tag} style={bone} />\n <Skeleton className={styles.cell} style={bone} />\n </div>\n ))}\n </div>\n );\n}\n\nTableSkeleton.displayName = 'TableSkeleton';\n\nfunction StatCardSkeleton() {\n return (\n <div aria-hidden className={`${styles.stat} ${surfaceStyles.card}`}>\n <Skeleton.Text fontSize={14} width={72} />\n <Skeleton className={styles.statValue} style={bone} />\n <Skeleton.Text fontSize={14} width=\"68%\" />\n </div>\n );\n}\n\nStatCardSkeleton.displayName = 'StatCardSkeleton';\n\nfunction PageLoading({ header = true, label = 'Loading', stats = 4 }: PageLoadingProps) {\n return (\n <div aria-busy=\"true\" className={styles.page}>\n <LoadingAnnouncer label={label} />\n {header ? <PageHeaderSkeleton /> : null}\n <section aria-hidden className={styles.statGrid}>\n {Array.from({ length: stats }, (_, index) => (\n <StatCardSkeleton key={index} />\n ))}\n </section>\n <TableSkeleton />\n </div>\n );\n}\n\nPageLoading.displayName = 'PageLoading';\n\nexport { LoadingAnnouncer, PageHeaderSkeleton, StatCardSkeleton, TableSkeleton };\nexport default PageLoading;\n"],"mappings":"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"}