@lobehub/ui/es/dashboard/Section/Section.mjs.map

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

{"version":3,"file":"Section.mjs","names":["Flexbox"],"sources":["../../../src/dashboard/Section/Section.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronRight } from 'lucide-react';\n\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { useSurfaceLink } from '../Surface/link';\nimport Surface from '../Surface/Surface';\nimport { styles } from './style';\nimport type { SectionProps } from './type';\n\n/** A titled page section with description, extra and a \"more\" link, flat or as a card. */\nconst Section = ({\n  className,\n  variant = 'default',\n  fontSize,\n  title,\n  more,\n  moreLink,\n  icon,\n  children,\n  desc,\n  extra,\n  gap,\n  padded,\n  renderLink,\n  ...rest\n}: SectionProps) => {\n  const link = useSurfaceLink(renderLink);\n  const moreNode = moreLink\n    ? link({\n        children: (\n          <>\n            <span>{more}</span>\n            <Icon icon={ChevronRight} />\n          </>\n        ),\n        className: styles.more,\n        href: moreLink,\n        rel: moreLink.startsWith('http') ? 'noreferrer' : undefined,\n        target: moreLink.startsWith('http') ? '_blank' : undefined,\n      })\n    : null;\n  const actions =\n    extra || moreNode ? (\n      <Flexbox horizontal align=\"center\" gap={8}>\n        {extra}\n        {moreNode}\n      </Flexbox>\n    ) : undefined;\n\n  if (variant === 'card') {\n    return (\n      <Surface\n        description={desc}\n        extra={actions}\n        padded={padded ?? true}\n        title={\n          title ? (\n            <span className={styles.title} style={fontSize ? { fontSize } : undefined}>\n              {icon}\n              {title}\n            </span>\n          ) : undefined\n        }\n      >\n        <Flexbox className={className} gap={gap ?? 12} {...rest}>\n          {children}\n        </Flexbox>\n      </Surface>\n    );\n  }\n\n  if (!title) {\n    return (\n      <Flexbox className={className} gap={gap} {...rest}>\n        {children}\n      </Flexbox>\n    );\n  }\n\n  return (\n    <Flexbox className={className} gap={gap ?? 16} width=\"100%\" {...rest}>\n      <Flexbox horizontal align=\"center\" gap={12} justify=\"space-between\" width=\"100%\">\n        <Flexbox gap={4}>\n          {icon}\n          <h2 className={styles.title} style={fontSize ? { fontSize } : undefined}>\n            {title}\n          </h2>\n          {desc ? <div className={styles.desc}>{desc}</div> : null}\n        </Flexbox>\n        {actions ?? null}\n      </Flexbox>\n      {children}\n    </Flexbox>\n  );\n};\n\nSection.displayName = 'Section';\n\nexport default Section;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,WAAW,EACf,WACA,UAAU,WACV,UACA,OACA,MACA,UACA,MACA,UACA,MACA,OACA,KACA,QACA,YACA,GAAG,WACe;CAClB,MAAM,OAAO,eAAe,UAAU;CACtC,MAAM,WAAW,WACb,KAAK;EACH,UACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA,GAClB,oBAAC,MAAD,EAAM,MAAM,aAAe,CAAA,CAC3B,EAAA,CAAA;EAEJ,WAAW,OAAO;EAClB,MAAM;EACN,KAAK,SAAS,WAAW,MAAM,IAAI,eAAe,KAAA;EAClD,QAAQ,SAAS,WAAW,MAAM,IAAI,WAAW,KAAA;CACnD,CAAC,IACD;CACJ,MAAM,UACJ,SAAS,WACP,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAM;EAAS,KAAK;EAAxC,UAAA,CACG,OACA,QACM;CACP,CAAA,IAAA,KAAA;CAEN,IAAI,YAAY,QACd,OACE,oBAAC,SAAD;EACE,aAAa;EACb,OAAO;EACP,QAAQ,UAAU;EAClB,OACE,QACE,qBAAC,QAAD;GAAM,WAAW,OAAO;GAAO,OAAO,WAAW,EAAE,SAAS,IAAI,KAAA;GAAhE,UAAA,CACG,MACA,KACG;EACJ,CAAA,IAAA,KAAA;EAGN,UAAA,oBAACA,mBAAD;GAAoB;GAAW,KAAK,OAAO;GAAI,GAAI;GAChD;EACM,CAAA;CACF,CAAA;CAIb,IAAI,CAAC,OACH,OACE,oBAACA,mBAAD;EAAoB;EAAgB;EAAK,GAAI;EAC1C;CACM,CAAA;CAIb,OACE,qBAACA,mBAAD;EAAoB;EAAW,KAAK,OAAO;EAAI,OAAM;EAAO,GAAI;EAAhE,UAAA,CACE,qBAACA,mBAAD;GAAS,YAAA;GAAW,OAAM;GAAS,KAAK;GAAI,SAAQ;GAAgB,OAAM;GAA1E,UAAA,CACE,qBAACA,mBAAD;IAAS,KAAK;IAAd,UAAA;KACG;KACD,oBAAC,MAAD;MAAI,WAAW,OAAO;MAAO,OAAO,WAAW,EAAE,SAAS,IAAI,KAAA;MAC3D,UAAA;KACC,CAAA;KACH,OAAO,oBAAC,OAAD;MAAK,WAAW,OAAO;MAAO,UAAA;KAAU,CAAA,IAAI;IAC7C;GACR,CAAA,GAAA,WAAW,IACL;EACR,CAAA,GAAA,QACM;;AAEb;AAEA,QAAQ,cAAc"}