@lobehub/ui/es/awesome/Features/FeatureItem.mjs.map

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

{"version":3,"file":"FeatureItem.mjs","names":["Img","Center","Icon","Flexbox","Text","A"],"sources":["../../../src/awesome/Features/FeatureItem.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { CSSProperties, memo, useMemo } from 'react';\n\nimport A from '@/A';\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Img from '@/Img';\nimport Text from '@/Text';\n\nimport { styles } from './style';\nimport type { FeatureItemProps } from './type';\n\nconst Image = memo<{ className?: string; image: string; style?: CSSProperties; title: string }>(\n  ({ image, className, title, style }) => {\n    return image.startsWith('http') ? (\n      <Img alt={title} className={className} src={image} style={style} />\n    ) : (\n      <Center className={className} style={style}>\n        {image}\n      </Center>\n    );\n  },\n);\n\nconst Item = memo<FeatureItemProps>(\n  ({\n    style,\n    className,\n    row,\n    column,\n    description,\n    image,\n    title,\n    link,\n    icon,\n    imageStyle,\n    openExternal,\n    ...rest\n  }) => {\n    const rowNumber = row || 7;\n    const hasLink = Boolean(link);\n\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--features-row-num': String(rowNumber),\n        '--features-title-hover-size': hasLink ? '14px' : '20px',\n      }),\n      [rowNumber, hasLink],\n    );\n\n    return (\n      <div\n        className={cx(hasLink ? styles.containerHasLink : styles.container, className)}\n        style={{\n          ...cssVariables,\n          gridColumn: `span ${column || 1}`,\n          gridRow: `span ${rowNumber}`,\n          ...style,\n        }}\n        {...rest}\n      >\n        <div className={styles.cell}>\n          {image ||\n            (icon && (\n              <Center className={styles.imgContainer} style={imageStyle}>\n                {icon && <Icon className={styles.img} icon={icon} />}\n                {image && <Image className={styles.img} image={image} title={title} />}\n              </Center>\n            ))}\n          {title && (\n            <Flexbox align={'center'} as={'h3'} className={styles.title} gap={8} horizontal>\n              {title}\n            </Flexbox>\n          )}\n          {description && (\n            <Text\n              className={styles.desc}\n              ellipsis={{\n                rows: 4,\n              }}\n            >\n              {description}\n            </Text>\n          )}\n          {link && (\n            <div className={styles.link}>\n              <A href={link} rel=\"noreferrer\" target={openExternal ? '_blank' : undefined}>\n                Read More\n              </A>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n\nItem.displayName = 'FeatureItem';\n\nexport default Item;\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,QAAQ,MACX,EAAE,OAAO,WAAW,OAAO,YAAY;AACtC,QAAO,MAAM,WAAW,OAAO,GAC7B,oBAACA;EAAI,KAAK;EAAkB;EAAW,KAAK;EAAc;GAAS,GAEnE,oBAACC;EAAkB;EAAkB;YAClC;GACM;EAGd;AAED,MAAM,OAAO,MACV,EACC,OACA,WACA,KACA,QACA,aACA,OACA,OACA,MACA,MACA,YACA,cACA,GAAG,WACC;CACJ,MAAM,YAAY,OAAO;CACzB,MAAM,UAAU,QAAQ,KAAK;CAE7B,MAAM,eAAe,eACZ;EACL,sBAAsB,OAAO,UAAU;EACvC,+BAA+B,UAAU,SAAS;EACnD,GACD,CAAC,WAAW,QAAQ,CACrB;AAED,QACE,oBAAC;EACC,WAAW,GAAG,UAAU,OAAO,mBAAmB,OAAO,WAAW,UAAU;EAC9E,OAAO;GACL,GAAG;GACH,YAAY,QAAQ,UAAU;GAC9B,SAAS,QAAQ;GACjB,GAAG;GACJ;EACD,GAAI;YAEJ,qBAAC;GAAI,WAAW,OAAO;;IACpB,SACE,QACC,qBAACA;KAAO,WAAW,OAAO;KAAc,OAAO;gBAC5C,QAAQ,oBAACC;MAAK,WAAW,OAAO;MAAW;OAAQ,EACnD,SAAS,oBAAC;MAAM,WAAW,OAAO;MAAY;MAAc;OAAS;MAC/D;IAEZ,SACC,oBAACC;KAAQ,OAAO;KAAU,IAAI;KAAM,WAAW,OAAO;KAAO,KAAK;KAAG;eAClE;MACO;IAEX,eACC,oBAACC;KACC,WAAW,OAAO;KAClB,UAAU,EACR,MAAM,GACP;eAEA;MACI;IAER,QACC,oBAAC;KAAI,WAAW,OAAO;eACrB,oBAACC;MAAE,MAAM;MAAM,KAAI;MAAa,QAAQ,eAAe,WAAW;gBAAW;OAEzE;MACA;;IAEJ;GACF;EAGX;AAED,KAAK,cAAc;AAEnB,0BAAe"}