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 • 3.94 kB
1
{"version":3,"file":"StatCard.mjs","names":["styles","surfaceStyles","Flexbox"],"sources":["../../../src/dashboard/StatCard/StatCard.tsx"],"sourcesContent":["'use client';\n\nimport { Minus, TrendingDown, TrendingUp } from 'lucide-react';\n\nimport Text from '@/base-ui/Text';\nimport Block from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { styles as surfaceStyles } from '../Surface/style';\nimport { styles } from './style';\nimport type { StatCardProps, StatDirection } from './type';\n\nconst deltaIcon = {\n down: TrendingDown,\n flat: Minus,\n up: TrendingUp,\n} satisfies Record<StatDirection, typeof Minus>;\n\nfunction StatCard({\n action,\n delta,\n direction = 'flat',\n hint,\n label,\n mark,\n prominent = false,\n value,\n wash,\n}: StatCardProps) {\n const deltaClass = {\n down: styles.deltaDown,\n flat: styles.deltaFlat,\n up: styles.deltaUp,\n }[direction];\n\n return (\n <div className={styles.lift}>\n <Block\n className={`${styles.root} ${surfaceStyles.card}${wash ? ` ${styles.wash} ${styles[wash]}` : ''} ${styles.frame}`}\n variant=\"borderless\"\n >\n <Flexbox className={styles.body} gap={prominent ? 0 : 8}>\n <Flexbox horizontal align=\"center\" justify=\"space-between\">\n <Flexbox horizontal align=\"center\" className={styles.copy} gap={6}>\n <Text ellipsis className={prominent ? styles.metricLabel : styles.label}>\n {label}\n </Text>\n {action}\n </Flexbox>\n {mark ? (\n <span aria-hidden className={styles.badge}>\n <Icon icon={mark} size={14} />\n </span>\n ) : null}\n </Flexbox>\n <div className={prominent ? styles.metricValue : styles.value}>{value}</div>\n {delta || hint ? (\n <Flexbox\n horizontal\n align=\"center\"\n className={prominent ? styles.metricFoot : undefined}\n gap={8}\n wrap=\"wrap\"\n >\n {delta ? (\n <span className={`${styles.delta} ${deltaClass}`}>\n <Icon icon={deltaIcon[direction]} size={14} />\n {delta}\n </span>\n ) : null}\n {hint ? (\n <Text className={prominent ? styles.metricHint : styles.hint}>{hint}</Text>\n ) : null}\n </Flexbox>\n ) : null}\n </Flexbox>\n </Block>\n </div>\n );\n}\n\nStatCard.displayName = 'StatCard';\n\nexport default StatCard;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,YAAY;CAChB,MAAM;CACN,MAAM;CACN,IAAI;AACN;AAEA,SAAS,SAAS,EAChB,QACA,OACA,YAAY,QACZ,MACA,OACA,MACA,YAAY,OACZ,OACA,QACgB;CAChB,MAAM,aAAa;EACjB,MAAMA,SAAO;EACb,MAAMA,SAAO;EACb,IAAIA,SAAO;CACb,EAAE;CAEF,OACE,oBAAC,OAAD;EAAK,WAAWA,SAAO;EACrB,UAAA,oBAAC,OAAD;GACE,WAAW,GAAGA,SAAO,KAAK,GAAGC,OAAc,OAAO,OAAO,IAAID,SAAO,KAAK,GAAGA,SAAO,UAAU,GAAG,GAAGA,SAAO;GAC1G,SAAQ;GAER,UAAA,qBAACE,mBAAD;IAAS,WAAWF,SAAO;IAAM,KAAK,YAAY,IAAI;IAAtD,UAAA;KACE,qBAACE,mBAAD;MAAS,YAAA;MAAW,OAAM;MAAS,SAAQ;MAA3C,UAAA,CACE,qBAACA,mBAAD;OAAS,YAAA;OAAW,OAAM;OAAS,WAAWF,SAAO;OAAM,KAAK;OAAhE,UAAA,CACE,oBAAC,MAAD;QAAM,UAAA;QAAS,WAAW,YAAYA,SAAO,cAAcA,SAAO;QAC/D,UAAA;OACG,CAAA,GACL,MACM;MACR,CAAA,GAAA,OACC,oBAAC,QAAD;OAAM,eAAA;OAAY,WAAWA,SAAO;OAClC,UAAA,oBAAC,MAAD;QAAM,MAAM;QAAM,MAAM;OAAK,CAAA;MACzB,CAAA,IACJ,IACG;;KACT,oBAAC,OAAD;MAAK,WAAW,YAAYA,SAAO,cAAcA,SAAO;MAAQ,UAAA;KAAW,CAAA;KAC1E,SAAS,OACR,qBAACE,mBAAD;MACE,YAAA;MACA,OAAM;MACN,WAAW,YAAYF,SAAO,aAAa,KAAA;MAC3C,KAAK;MACL,MAAK;MALP,UAAA,CAOG,QACC,qBAAC,QAAD;OAAM,WAAW,GAAGA,SAAO,MAAM,GAAG;OAApC,UAAA,CACE,oBAAC,MAAD;QAAM,MAAM,UAAU;QAAY,MAAM;OAAK,CAAA,GAC5C,KACG;MACJ,CAAA,IAAA,MACH,OACC,oBAAC,MAAD;OAAM,WAAW,YAAYA,SAAO,aAAaA,SAAO;OAAO,UAAA;MAAW,CAAA,IACxE,IACG;KACP,CAAA,IAAA;IACG;;EACJ,CAAA;CACJ,CAAA;AAET;AAEA,SAAS,cAAc"}