@anker-in/headless-ui 1.0.20-alpha.1761136676064 → 1.0.20-alpha.1761213958385
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/Graphic/index.js +1 -1
- package/dist/cjs/biz-components/Graphic/index.js.map +2 -2
- package/dist/cjs/biz-components/GraphicMore/index.js +1 -1
- package/dist/cjs/biz-components/GraphicMore/index.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/icons/Menu.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/icons/Menu.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/index.js.map +2 -2
- package/dist/cjs/biz-components/NavigationSearch/index.js +1 -1
- package/dist/cjs/biz-components/NavigationSearch/index.js.map +2 -2
- package/dist/cjs/biz-components/SelectStore/index.js +1 -1
- package/dist/cjs/biz-components/SelectStore/index.js.map +2 -2
- package/dist/esm/biz-components/Graphic/index.js +1 -1
- package/dist/esm/biz-components/Graphic/index.js.map +2 -2
- package/dist/esm/biz-components/GraphicMore/index.js +1 -1
- package/dist/esm/biz-components/GraphicMore/index.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/icons/Menu.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/icons/Menu.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/index.js.map +2 -2
- package/dist/esm/biz-components/NavigationSearch/index.js +1 -1
- package/dist/esm/biz-components/NavigationSearch/index.js.map +2 -2
- package/dist/esm/biz-components/SelectStore/index.js +1 -1
- package/dist/esm/biz-components/SelectStore/index.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/NavigationSearch/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Picture, Text, Button, Container, Link, Heading, Grid, GridItem } from '../../components/index.js'\nimport { Search as SearchIcon, Close as CloseIcon } from '../HeaderNavigation/icons/index.js'\nimport { forwardRef, useCallback, useMemo, useState } from 'react'\nimport type { NavigationSearchProps } from './types.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nimport { SearchStatus } from './types.js'\n\nimport { debounce } from 'es-toolkit'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\n\nexport const canSearch = (target: any) => {\n return !(\n target.metafields?.global?.HideSearch ||\n target.metafields?.seo?.hidden ||\n target.metafields?.seo?.setting?.noindex\n )\n}\n\nconst NavigationSearch = forwardRef<HTMLDivElement, NavigationSearchProps>(\n ({ data, onSearch, onClose, searchResult, isSearching, keywords }, ref) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n const [searchValue, setSearchValue] = useState('')\n const [isComposing, setIsComposing] = useState(false)\n\n const debouncedFunction = debounce((value: string) => {\n onSearch(value)\n }, 300)\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter' && !isComposing) {\n onSearch(searchValue)\n }\n },\n [isComposing, searchValue, onSearch]\n )\n\n const searchKeywords = useMemo(() => {\n if (Array.isArray(keywords) && keywords?.length) {\n return keywords.map((keyword: any) => keyword.search_term)\n }\n if (Array.isArray(data?.popularWords) && data?.popularWords?.length) {\n return data?.popularWords.map((word: any) => word.popularWord)\n }\n return []\n }, [keywords, data?.popularWords])\n\n const getLink = useCallback(\n (item: any) => {\n switch (item.type) {\n case 'Product':\n return `/products${item.path}?q=${searchValue.toLowerCase()}`\n case 'Article':\n return `/blogs/${item.blog.handle}/${item.handle.replace('storefront-', '')}?q=${searchValue.toLowerCase()}`\n default:\n break\n }\n },\n [searchValue]\n )\n\n const searchStatus = useMemo(() => {\n if (!searchValue) {\n // \u6CA1\u6709\u641C\u7D22\u503C\n return SearchStatus.Default\n } else if (searchResult?.totalCount) {\n // \u6709\u641C\u7D22\u7ED3\u679C\n return SearchStatus.Predict\n } else if (!isSearching) {\n // \u6CA1\u6709\u641C\u7D22\u7ED3\u679C\n return SearchStatus.Empty\n }\n }, [searchResult?.totalCount, searchValue])\n\n return (\n <Container childClassName=\"!bg-white\" className=\"relative\" ref={ref}>\n <div className=\"laptop:h-[52px] desktop:h-[60px] flex items-center pt-4 desktop:pt-6 pb-4 justify-between border-b border-b-gray-200\">\n <input\n value={searchValue}\n onCompositionStart={() => setIsComposing(true)}\n onCompositionEnd={() => setIsComposing(false)}\n onKeyDown={handleKeyDown}\n onChange={e => {\n setSearchValue(e.target.value)\n if (e.target.value) {\n debouncedFunction(e.target.value)\n }\n }}\n type=\"text\"\n className=\"text-sm basis-[200px] focus-visible:!outline-none outline-none leading-[1.4] font-bold\"\n placeholder={data?.placeholder}\n />\n <div className=\"flex items-center gap-3\">\n <SearchIcon className=\"size-5 cursor-pointer\" onClick={() => onSearch(searchValue)} />\n <div className=\"w-[1px] h-[20px] bg-[#E4E5E6]\" />\n <CloseIcon className=\"size-5 cursor-pointer\" onClick={onClose} />\n </div>\n </div>\n\n <div className=\"flex flex-col gap-6 desktop:gap-12 desktop:py-6 py-4\">\n {searchStatus === SearchStatus.Predict ? (\n <>\n <div>\n <div className=\"flex items-center gap-2\">\n <Text html={data?.suggestText} className=\"text-sm text-[#6D6D6F] leading-[1.4] font-bold\" />\n {searchResult?.items?.length > 6 && (\n <Button\n as=\"a\"\n href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${searchValue.toLowerCase()}`}\n className=\"!text-sm leading-[1.2] font-bold !p-0\"\n variant=\"link\"\n >\n {data?.moreText}\n </Button>\n )}\n </div>\n <div className=\"flex flex-col mt-2\">\n {searchResult?.items\n ?.filter((item: any) => canSearch(item))\n .slice(0, 6)\n ?.map((item: any) => (\n <Link\n className=\"hover:bg-[#F5F5F7] hover:text-current no-underline w-full p-4\"\n href={getLink(item)}\n key={item.id}\n >\n <Text\n html={highlightSearchWord(item.title, searchValue)}\n className=\"text-sm cursor-pointer leading-[1.4] font-bold\"\n />\n </Link>\n ))}\n </div>\n </div>\n <div>\n <Text html={data?.hotProductsText} className=\"text-sm text-[#6D6D6F] leading-[1.4] font-bold\" />\n <div className=\"grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 gap-2 mt-2 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4\">\n <Link asChild={!data?.advertisingLink} href={data?.advertisingLink}>\n <div className=\"relative\">\n <Picture\n source={data?.advertisingBgImg?.url}\n className=\"h-[114px] laptop:h-[120px]\"\n imgClassName=\"object-cover h-full\"\n />\n <div className=\"absolute bottom-0 left-0 right-0 p-4\">\n <Heading\n size={2}\n html={data?.advertisingTitle || 'Buy in Guide'}\n className={cn('font-bold text-white', {\n 'text-black': data?.advertisingTheme === 'dark',\n })}\n />\n <Text\n html={data?.advertisingSubtitle || '20.000mAh'}\n className={cn('text-sm text-white font-bold', {\n 'text-black': data?.advertisingTheme === 'dark',\n })}\n />\n </div>\n </div>\n </Link>\n {searchResult?.items\n ?.filter((item: any) => item.type.toLowerCase() === 'product')\n .slice(0, 7)\n ?.map((item: any) => {\n const variant = item?.variants?.[0]\n const productImage = `${variant?.image?.url || item?.images?.[0]?.url}`\n const productName = item?.title || item?.name\n const productDesc = item?.description\n const productBadge = item?.badge || ''\n const listingLink = `/products/${item?.handle}?variant=${atobID(variant?.id as string)}`\n return (\n <SearchProduct\n productImage={productImage}\n productName={productName}\n productDesc={productDesc}\n productBadge={productBadge}\n listingLink={listingLink}\n key={item.id}\n />\n )\n })}\n </div>\n </div>\n </>\n ) : (\n <>\n {searchStatus === SearchStatus.Empty && (\n <Text\n html={data?.noResultText}\n as=\"p\"\n className=\"text-sm pb-6 border-[#E4E5E6] border-b text-[#6D6D6F] leading-[1.4] font-bold\"\n />\n )}\n <div>\n <Text html={data?.popularText} className=\"text-sm text-[#6D6D6F] leading-[1.4] font-bold\" />\n <div className=\"mt-2\">\n <SearchKeyword data={data} keywords={searchKeywords} locale={locale} />\n {Array.isArray(data?.popularPages) && !!data?.popularPages?.length && (\n <Grid className=\"gap-3 laptop:gap-4 mt-3 laptop:mt-4\">\n {data?.popularPages?.map((item: any) => (\n <GridItem\n key={item?.id}\n className=\"col-span-12 tablet:col-span-6 p-2 hover:bg-[#F5F5F7] laptop:p-3 desktop:p-4 laptop:col-span-3\"\n >\n <a\n href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${item?.popularPage.toLowerCase()}`}\n className=\"text-sm cursor-pointer line-clamp-1 leading-[1.4] font-bold\"\n >\n {item?.popularPage}\n </a>\n </GridItem>\n ))}\n </Grid>\n )}\n </div>\n </div>\n <div>\n <Text html={data?.hotProductsText} className=\"text-sm text-[#6D6D6F] leading-[1.4] font-bold\" />\n <div className=\"grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 gap-2 mt-2 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4\">\n <Link asChild={!data?.advertisingLink} href={data?.advertisingLink}>\n <div className=\"relative [&_img]:hover:scale-105 [&_img]:hover:transition-all [&_img]:hover:duration-300\">\n <Picture\n source={data?.advertisingBgImg?.url}\n className=\"h-[114px] laptop:h-[120px]\"\n imgClassName=\"object-cover h-full\"\n />\n <div className=\"absolute bottom-0 left-0 right-0 p-4\">\n <Heading\n size={2}\n html={data?.advertisingTitle || 'Buy in Guide'}\n className=\"font-bold text-white\"\n />\n <Text\n html={data?.advertisingSubtitle || '20.000mAh'}\n className=\"text-sm text-white font-bold\"\n />\n </div>\n </div>\n </Link>\n {data?.hotProducts?.slice(0, 7)?.map((item: any) => {\n const productDesc = item?.custom_description\n const productBadge = item?.badge || ''\n const listingLink = `/products/${item?.handle}?variant=${atobID(item?.shopify_id as string)}`\n return (\n <SearchProduct\n productImage={item?.image}\n productName={item?.name}\n productDesc={productDesc}\n productBadge={productBadge}\n listingLink={listingLink}\n key={item.id}\n />\n )\n })}\n </div>\n </div>\n </>\n )}\n </div>\n </Container>\n )\n }\n)\n\nconst SearchProduct = ({\n productImage,\n productName,\n productDesc,\n productBadge,\n className,\n listingLink,\n}: {\n productImage: string\n productName: string\n productDesc: string\n productBadge: string\n className?: string\n listingLink: string\n}) => {\n return (\n <div className={cn('flex shrink-0 gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-105', className)}>\n <div className=\"shrink-0\">\n <Picture\n source={productImage}\n width={90}\n height={90}\n className=\"size-[96px]\"\n imgClassName=\"object-contain h-full\"\n />\n </div>\n <div className=\"relative\">\n <div className=\" h-[24px] \">\n {productBadge && (\n <Text\n as=\"p\"\n html={productBadge}\n className=\"text-brand-0 mb-1 inline-block rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold h-full !leading-[24px]\"\n />\n )}\n </div>\n <div>\n <Link href={listingLink} className=\"no-underline hover:text-current\">\n <Text\n className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n html={productName}\n />\n </Link>\n {productDesc && (\n <Text\n as=\"p\"\n html={productDesc}\n className=\"lg-desktop:text-sm line-clamp-1 mt-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst SearchKeyword = ({ data, keywords, locale }: { data: any; keywords: any[]; locale: string }) => {\n return (\n <div className=\"flex flex-wrap gap-3 laptop:gap-4\">\n {keywords?.map((keyword: any, index) => (\n <a\n href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${keyword?.toLowerCase()}`}\n key={index}\n className=\"text-sm cursor-pointer hover:bg-[#F5F5F7] p-2 laptop:p-3 desktop:p-4 leading-[1.4] font-bold\"\n >\n {keyword}\n </a>\n ))}\n </div>\n )\n}\n\nexport default NavigationSearch\n"],
|
|
5
|
-
"mappings": "AA+EU,OAwBE,YAAAA,EAxBF,OAAAC,EAeA,QAAAC,MAfA,oBA/EV,OAAS,WAAAC,EAAS,QAAAC,EAAM,UAAAC,EAAQ,aAAAC,EAAW,QAAAC,EAAM,WAAAC,EAAS,QAAAC,EAAM,YAAAC,MAAgB,4BAChF,OAAS,UAAUC,EAAY,SAASC,MAAiB,qCACzD,OAAS,cAAAC,EAAY,eAAAC,EAAa,WAAAC,EAAS,YAAAC,MAAgB,QAE3D,OAAS,kBAAAC,MAAsB,2BAE/B,OAAS,gBAAAC,MAAoB,aAE7B,OAAS,YAAAC,MAAgB,aACzB,OAAS,MAAAC,EAAI,UAAAC,EAAQ,uBAAAC,MAA2B,yBAEzC,MAAMC,EAAaC,GACjB,EACLA,EAAO,YAAY,QAAQ,YAC3BA,EAAO,YAAY,KAAK,QACxBA,EAAO,YAAY,KAAK,SAAS,SAI/BC,EAAmBZ,EACvB,CAAC,CAAE,KAAAa,EAAM,SAAAC,EAAU,QAAAC,EAAS,aAAAC,EAAc,YAAAC,EAAa,SAAAC,CAAS,EAAGC,IAAQ,CACzE,KAAM,CAAE,OAAAC,EAAS,KAAM,YAAAC,CAAY,EAAIjB,EAAe,EAEhD,CAACkB,EAAaC,CAAc,EAAIpB,EAAS,EAAE,EAC3C,CAACqB,EAAaC,CAAc,EAAItB,EAAS,EAAK,EAE9CuB,EAAoBpB,EAAUqB,GAAkB,CACpDb,EAASa,CAAK,CAChB,EAAG,GAAG,EAEAC,EAAgB3B,EACnB,GAA6C,CACxC,EAAE,MAAQ,SAAW,CAACuB,GACxBV,EAASQ,CAAW,CAExB,EACA,CAACE,EAAaF,EAAaR,CAAQ,CACrC,EAEMe,EAAiB3B,EAAQ,IACzB,MAAM,QAAQgB,CAAQ,GAAKA,GAAU,OAChCA,EAAS,IAAKY,GAAiBA,EAAQ,WAAW,EAEvD,MAAM,QAAQjB,GAAM,YAAY,GAAKA,GAAM,cAAc,OACpDA,GAAM,aAAa,IAAKkB,GAAcA,EAAK,WAAW,EAExD,CAAC,EACP,CAACb,EAAUL,GAAM,YAAY,CAAC,EAE3BmB,EAAU/B,EACbgC,GAAc,CACb,OAAQA,EAAK,KAAM,CACjB,IAAK,UACH,MAAO,YAAYA,EAAK,IAAI,MAAMX,EAAY,YAAY,CAAC,GAC7D,IAAK,UACH,MAAO,UAAUW,EAAK,KAAK,MAAM,IAAIA,EAAK,OAAO,QAAQ,cAAe,EAAE,CAAC,MAAMX,EAAY,YAAY,CAAC,GAC5G,QACE,KACJ,CACF,EACA,CAACA,CAAW,CACd,EAEMY,EAAehC,EAAQ,IAAM,CACjC,GAAKoB,EAGE,IAAIN,GAAc,WAEvB,OAAOX,EAAa,QACf,GAAI,CAACY,EAEV,OAAOZ,EAAa,UANpB,QAAOA,EAAa,OAQxB,EAAG,CAACW,GAAc,WAAYM,CAAW,CAAC,EAE1C,OACEjC,EAACI,EAAA,CAAU,eAAe,YAAY,UAAU,WAAW,IAAK0B,EAC9D,UAAA9B,EAAC,OAAI,UAAU,
|
|
4
|
+
"sourcesContent": ["import { Picture, Text, Button, Container, Link, Heading, Grid, GridItem } from '../../components/index.js'\nimport { Search as SearchIcon, Close as CloseIcon } from '../HeaderNavigation/icons/index.js'\nimport { forwardRef, useCallback, useMemo, useState } from 'react'\nimport type { NavigationSearchProps } from './types.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nimport { SearchStatus } from './types.js'\n\nimport { debounce } from 'es-toolkit'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\n\nexport const canSearch = (target: any) => {\n return !(\n target.metafields?.global?.HideSearch ||\n target.metafields?.seo?.hidden ||\n target.metafields?.seo?.setting?.noindex\n )\n}\n\nconst NavigationSearch = forwardRef<HTMLDivElement, NavigationSearchProps>(\n ({ data, onSearch, onClose, searchResult, isSearching, keywords }, ref) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n const [searchValue, setSearchValue] = useState('')\n const [isComposing, setIsComposing] = useState(false)\n\n const debouncedFunction = debounce((value: string) => {\n onSearch(value)\n }, 300)\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter' && !isComposing) {\n onSearch(searchValue)\n }\n },\n [isComposing, searchValue, onSearch]\n )\n\n const searchKeywords = useMemo(() => {\n if (Array.isArray(keywords) && keywords?.length) {\n return keywords.map((keyword: any) => keyword.search_term)\n }\n if (Array.isArray(data?.popularWords) && data?.popularWords?.length) {\n return data?.popularWords.map((word: any) => word.popularWord)\n }\n return []\n }, [keywords, data?.popularWords])\n\n const getLink = useCallback(\n (item: any) => {\n switch (item.type) {\n case 'Product':\n return `/products${item.path}?q=${searchValue.toLowerCase()}`\n case 'Article':\n return `/blogs/${item.blog.handle}/${item.handle.replace('storefront-', '')}?q=${searchValue.toLowerCase()}`\n default:\n break\n }\n },\n [searchValue]\n )\n\n const searchStatus = useMemo(() => {\n if (!searchValue) {\n // \u6CA1\u6709\u641C\u7D22\u503C\n return SearchStatus.Default\n } else if (searchResult?.totalCount) {\n // \u6709\u641C\u7D22\u7ED3\u679C\n return SearchStatus.Predict\n } else if (!isSearching) {\n // \u6CA1\u6709\u641C\u7D22\u7ED3\u679C\n return SearchStatus.Empty\n }\n }, [searchResult?.totalCount, searchValue])\n\n return (\n <Container childClassName=\"!bg-white\" className=\"relative\" ref={ref}>\n <div className=\"laptop:h-[52px] text-black desktop:h-[60px] flex items-center pt-4 desktop:pt-6 pb-4 justify-between border-b border-b-gray-200\">\n <input\n value={searchValue}\n onCompositionStart={() => setIsComposing(true)}\n onCompositionEnd={() => setIsComposing(false)}\n onKeyDown={handleKeyDown}\n onChange={e => {\n setSearchValue(e.target.value)\n if (e.target.value) {\n debouncedFunction(e.target.value)\n }\n }}\n type=\"text\"\n className=\"text-sm basis-[200px] focus-visible:!outline-none outline-none leading-[1.4] font-bold\"\n placeholder={data?.placeholder}\n />\n <div className=\"flex items-center gap-3\">\n <SearchIcon className=\"size-5 cursor-pointer\" onClick={() => onSearch(searchValue)} />\n <div className=\"w-[1px] h-[20px] bg-[#E4E5E6]\" />\n <CloseIcon className=\"size-5 cursor-pointer\" onClick={onClose} />\n </div>\n </div>\n\n <div className=\"flex flex-col gap-6 desktop:gap-12 text-black desktop:py-6 py-4\">\n {searchStatus === SearchStatus.Predict ? (\n <>\n <div>\n <div className=\"flex items-center gap-2\">\n <Text html={data?.suggestText} className=\"text-sm text-[#6D6D6F] leading-[1.4] font-bold\" />\n {searchResult?.items?.length > 6 && (\n <Button\n as=\"a\"\n href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${searchValue.toLowerCase()}`}\n className=\"!text-sm leading-[1.2] font-bold !p-0\"\n variant=\"link\"\n >\n {data?.moreText}\n </Button>\n )}\n </div>\n <div className=\"flex flex-col mt-2\">\n {searchResult?.items\n ?.filter((item: any) => canSearch(item))\n .slice(0, 6)\n ?.map((item: any) => (\n <Link\n className=\"hover:bg-[#F5F5F7] hover:text-current no-underline w-full p-4\"\n href={getLink(item)}\n key={item.id}\n >\n <Text\n html={highlightSearchWord(item.title, searchValue)}\n className=\"text-sm cursor-pointer leading-[1.4] font-bold\"\n />\n </Link>\n ))}\n </div>\n </div>\n <div>\n <Text html={data?.hotProductsText} className=\"text-sm text-[#6D6D6F] leading-[1.4] font-bold\" />\n <div className=\"grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 gap-2 mt-2 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4\">\n <Link asChild={!data?.advertisingLink} href={data?.advertisingLink}>\n <div className=\"relative\">\n <Picture\n source={data?.advertisingBgImg?.url}\n className=\"h-[114px] laptop:h-[120px]\"\n imgClassName=\"object-cover h-full\"\n />\n <div className=\"absolute bottom-0 left-0 right-0 p-4\">\n <Heading\n size={2}\n html={data?.advertisingTitle || 'Buy in Guide'}\n className={cn('font-bold text-white', {\n 'text-black': data?.advertisingTheme === 'dark',\n })}\n />\n <Text\n html={data?.advertisingSubtitle || '20.000mAh'}\n className={cn('text-sm text-white font-bold', {\n 'text-black': data?.advertisingTheme === 'dark',\n })}\n />\n </div>\n </div>\n </Link>\n {searchResult?.items\n ?.filter((item: any) => item.type.toLowerCase() === 'product')\n .slice(0, 7)\n ?.map((item: any) => {\n const variant = item?.variants?.[0]\n const productImage = `${variant?.image?.url || item?.images?.[0]?.url}`\n const productName = item?.title || item?.name\n const productDesc = item?.description\n const productBadge = item?.badge || ''\n const listingLink = `/products/${item?.handle}?variant=${atobID(variant?.id as string)}`\n return (\n <SearchProduct\n productImage={productImage}\n productName={productName}\n productDesc={productDesc}\n productBadge={productBadge}\n listingLink={listingLink}\n key={item.id}\n />\n )\n })}\n </div>\n </div>\n </>\n ) : (\n <>\n {searchStatus === SearchStatus.Empty && (\n <Text\n html={data?.noResultText}\n as=\"p\"\n className=\"text-sm pb-6 border-[#E4E5E6] border-b text-[#6D6D6F] leading-[1.4] font-bold\"\n />\n )}\n <div>\n <Text html={data?.popularText} className=\"text-sm text-[#6D6D6F] leading-[1.4] font-bold\" />\n <div className=\"mt-2\">\n <SearchKeyword data={data} keywords={searchKeywords} locale={locale} />\n {Array.isArray(data?.popularPages) && !!data?.popularPages?.length && (\n <Grid className=\"gap-3 laptop:gap-4 mt-3 laptop:mt-4\">\n {data?.popularPages?.map((item: any) => (\n <GridItem\n key={item?.id}\n className=\"col-span-12 tablet:col-span-6 p-2 hover:bg-[#F5F5F7] laptop:p-3 desktop:p-4 laptop:col-span-3\"\n >\n <a\n href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${item?.popularPage.toLowerCase()}`}\n className=\"text-sm cursor-pointer line-clamp-1 leading-[1.4] font-bold\"\n >\n {item?.popularPage}\n </a>\n </GridItem>\n ))}\n </Grid>\n )}\n </div>\n </div>\n <div>\n <Text html={data?.hotProductsText} className=\"text-sm text-[#6D6D6F] leading-[1.4] font-bold\" />\n <div className=\"grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 gap-2 mt-2 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4\">\n <Link asChild={!data?.advertisingLink} href={data?.advertisingLink}>\n <div className=\"relative [&_img]:hover:scale-105 [&_img]:hover:transition-all [&_img]:hover:duration-300\">\n <Picture\n source={data?.advertisingBgImg?.url}\n className=\"h-[114px] laptop:h-[120px]\"\n imgClassName=\"object-cover h-full\"\n />\n <div className=\"absolute bottom-0 left-0 right-0 p-4\">\n <Heading\n size={2}\n html={data?.advertisingTitle || 'Buy in Guide'}\n className=\"font-bold text-white\"\n />\n <Text\n html={data?.advertisingSubtitle || '20.000mAh'}\n className=\"text-sm text-white font-bold\"\n />\n </div>\n </div>\n </Link>\n {data?.hotProducts?.slice(0, 7)?.map((item: any) => {\n const productDesc = item?.custom_description\n const productBadge = item?.badge || ''\n const listingLink = `/products/${item?.handle}?variant=${atobID(item?.shopify_id as string)}`\n return (\n <SearchProduct\n productImage={item?.image}\n productName={item?.name}\n productDesc={productDesc}\n productBadge={productBadge}\n listingLink={listingLink}\n key={item.id}\n />\n )\n })}\n </div>\n </div>\n </>\n )}\n </div>\n </Container>\n )\n }\n)\n\nconst SearchProduct = ({\n productImage,\n productName,\n productDesc,\n productBadge,\n className,\n listingLink,\n}: {\n productImage: string\n productName: string\n productDesc: string\n productBadge: string\n className?: string\n listingLink: string\n}) => {\n return (\n <div className={cn('flex shrink-0 gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-105', className)}>\n <div className=\"shrink-0\">\n <Picture\n source={productImage}\n width={90}\n height={90}\n className=\"size-[96px]\"\n imgClassName=\"object-contain h-full\"\n />\n </div>\n <div className=\"relative\">\n <div className=\" h-[24px] \">\n {productBadge && (\n <Text\n as=\"p\"\n html={productBadge}\n className=\"text-brand-0 mb-1 inline-block rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold h-full !leading-[24px]\"\n />\n )}\n </div>\n <div>\n <Link href={listingLink} className=\"no-underline hover:text-current\">\n <Text\n className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n html={productName}\n />\n </Link>\n {productDesc && (\n <Text\n as=\"p\"\n html={productDesc}\n className=\"lg-desktop:text-sm line-clamp-1 mt-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst SearchKeyword = ({ data, keywords, locale }: { data: any; keywords: any[]; locale: string }) => {\n return (\n <div className=\"flex flex-wrap gap-3 laptop:gap-4\">\n {keywords?.map((keyword: any, index) => (\n <a\n href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${keyword?.toLowerCase()}`}\n key={index}\n className=\"text-sm cursor-pointer hover:bg-[#F5F5F7] p-2 laptop:p-3 desktop:p-4 leading-[1.4] font-bold\"\n >\n {keyword}\n </a>\n ))}\n </div>\n )\n}\n\nexport default NavigationSearch\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "Picture", "Text", "Button", "Container", "Link", "Heading", "Grid", "GridItem", "SearchIcon", "CloseIcon", "forwardRef", "useCallback", "useMemo", "useState", "useAiuiContext", "SearchStatus", "debounce", "cn", "atobID", "highlightSearchWord", "canSearch", "target", "NavigationSearch", "data", "onSearch", "onClose", "searchResult", "isSearching", "keywords", "ref", "locale", "copyWriting", "searchValue", "setSearchValue", "isComposing", "setIsComposing", "debouncedFunction", "value", "handleKeyDown", "searchKeywords", "keyword", "word", "getLink", "item", "searchStatus", "variant", "productImage", "productName", "productDesc", "productBadge", "listingLink", "SearchProduct", "SearchKeyword", "className", "index", "NavigationSearch_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as c,jsx as e,jsxs as
|
|
1
|
+
"use client";import{Fragment as c,jsx as e,jsxs as p}from"react/jsx-runtime";import"../../helpers/utils.js";import"../SwiperBox/index.js";import{withLayout as d}from"../../shared/Styles.js";import{Picture as i,Text as l}from"../../components/index.js";const r=o=>{const{data:s,className:g}=o,{list:a}=s;return e(c,{children:e("div",{className:"",children:e("div",{className:"grid desktop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4",children:a.map((t,m)=>p("div",{className:" relative rounded-2xl lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] aspect-[358/240] overflow-hidden",children:[e(i,{className:"w-full",imgClassName:"",source:`${t?.img?.url}, ${t?.padImg?.url} 1439, ${t?.miniImg?.url} 1023, ${t?.mobileImg?.url} 767`}),p("div",{className:"absolute laptop:bottom-[24px] lg-desktop:bottom-[32px] bottom-[16px] left-0 laptop:p-[24px] lg-desktop:p-[32px] p-[16px]",children:[e(l,{html:t?.title,className:"text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#1d1d1f]"}),e(l,{html:t?.desc,className:"text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#1d1d1f]"})]})]},m))})})})};var v=d(r);export{v as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/SelectStore/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type SelectStoreDataType = {\n title: string\n desc: string\n img: Img\n mobileImg: Img\n padImg: Img\n miniImg: Img\n // pay: {\n // img: Img\n // }[]\n // delivery: {\n // img: Img\n // }[]\n // service: {\n // title: string\n // img: Img\n // }[]\n}\n\ntype SelectStoreType = {\n data: {\n list: SelectStoreDataType[]\n }\n className?: string\n}\n\nconst SelectStore = (props: SelectStoreType) => {\n const { data, className } = props\n const { list } = data\n // const number = list?.[2]?.service?.length || 0\n return (\n <>\n <div className=''>\n <div className='grid desktop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4'>\n {list.map((item, index) => (\n <div key={index} className=' relative rounded-2xl lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] aspect-[358/240] overflow-hidden'>\n <Picture\n className=\"w-full\"\n imgClassName=\"\"\n source={`${item?.img?.url}, ${item?.padImg?.url} 1439, ${item?.miniImg?.url} 1023, ${item?.mobileImg?.url} 767`}\n />\n <div className='absolute bottom-
|
|
5
|
-
"mappings": "aAsCI,mBAAAA,EAKgB,OAAAC,EAKJ,QAAAC,MAVZ,oBArCJ,MAAmB,yBACnB,MAAsB,wBAEtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BA4B9B,MAAMC,EAAeC,GAA2B,CAC9C,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,KAAAG,CAAK,EAAIF,EAEjB,OACEP,EAAAD,EAAA,CACE,SAAAC,EAAC,OAAI,UAAU,GACb,SAAAA,EAAC,OAAI,UAAU,gEACZ,SAAAS,EAAK,IAAI,CAACC,EAAMC,IACfV,EAAC,OAAgB,UAAU,qIACnB,UAAAD,EAACG,EAAA,CACC,UAAU,SACV,aAAa,GACb,OAAQ,GAAGO,GAAM,KAAK,GAAG,KAAKA,GAAM,QAAQ,GAAG,UAAUA,GAAM,SAAS,GAAG,UAAUA,GAAM,WAAW,GAAG,OAC3G,EACJT,EAAC,OAAI,UAAU,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type SelectStoreDataType = {\n title: string\n desc: string\n img: Img\n mobileImg: Img\n padImg: Img\n miniImg: Img\n // pay: {\n // img: Img\n // }[]\n // delivery: {\n // img: Img\n // }[]\n // service: {\n // title: string\n // img: Img\n // }[]\n}\n\ntype SelectStoreType = {\n data: {\n list: SelectStoreDataType[]\n }\n className?: string\n}\n\nconst SelectStore = (props: SelectStoreType) => {\n const { data, className } = props\n const { list } = data\n // const number = list?.[2]?.service?.length || 0\n return (\n <>\n <div className=''>\n <div className='grid desktop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4'>\n {list.map((item, index) => (\n <div key={index} className=' relative rounded-2xl lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] aspect-[358/240] overflow-hidden'>\n <Picture\n className=\"w-full\"\n imgClassName=\"\"\n source={`${item?.img?.url}, ${item?.padImg?.url} 1439, ${item?.miniImg?.url} 1023, ${item?.mobileImg?.url} 767`}\n />\n <div className='absolute laptop:bottom-[24px] lg-desktop:bottom-[32px] bottom-[16px] left-0 laptop:p-[24px] lg-desktop:p-[32px] p-[16px]'>\n <Text html={item?.title} className='text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#1d1d1f]'/>\n <Text html={item?.desc} className='text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#1d1d1f]'/>\n </div>\n </div>\n ))}\n </div>\n {/* <div className='grid desktop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4'>\n {list.map((item, index) => (\n <div key={index} className='bg-[#EAEAEC] rounded-2xl min-h-[240px] laptop:min-h-[280px] lg-desktop:min-h-[320px]'>\n <div className='flex flex-col laptop:p-[24px] lg-desktop:p-[32px] p-[16px] justify-start h-full'>\n <div className=\"flex flex-col justify-center flex-1\">\n \n {item?.pay && (\n <div className='flex gap-[16px] flex-wrap items-center justify-center laptop:gap-[24px]'>\n {item?.pay?.map((pay, ind)=>{\n return (\n <div key={ind} className='laptop:w-[60px] w-[48px]'>\n <Picture\n className=\" w-full\"\n imgClassName=\"\"\n source={pay?.img?.url}\n alt={pay?.img?.alt || ''}\n />\n </div>\n )\n })}\n </div>\n )}\n \n {\n item?.delivery && (\n <div className='flex gap-[24px] items-center justify-center'>\n {item?.delivery?.map((delivery, ind)=>{\n return (\n <div key={ind} className=''>\n <Picture\n className={` ${ind === 0 ? 'laptop:w-[174px] w-[116px]' : 'laptop:w-[75px] w-[50px]'}`}\n imgClassName=\"\"\n source={delivery?.img?.url}\n alt={delivery?.img?.alt || ''}\n />\n </div>\n )\n })}\n </div>\n ) \n }\n \n {\n item?.service && (\n <div className=' desktop:gap-[24px] gap-[8px] tablet:gap-[12px] laptop:gap-[28px] grid l-tablet:grid-cols-2 tablet:flex flex-wrap desktop:grid-cols-4 items-center justify-center'>\n {item?.service?.map((service, ind)=>{\n // \u5224\u65AD\uFF1A\u53EA\u5BF9\u7B2C\u4E94\u6761\uFF08index === 4\uFF09\u5E94\u7528\u54CD\u5E94\u5F0F\u663E\u793A/\u9690\u85CF\n const isFifth = ind === 4;\n return (\n <div key={ind} className={`\n flex flex-col items-center desktop:h-full w-[157px] justify-start desktop:w-[81px]\n ${isFifth ? 'laptop:flex desktop:hidden hidden' : ''} \n `}>\n <div className='w-[70px] desktop:w-[54px]'>\n <Picture\n className=\"\"\n imgClassName=\"w-full h-auto\"\n source={service?.img?.url}\n alt={service?.img?.alt || ''}\n />\n </div>\n <div className='text-center'>\n <Text html={service?.title} className=' font-bold text-[12px] mt-[8px] leading-[1.4]' />\n </div>\n </div>\n )\n })}\n </div>\n )\n }\n </div>\n <div className='mt-auto'>\n <Text html={item?.title} className='text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#1d1d1f]'/>\n <Text html={item?.desc} className='text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#1d1d1f]'/>\n </div>\n \n </div>\n </div>\n ))}\n </div> */}\n </div>\n </>\n )\n}\n\nexport default withLayout(SelectStore)\n"],
|
|
5
|
+
"mappings": "aAsCI,mBAAAA,EAKgB,OAAAC,EAKJ,QAAAC,MAVZ,oBArCJ,MAAmB,yBACnB,MAAsB,wBAEtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BA4B9B,MAAMC,EAAeC,GAA2B,CAC9C,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,KAAAG,CAAK,EAAIF,EAEjB,OACEP,EAAAD,EAAA,CACE,SAAAC,EAAC,OAAI,UAAU,GACb,SAAAA,EAAC,OAAI,UAAU,gEACZ,SAAAS,EAAK,IAAI,CAACC,EAAMC,IACfV,EAAC,OAAgB,UAAU,qIACnB,UAAAD,EAACG,EAAA,CACC,UAAU,SACV,aAAa,GACb,OAAQ,GAAGO,GAAM,KAAK,GAAG,KAAKA,GAAM,QAAQ,GAAG,UAAUA,GAAM,SAAS,GAAG,UAAUA,GAAM,WAAW,GAAG,OAC3G,EACJT,EAAC,OAAI,UAAU,2HACb,UAAAD,EAACI,EAAA,CAAK,KAAMM,GAAM,MAAO,UAAU,0FAAyF,EAC5HV,EAACI,EAAA,CAAK,KAAMM,GAAM,KAAM,UAAU,+EAA8E,GAClH,IATMC,CAUV,CACD,EACH,EAiFF,EACF,CAEJ,EAEA,IAAOC,EAAQV,EAAWG,CAAW",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "withLayout", "Picture", "Text", "SelectStore", "props", "data", "className", "list", "item", "index", "SelectStore_default"]
|
|
7
7
|
}
|