UNPKG

@lobehub/ui

Version:

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

1 lines • 4.2 kB
{"version":3,"file":"Hero.mjs","names":["Flexbox"],"sources":["../../../src/awesome/Hero/Hero.tsx"],"sourcesContent":["'use client';\n\nimport { GithubIcon } from '@lobehub/ui/icons';\nimport { useResponsive } from 'antd-style';\nimport { memo, useCallback } from 'react';\n\nimport A from '@/A';\nimport AuroraBackground from '@/awesome/AuroraBackground';\nimport GradientButton from '@/awesome/GradientButton';\nimport Button from '@/base-ui/Button';\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\nimport { type HeroProps } from './type';\n\nconst Hero = memo<HeroProps>(({ title, description, actions, Link }) => {\n const { mobile } = useResponsive();\n\n const LinkRender = Link || A;\n\n const ButtonGroups = useCallback(\n () =>\n Boolean(actions?.length) && (\n <Flexbox horizontal className={styles.actions} gap={16} justify={'center'}>\n {actions!.map(({ text, link, openExternal, github, type }, index) => {\n const content =\n type === 'primary' ? (\n <GradientButton\n block={mobile}\n icon={github ? <Icon icon={GithubIcon} size={18} /> : undefined}\n key={index}\n size=\"large\"\n >\n {text}\n </GradientButton>\n ) : (\n <Button\n block={mobile}\n icon={github ? <Icon icon={GithubIcon} size={18} /> : undefined}\n key={index}\n size=\"large\"\n type=\"primary\"\n >\n {text}\n </Button>\n );\n\n return openExternal ? (\n <A href={link} key={text} target={openExternal ? '_blank' : undefined}>\n {content}\n </A>\n ) : (\n <LinkRender key={text} to={link}>\n {content}\n </LinkRender>\n );\n })}\n </Flexbox>\n ),\n [actions],\n );\n\n return (\n <>\n <AuroraBackground />\n <Flexbox align={'center'} style={{ fontSize: 16, zIndex: 1 }}>\n <Flexbox horizontal className={styles.container} distribution={'center'}>\n <Center>\n {title && (\n <Center\n horizontal\n as={'h1'}\n className={styles.title}\n dangerouslySetInnerHTML={{ __html: title }}\n gap={'0.25em'}\n wrap={'wrap'}\n />\n )}\n {description && (\n <p className={styles.desc} dangerouslySetInnerHTML={{ __html: description }} />\n )}\n <ButtonGroups />\n </Center>\n </Flexbox>\n </Flexbox>\n </>\n );\n});\n\nHero.displayName = 'Hero';\n\nexport default Hero;\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAM,OAAO,MAAiB,EAAE,OAAO,aAAa,SAAS,WAAW;CACtE,MAAM,EAAE,WAAW,cAAc;CAEjC,MAAM,aAAa,QAAQ;CAE3B,MAAM,eAAe,kBAEjB,QAAQ,SAAS,MAAM,KACrB,oBAACA,mBAAD;EAAS,YAAA;EAAW,WAAW,OAAO;EAAS,KAAK;EAAI,SAAS;EAC9D,UAAA,QAAS,KAAK,EAAE,MAAM,MAAM,cAAc,QAAQ,QAAQ,UAAU;GACnE,MAAM,UACJ,SAAS,YACP,oBAAC,gBAAD;IACE,OAAO;IACP,MAAM,SAAS,oBAAC,MAAD;KAAM,MAAM;KAAY,MAAM;IAAK,CAAA,IAAI,KAAA;IAEtD,MAAK;IAEJ,UAAA;GACa,GAJT,KAIS,IAEhB,oBAAC,QAAD;IACE,OAAO;IACP,MAAM,SAAS,oBAAC,MAAD;KAAM,MAAM;KAAY,MAAM;IAAK,CAAA,IAAI,KAAA;IAEtD,MAAK;IACL,MAAK;IAEJ,UAAA;GACK,GALD,KAKC;GAGZ,OAAO,eACL,oBAAC,GAAD;IAAG,MAAM;IAAiB,QAAQ,eAAe,WAAW,KAAA;IACzD,UAAA;GACA,GAFiB,IAEjB,IAEH,oBAAC,YAAD;IAAuB,IAAI;IACxB,UAAA;GACS,GAFK,IAEL;EAEhB,CAAC;CACM,CAAA,GAEb,CAAC,OAAO,CACV;CAEA,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,kBAAD,CAAmB,CAAA,GACnB,oBAACA,mBAAD;EAAS,OAAO;EAAU,OAAO;GAAE,UAAU;GAAI,QAAQ;EAAE;EACzD,UAAA,oBAACA,mBAAD;GAAS,YAAA;GAAW,WAAW,OAAO;GAAW,cAAc;GAC7D,UAAA,qBAAC,QAAD,EAAA,UAAA;IACG,SACC,oBAAC,QAAD;KACE,YAAA;KACA,IAAI;KACJ,WAAW,OAAO;KAClB,yBAAyB,EAAE,QAAQ,MAAM;KACzC,KAAK;KACL,MAAM;IACP,CAAA;IAEF,eACC,oBAAC,KAAD;KAAG,WAAW,OAAO;KAAM,yBAAyB,EAAE,QAAQ,YAAY;IAAI,CAAA;IAEhF,oBAAC,cAAD,CAAe,CAAA;GACT,EAAA,CAAA;EACD,CAAA;CACF,CAAA,CACT,EAAA,CAAA;AAEN,CAAC;AAED,KAAK,cAAc"}