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 • 4.21 kB
1
{"version":3,"file":"MetricStrip.mjs","names":[],"sources":["../../../src/dashboard/MetricStrip/MetricStrip.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport Skeleton from '@/base-ui/Skeleton';\n\nimport { useSurfaceLink } from '../Surface/link';\nimport Surface from '../Surface/Surface';\nimport { styles } from './style';\nimport type { MetricItem, MetricStripProps } from './type';\n\nconst deltaClass = {\n down: styles.deltaDown,\n flat: styles.deltaFlat,\n up: styles.deltaUp,\n} as const;\n\nconst MetricBody = ({ item, loading }: { item: MetricItem; loading?: boolean }) => (\n <>\n <div className={styles.label}>{item.label}</div>\n {loading ? (\n <Skeleton height={28} radius={6} width={88} />\n ) : (\n <div\n className={cx(\n styles.value,\n item.valueTone === 'danger' && styles.valueDanger,\n item.valueTone === 'warning' && styles.valueWarning,\n )}\n >\n {item.value}\n </div>\n )}\n {!loading && (item.delta || item.hint) ? (\n <div className={styles.foot}>\n {item.delta ? (\n <span className={cx(styles.delta, deltaClass[item.direction ?? 'flat'])}>\n {item.delta}\n </span>\n ) : null}\n {item.hint ? <span className={styles.hint}>{item.hint}</span> : null}\n </div>\n ) : null}\n </>\n);\n\n/** One card, divided into metrics. Peer numbers share a surface instead of a row of equal cards. */\nconst MetricStrip = ({ items, loading, renderLink }: MetricStripProps) => {\n const link = useSurfaceLink(renderLink);\n\n return (\n <Surface>\n <div className={styles.frame}>\n <div className={styles.grid}>\n {items.map((item, index) => {\n const body = <MetricBody item={item} loading={item.loading ?? loading} />;\n if (item.href) {\n return (\n <div className={styles.slot} key={`${index}:${item.href}`}>\n {link({\n children: body,\n className: cx(styles.cell, styles.link),\n href: item.href,\n })}\n </div>\n );\n }\n if (item.onClick) {\n return (\n <button\n className={cx(styles.cell, styles.press)}\n key={index}\n type=\"button\"\n onClick={item.onClick}\n >\n {body}\n </button>\n );\n }\n return (\n <div className={styles.cell} key={index}>\n {body}\n </div>\n );\n })}\n </div>\n </div>\n </Surface>\n );\n};\n\nMetricStrip.displayName = 'MetricStrip';\n\nexport default MetricStrip;\n"],"mappings":";;;;;;;;AAWA,MAAM,aAAa;CACjB,MAAM,OAAO;CACb,MAAM,OAAO;CACb,IAAI,OAAO;AACb;AAEA,MAAM,cAAc,EAAE,MAAM,cAC1B,qBAAA,UAAA,EAAA,UAAA;CACE,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAQ,UAAA,KAAK;CAAW,CAAA;CAC9C,UACC,oBAAC,UAAD;EAAU,QAAQ;EAAI,QAAQ;EAAG,OAAO;CAAK,CAAA,IAE7C,oBAAC,OAAD;EACE,WAAW,GACT,OAAO,OACP,KAAK,cAAc,YAAY,OAAO,aACtC,KAAK,cAAc,aAAa,OAAO,YACzC;EAEC,UAAA,KAAK;CACH,CAAA;CAEN,CAAC,YAAY,KAAK,SAAS,KAAK,QAC/B,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACG,KAAK,QACJ,oBAAC,QAAD;GAAM,WAAW,GAAG,OAAO,OAAO,WAAW,KAAK,aAAa,OAAO;GACnE,UAAA,KAAK;EACF,CAAA,IACJ,MACH,KAAK,OAAO,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAO,UAAA,KAAK;EAAW,CAAA,IAAI,IAC7D;CACH,CAAA,IAAA;AACJ,EAAA,CAAA;;AAIJ,MAAM,eAAe,EAAE,OAAO,SAAS,iBAAmC;CACxE,MAAM,OAAO,eAAe,UAAU;CAEtC,OACE,oBAAC,SAAD,EAAA,UACE,oBAAC,OAAD;EAAK,WAAW,OAAO;EACrB,UAAA,oBAAC,OAAD;GAAK,WAAW,OAAO;GACpB,UAAA,MAAM,KAAK,MAAM,UAAU;IAC1B,MAAM,OAAO,oBAAC,YAAD;KAAkB;KAAM,SAAS,KAAK,WAAW;IAAU,CAAA;IACxE,IAAI,KAAK,MACP,OACE,oBAAC,OAAD;KAAK,WAAW,OAAO;KACpB,UAAA,KAAK;MACJ,UAAU;MACV,WAAW,GAAG,OAAO,MAAM,OAAO,IAAI;MACtC,MAAM,KAAK;KACb,CAAC;IACE,GAN6B,GAAG,MAAM,GAAG,KAAK,MAM9C;IAGT,IAAI,KAAK,SACP,OACE,oBAAC,UAAD;KACE,WAAW,GAAG,OAAO,MAAM,OAAO,KAAK;KAEvC,MAAK;KACL,SAAS,KAAK;KAEb,UAAA;IACK,GALD,KAKC;IAGZ,OACE,oBAAC,OAAD;KAAK,WAAW,OAAO;KACpB,UAAA;IACE,GAF6B,KAE7B;GAET,CAAC;EACE,CAAA;CACF,CAAA,EACE,CAAA;AAEb;AAEA,YAAY,cAAc"}