@ludo.ninja/components 2.3.6 → 2.3.8

package/build/components/search/SearchInputContainer.js

@@ -0,0 +1,237 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchInputContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+// import { useRouter } from "next/router";
+const lodash_debounce_1 = __importDefault(require("lodash.debounce"));
+const styled_components_1 = __importStar(require("styled-components"));
+const colors_1 = require("@ludo.ninja/ui/build/styles/colors");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const utils_1 = require("@ludo.ninja/utils");
+const useFetchFindAllTopEntitiesByName_1 = require("../../api/server-search/queries/useFetchFindAllTopEntitiesByName");
+const searchCloseMoreButtons_1 = __importDefault(require("./searchCloseMoreButtons"));
+const searchSuggestions_1 = __importDefault(require("./searchSuggestions"));
+const env_1 = require("../../store/env");
+const ui_1 = require("../../store/ui");
+const ScreenWidth_1 = require("../../styles/ScreenWidth");
+const screen_1 = require("../../utils/screen");
+const seacrhTabs_1 = require("../../utils/seacrhTabs");
+const back_svg_1 = __importDefault(require("../../public/search/back"));
+const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
+const enterKey = "Enter";
+const SearchInputContainer = ({ onFocusHandler, isClearOnBlur, initializeInputComponent, }) => {
+    const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
+    const inputSearch = (0, react_1.useRef)(null);
+    const [searchValue, setSearchValue] = (0, react_1.useState)("");
+    //fix cache apollo with debounce
+    const [debouncedValue, setDebouncedValue] = (0, react_1.useState)("");
+    const [isDebounceLoading, setIsDebounceLoading] = (0, react_1.useState)(false);
+    const [isSearchFocused, setSearchFocused] = (0, react_1.useState)(false);
+    const { openOverLay, closeOverlay } = (0, ui_1.useUiStore)((state) => ({
+        openOverLay: state.openOverLay,
+        closeOverlay: state.closeOverlay,
+    }));
+    const { isMobile } = (0, screen_1.useWindowDimensionsWithServerInitial)();
+    const { load, topEntities, loading, clearTopEntitiesState } = (0, useFetchFindAllTopEntitiesByName_1.useFetchFindAllTopEntitiesByName)();
+    // const router = useRouter();
+    (0, react_1.useEffect)(() => {
+        // const term = router.query?.term;
+        const term = new URLSearchParams(window.location.search).get("term");
+        if (term) {
+            setSearchValue(term);
+        }
+    }, []);
+    const updateDebouncedValue = (0, react_1.useCallback)((0, lodash_debounce_1.default)(setDebouncedValue, 200), []);
+    (0, react_1.useEffect)(() => {
+        if (searchValue.length) {
+            setIsDebounceLoading(true);
+        }
+        updateDebouncedValue(searchValue);
+    }, [searchValue]);
+    (0, react_1.useEffect)(() => {
+        if (debouncedValue.length) {
+            load({ name: debouncedValue, pageSize: 4 }).then(() => {
+                setIsDebounceLoading(false);
+            });
+        }
+    }, [debouncedValue]);
+    const [isMobileOpen, setIsMobileOpen] = (0, react_1.useState)(false);
+    const Container = isMobileOpen ? SMobileContainer : react_1.default.Fragment;
+    const SearchContainer = isMobileOpen
+        ? SMobileSearchContainer
+        : react_1.default.Fragment;
+    const searchSuggestion = ((0, jsx_runtime_1.jsx)(searchSuggestions_1.default, { isLoading: loading || isDebounceLoading, searchTerm: debouncedValue, assets: topEntities?.assets || [], profiles: topEntities?.profiles || [], collections: topEntities?.collections || [] }));
+    return ((0, jsx_runtime_1.jsxs)(Container, { children: [(0, jsx_runtime_1.jsxs)(SearchContainer, { children: [isMobileOpen && ((0, jsx_runtime_1.jsx)(back_svg_1.default, { onClick: () => {
+                            setIsMobileOpen(false);
+                            (0, utils_1.rootRemoveOverflow)();
+                            if (isClearOnBlur) {
+                                setSearchValue("");
+                                clearTopEntitiesState();
+                            }
+                        } })), initializeInputComponent({
+                        isMobileOpen,
+                        mobileOrDesktopPlaceHolder: isMobile
+                            ? "Search"
+                            : "Search for NFTs, collections, profiles, ENS and blockchain addresses",
+                        isSearchFocused,
+                        searchValue,
+                        inputRef: inputSearch,
+                        handle: {
+                            focus() {
+                                if (isMobileOpen) {
+                                    return;
+                                }
+                                if (isMobile) {
+                                    setIsMobileOpen(true);
+                                    (0, utils_1.rootAddOverflow)();
+                                    return;
+                                }
+                                openOverLay();
+                                setSearchFocused(true);
+                                onFocusHandler?.(true);
+                            },
+                            change(e) {
+                                setSearchValue(e.target.value);
+                            },
+                            blur() {
+                                if (isMobileOpen) {
+                                    return;
+                                }
+                                if (isMobile) {
+                                    (0, utils_1.rootRemoveOverflow)();
+                                    return;
+                                }
+                                setTimeout(() => {
+                                    inputSearch.current?.blur();
+                                    setSearchFocused(false);
+                                    onFocusHandler?.(false);
+                                    closeOverlay();
+                                    if (isClearOnBlur) {
+                                        setSearchValue("");
+                                        clearTopEntitiesState();
+                                    }
+                                }, 100);
+                            },
+                            async keyPress(e) {
+                                if (e.key === enterKey) {
+                                    const { value } = e.target;
+                                    const newSearchValue = value.length ? searchValue : "";
+                                    const searchDomain = ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["search"];
+                                    const currentPath = window.location.pathname;
+                                    if (searchDomain === window.origin &&
+                                        seacrhTabs_1.searchTabs.find((el) => currentPath.includes(el.link))) {
+                                        // await router.replace(
+                                        //   {
+                                        //     query: { ...router.query, term: newSearchValue },
+                                        //   },
+                                        //   undefined,
+                                        //   { shallow: true },
+                                        // );
+                                        const newUrl = new URL(window.location.href);
+                                        newUrl.searchParams.set("term", newSearchValue);
+                                        window.history.replaceState({}, "", newUrl.toString());
+                                        setSearchFocused(false);
+                                        onFocusHandler?.(false);
+                                        closeOverlay();
+                                    }
+                                    else {
+                                        window.open(`${searchDomain}/${seacrhTabs_1.searchTabs[0].link}${newSearchValue ? `?term=${newSearchValue}` : ""}`, "_self");
+                                        // await router.push({
+                                        //   pathname: searchTabs[0].link,
+                                        //   query: { term: newSearchValue },
+                                        // });
+                                        // setSearchFocused(false);
+                                        // onFocusHandler?.(false);
+                                        closeOverlay();
+                                    }
+                                }
+                            },
+                        },
+                        searchSuggestion: !isMobile && searchValue && ((0, jsx_runtime_1.jsx)("div", { className: "suggestionBar", children: searchSuggestion })),
+                        searchCloseButton: ((0, jsx_runtime_1.jsx)(searchCloseMoreButtons_1.default, { isNeedToShow: Boolean(searchValue.length), position: {
+                                top: "50%",
+                                right: "0",
+                                transform: "translate(-50%, -50%)",
+                            }, clearSearchValue: setSearchValue })),
+                    })] }), isMobileOpen && searchValue && ((0, jsx_runtime_1.jsx)(SSuggestions, { children: searchSuggestion }))] }));
+};
+exports.SearchInputContainer = SearchInputContainer;
+const show = (0, styled_components_1.keyframes) `
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+const SMobileContainer = styled_components_1.default.div `
+  position: fixed;
+  z-index: 100000;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: var(--app-height);
+  background-color: ${colors_1.WhiteColor};
+  padding: 17px 20px 0;
+  animation: ${show} 300ms forwards;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    padding: ${(0, _4k_1.adaptiveValueCalc)(17)} ${(0, _4k_1.adaptiveValueCalc)(20)} 0;
+  }
+`;
+const SMobileSearchContainer = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: 2px;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    gap: ${(0, _4k_1.adaptiveValueCalc)(2)};
+  }
+`;
+const SSuggestions = styled_components_1.default.div `
+  display: flex;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: calc(100% - 36px - 17px);
+  margin-left: -5px;
+  margin-right: -5px;
+  padding-left: 5px;
+  padding-right: 5px;
+  width: calc(100% + 10px);
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    height: calc(100% - ${(0, _4k_1.adaptiveValueCalc)(36)} - ${(0, _4k_1.adaptiveValueCalc)(17)});
+    margin-left: ${(0, _4k_1.adaptiveValueCalc)(-5)};
+    margin-right: ${(0, _4k_1.adaptiveValueCalc)(-5)};
+    padding-left: ${(0, _4k_1.adaptiveValueCalc)(5)};
+    padding-right: ${(0, _4k_1.adaptiveValueCalc)(5)};
+    width: calc(100% + ${(0, _4k_1.adaptiveValueCalc)(10)});
+  }
+`;

package/build/components/search/searchCloseMoreButtons/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface PositionProps {
+    top?: string;
+    left?: string;
+    right?: string;
+    bottom?: string;
+    transform?: string;
+}
+declare const SearchCloseMoreButtons: ({ isNeedToShow, position, clearSearchValue, }: {
+    isNeedToShow: boolean;
+    position: PositionProps;
+    clearSearchValue: React.Dispatch<React.SetStateAction<string>>;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SearchCloseMoreButtons;

package/build/components/search/searchCloseMoreButtons/index.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+// import { useRouter } from 'next/router';
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const scale_1 = require("../../../utils/adaptive/scale");
+const screen_1 = require("../../../utils/screen");
+const styled_components_1 = __importDefault(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const close_svg_1 = __importDefault(require("../../../public/search/close"));
+const StyledSearchCloseMoreButtons = styled_components_1.default.div `
+  position: absolute;
+  right: ${(props) => props.position.right};
+  top: ${(props) => props.position.top};
+  bottom: ${(props) => props.position.bottom};
+  left: ${(props) => props.position.left};
+  transform: ${(props) => props.position.transform};
+  display: flex;
+  height: 40px;
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    height: ${(0, _4k_1.adaptiveValueCalc)(40)};
+  }
+`;
+const StyledCloseIcon = styled_components_1.default.div `
+  cursor: pointer;
+  z-index: 1;
+  padding: 8px 6px;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    display: flex;
+    align-items: center;
+    padding: ${(0, _4k_1.adaptiveValueCalc)(8)} ${(0, _4k_1.adaptiveValueCalc)(6)};
+  }
+`;
+const SearchCloseIconResize = () => {
+    const { windowDimensions } = (0, screen_1.useWindowDimensionsWithServerInitial)();
+    return ((0, jsx_runtime_1.jsx)(close_svg_1.default, { style: (0, scale_1.getAdaptiveScale)({ windowDimensions, currentSize: 1 }) }));
+};
+// Components
+const SearchCloseMoreButtons = ({ isNeedToShow, position, clearSearchValue, }) => {
+    // const router = useRouter();
+    // const { term } = router.query;
+    return ((0, jsx_runtime_1.jsx)(StyledSearchCloseMoreButtons, { position: position, children: isNeedToShow ? ((0, jsx_runtime_1.jsx)(StyledCloseIcon, { onClick: () => {
+                const term = new URLSearchParams(window.location.search).get('term');
+                if (term) {
+                    // router
+                    //   .push({
+                    //     query: { ...router.query, term: [] },
+                    //   })
+                    //   .then(() => clearSearchValue(''));
+                    const params = new URLSearchParams(window.location.search);
+                    params.delete('term');
+                    const newUrl = `${window.location.pathname}?${params.toString()}`;
+                    window.history.pushState({}, '', newUrl);
+                    clearSearchValue('');
+                }
+                clearSearchValue('');
+            }, children: (0, jsx_runtime_1.jsx)(SearchCloseIconResize, {}) })) : null }));
+};
+// Export
+exports.default = SearchCloseMoreButtons;

package/build/components/search/searchSimpleInput/index.d.ts

@@ -0,0 +1,4 @@
+declare const SearchSimpleInput: ({ onFocusHandler, }: {
+    onFocusHandler: (arg: boolean) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SearchSimpleInput;

package/build/components/search/searchSimpleInput/index.js

@@ -0,0 +1,139 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importStar(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const SearchInputContainer_1 = require("../SearchInputContainer");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const typography_1 = require("../../../styles/typography");
+const scale_1 = require("../../../utils/adaptive/scale");
+const screen_1 = require("../../../utils/screen");
+const vars_1 = require("../../../fonts/vars");
+const search_svg_1 = __importDefault(require("../../../public/search/search"));
+// Styles
+const StyledSearchSimpleInput = styled_components_1.default.div `
+  position: relative;
+  width: 40%;
+
+  .suggestionBar {
+    position: absolute;
+    top: 40px;
+    left: 0;
+    right: 0;
+  }
+
+  ${ScreenWidth_1.mediaQuery.mobile} {
+    width: 188px;
+    ${(props) => props.isMobileOpen &&
+    (0, styled_components_1.css) `
+        width: 100%;
+      `}
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    .suggestionBar {
+      top: ${(0, _4k_1.adaptiveValueCalc)(40)};
+    }
+  }
+`;
+const StyledInput = styled_components_1.default.input `
+  position: relative;
+  width: 100%;
+  height: 40px;
+  outline: none;
+  border: none;
+  font-weight: 400;
+  font-size: 1.4em;
+  color: ${({ theme }) => theme.colors.primaryText};
+  background-color: ${({ theme }) => theme.colors.thirdBg};
+  padding-left: 48px;
+  padding-right: 48px;
+  box-sizing: border-box;
+  border-top-right-radius: 24px;
+  border-top-left-radius: 24px;
+  border-bottom-right-radius: ${(props) => (props.isActive ? 'none' : '24px')};
+  border-bottom-left-radius: ${(props) => (props.isActive ? 'none' : '24px')};
+  font-family: ${vars_1.dmsansFontVarCss.css};
+
+  ::placeholder {
+    color: ${({ theme }) => theme.colors.placeholderText};
+  }
+
+  ${ScreenWidth_1.mediaQuery.mobile} {
+    ${typography_1.FH6};
+    padding-left: 32px;
+    height: 36px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    height: ${(0, _4k_1.adaptiveValueCalc)(40)};
+    font-size: ${(0, _4k_1.adaptiveValueCalc)(14)};
+    padding-left: ${(0, _4k_1.adaptiveValueCalc)(48)};
+    padding-right: ${(0, _4k_1.adaptiveValueCalc)(48)};
+    border-top-right-radius: ${(0, _4k_1.adaptiveValueCalc)(24)};
+    border-top-left-radius: ${(0, _4k_1.adaptiveValueCalc)(24)};
+    border-bottom-right-radius: ${(props) => props.isActive ? 'none' : (0, _4k_1.adaptiveValueCalc)(24)};
+    border-bottom-left-radius: ${(props) => props.isActive ? 'none' : (0, _4k_1.adaptiveValueCalc)(24)};
+  }
+`;
+const StyledSearchIcon = styled_components_1.default.div `
+  position: absolute;
+  top: 8px;
+  bottom: 8px;
+  left: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 1;
+
+  svg path {
+    stroke: ${(props) => props.isActive
+    ? props.theme.colors.borderColor
+    : props.theme.colors.accent};
+  }
+
+  @media (max-width: 768px) {
+    left: 8px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    top: ${(0, _4k_1.adaptiveValueCalc)(8)};
+    bottom: ${(0, _4k_1.adaptiveValueCalc)(8)};
+    left: ${(0, _4k_1.adaptiveValueCalc)(16)};
+  }
+`;
+const SearchGlassIconResize = () => {
+    const { windowDimensions } = (0, screen_1.useWindowDimensionsWithServerInitial)();
+    return ((0, jsx_runtime_1.jsx)(search_svg_1.default, { style: (0, scale_1.getAdaptiveScale)({ windowDimensions, currentSize: 1 }) }));
+};
+// Components
+const SearchSimpleInput = ({ onFocusHandler, }) => ((0, jsx_runtime_1.jsx)(SearchInputContainer_1.SearchInputContainer, { onFocusHandler: onFocusHandler, initializeInputComponent: ({ searchValue, handle, inputRef, isSearchFocused, mobileOrDesktopPlaceHolder, searchSuggestion, isMobileOpen, searchCloseButton, }) => ((0, jsx_runtime_1.jsxs)(StyledSearchSimpleInput, { isMobileOpen: isMobileOpen, children: [(0, jsx_runtime_1.jsx)(StyledSearchIcon, { isActive: Boolean(searchValue.length), children: (0, jsx_runtime_1.jsx)(SearchGlassIconResize, {}) }), (0, jsx_runtime_1.jsx)(StyledInput, { isActive: Boolean(searchValue.length) && isSearchFocused, autoComplete: 'off', onChange: handle.change, ref: inputRef, tabIndex: 1, onFocus: handle.focus, onBlur: handle.blur, onKeyPress: handle.keyPress, value: searchValue, type: 'text', placeholder: mobileOrDesktopPlaceHolder }), searchCloseButton, isSearchFocused && searchSuggestion] })) }));
+// Export
+exports.default = SearchSimpleInput;

package/build/components/search/searchSuggestions/index.d.ts

@@ -0,0 +1,14 @@
+import { TAsset } from '../../../entities/asset/types';
+import { collectionsSchema as schema } from "@ludo.ninja/api";
+import { ProfileEntity } from "@ludo.ninja/core";
+import React from "react";
+interface Props {
+    assets: TAsset[];
+    profiles: ProfileEntity[];
+    collections: schema.ICollection[];
+    searchTerm: string;
+    isLoading: boolean;
+    isMobile?: boolean;
+}
+declare const SearchSuggestions: React.FC<Props>;
+export default SearchSuggestions;

package/build/components/search/searchSuggestions/index.js

@@ -0,0 +1,112 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const searchSuggestionsCaption_1 = __importDefault(require("./searchSuggestionsCaption"));
+const searchSuggestionsFooter_1 = __importDefault(require("./searchSuggestionsFooter"));
+const searchSuggestionsItem_1 = __importDefault(require("./searchSuggestionsItem"));
+const searchSuggestionsItemSkeleton_1 = require("./searchSuggestionsItem/searchSuggestionsItemSkeleton");
+const searchSuggestionsNotFound_1 = __importDefault(require("./searchSuggestionsNotFound"));
+const getAssetMiniatureUrl_1 = require("../../../entities/asset/getAssetMiniatureUrl");
+const types_1 = require("../../../entities/labelCreationType/types");
+const env_1 = require("../../../store/env");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const Badge_1 = __importDefault(require("../../../system/Badge"));
+const constants_1 = require("@ludo.ninja/core/build/constants");
+const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const styled_components_1 = __importDefault(require("styled-components"));
+// Styles
+const StyledSearchSuggestions = styled_components_1.default.div `
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  background-color: ${({ theme }) => theme.colors.sidebarBg};
+
+  border-bottom-left-radius: 28px;
+  border-bottom-right-radius: 28px;
+
+  .content {
+    position: relative;
+    height: 100%;
+    padding: 0 44px;
+    display: flex;
+    background-color: ${({ theme }) => theme.colors.thirdBg};
+
+    flex-direction: column;
+    border-bottom-right-radius: 20px;
+    border-bottom-left-radius: 20px;
+
+    @media (max-width: 767px) {
+      background-color: unset;
+      padding: 16px 0;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .scroller {
+      max-height: calc(var(--app-height) - 40px - 24px - 10px - 24px - 44px);
+      padding-left: 20px;
+      padding-right: 20px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-left: -20px;
+      margin-right: -20px;
+      width: calc(100% + 40px);
+    }
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    border-bottom-left-radius: ${(0, _4k_1.adaptiveValueCalc)(28)};
+    border-bottom-right-radius: ${(0, _4k_1.adaptiveValueCalc)(28)};
+
+    .content {
+      padding: 0 ${(0, _4k_1.adaptiveValueCalc)(44)};
+      border-bottom-right-radius: ${(0, _4k_1.adaptiveValueCalc)(20)};
+      border-bottom-left-radius: ${(0, _4k_1.adaptiveValueCalc)(20)};
+    }
+  }
+`;
+// Components
+const SearchSuggestions = ({ searchTerm, assets, profiles, collections, isLoading }) => {
+    const { getMediaENVDomain, NEXT_PUBLIC_ENV_VALUE, getAudioDomain, getVideoDomain } = (0, env_1.useEnvStore)((state) => ({
+        getMediaENVDomain: state.getMediaDomain,
+        NEXT_PUBLIC_ENV_VALUE: state.NEXT_PUBLIC_ENV_VALUE,
+        getAudioDomain: state.getAudioDomain,
+        getVideoDomain: state.getVideoDomain,
+    }));
+    const isNotFound = !assets?.length && !profiles?.length && !collections?.length;
+    return ((0, jsx_runtime_1.jsx)(StyledSearchSuggestions, { children: (0, jsx_runtime_1.jsxs)("div", { className: "content", children: [isLoading && (0, jsx_runtime_1.jsx)(searchSuggestionsItemSkeleton_1.SearchSuggestionsItemsSkeleton, {}), !isLoading &&
+                    (isNotFound ? ((0, jsx_runtime_1.jsx)(searchSuggestionsNotFound_1.default, { notFoundText: searchTerm })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "scroller", children: [
+                                    ...(assets?.length
+                                        ? [
+                                            {
+                                                caption: "NFTs",
+                                                children: assets.map((asset) => ((0, jsx_runtime_1.jsx)(searchSuggestionsItem_1.default, { name: asset?.name, link: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["asset"]}${asset.assetLink.replace(`${types_1.LabelKeys.asset}/`, "")}`, imgUrl: (0, getAssetMiniatureUrl_1.getAssetMiniatureUrl)({ asset, nextPublicDomain: NEXT_PUBLIC_ENV_VALUE, getAudioDomain, getVideoDomain }), searchTerm: searchTerm }, `${asset?.assetId}.${Math.random()}`))),
+                                            },
+                                        ]
+                                        : []),
+                                    ...(collections?.length
+                                        ? [
+                                            {
+                                                caption: "Collections",
+                                                children: collections.map((collection) => ((0, jsx_runtime_1.jsx)(searchSuggestionsItem_1.default, { name: collection?.collectionTitle, link: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["collections"]}/${collection?.collectionId}`, imgUrl: `${constants_1.staticLink}/public/noContent/noContent.svg`, searchTerm: searchTerm }, `${collection?.collectionId}.${Math.random()}`))),
+                                            },
+                                        ]
+                                        : []),
+                                    ...(profiles?.length
+                                        ? [
+                                            {
+                                                caption: "Profiles",
+                                                children: profiles.map((profile) => ((0, jsx_runtime_1.jsx)(searchSuggestionsItem_1.default, { borderRadius: true, name: profile.getName() || "", link: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["profile"]}/${profile.getUserId()}/nfts`, imgUrl: profile.getUserPic({
+                                                        mediaDomain: getMediaENVDomain(),
+                                                    }), additionalHTML: Boolean(profile.getFollowings()) && ((0, jsx_runtime_1.jsxs)("span", { className: "additional", children: [profile.getFollowings(), " followers"] })), afterText: (0, jsx_runtime_1.jsx)(Badge_1.default, { className: "badge", color: profile.getReferralTypeColor(), title: profile.getReferralTypeName() }), searchTerm: searchTerm }, profile.getUserId()))),
+                                            },
+                                        ]
+                                        : []),
+                                ].map(({ caption, children }) => ((0, jsx_runtime_1.jsx)(searchSuggestionsCaption_1.default, { caption: caption, children: children }, caption))) }), (0, jsx_runtime_1.jsx)(searchSuggestionsFooter_1.default, {})] })))] }) }));
+};
+// Export
+exports.default = SearchSuggestions;

package/build/components/search/searchSuggestions/searchSuggestionsCaption/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    caption: string;
+    children: React.ReactNode;
+}
+declare const SearchSuggestionsCaption: React.FC<Props>;
+export default SearchSuggestionsCaption;

package/build/components/search/searchSuggestions/searchSuggestionsCaption/index.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const ScreenWidth_1 = require("../../../../styles/ScreenWidth");
+const colors_1 = require("../../../../styles/colors");
+const typography_1 = require("../../../../styles/typography");
+// Styles
+const StyledSearchSuggestionsCaption = styled_components_1.default.div `
+  padding: 12px 0;
+  border-top: 1px solid ${colors_1.BorderColorLight};
+  line-height: 22px;
+
+  .caption {
+    ${typography_1.FH5};
+    color: ${colors_1.TextGrayColor};
+    user-select: none;
+  }
+
+  :last-child {
+    border-bottom: none;
+  }
+
+  ${ScreenWidth_1.mediaQuery.mobile} {
+    &:first-child {
+      border-top: unset;
+    }
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    padding: ${(0, _4k_1.adaptiveValueCalc)(12)} 0;
+    border-top: ${(0, _4k_1.adaptiveValueCalc)(1)} solid ${colors_1.BorderColorLight};
+    line-height: ${(0, _4k_1.adaptiveValueCalc)(22)};
+  }
+`;
+// Components
+const SearchSuggestionsCaption = ({ caption, children }) => {
+    return ((0, jsx_runtime_1.jsxs)(StyledSearchSuggestionsCaption, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'caption', children: caption }), children] }));
+};
+// Export
+exports.default = SearchSuggestionsCaption;

package/build/components/search/searchSuggestions/searchSuggestionsFooter/index.d.ts

@@ -0,0 +1,2 @@
+declare const SearchSuggestionsFooter: () => import("react/jsx-runtime").JSX.Element;
+export default SearchSuggestionsFooter;