@ludo.ninja/components 0.5.0 → 1.0.0

package/dist/components/searchPage/searchFiltersConnector/index.jsx

@@ -0,0 +1,382 @@
+import React, { useEffect, useState } from 'react';
+
+import { useRouter } from 'next/router';
+
+import { useFetchSearchResultSelections } from '@/api/server-preferences/queries/fetchSearchResultSelections';
+
+import Filters from '@/components/filters';
+
+var __assign =
+  (this && this.__assign) ||
+  function () {
+    __assign =
+      Object.assign ||
+      function (t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+      };
+    return __assign.apply(this, arguments);
+  };
+var __awaiter =
+  (this && this.__awaiter) ||
+  function (thisArg, _arguments, P, generator) {
+    function adopt(value) {
+      return value instanceof P
+        ? value
+        : new P(function (resolve) {
+            resolve(value);
+          });
+    }
+    return new (P || (P = Promise))(function (resolve, reject) {
+      function fulfilled(value) {
+        try {
+          step(generator.next(value));
+        } catch (e) {
+          reject(e);
+        }
+      }
+      function rejected(value) {
+        try {
+          step(generator['throw'](value));
+        } catch (e) {
+          reject(e);
+        }
+      }
+      function step(result) {
+        result.done
+          ? resolve(result.value)
+          : adopt(result.value).then(fulfilled, rejected);
+      }
+      step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+  };
+var __generator =
+  (this && this.__generator) ||
+  function (thisArg, body) {
+    var _ = {
+        label: 0,
+        sent: function () {
+          if (t[0] & 1) throw t[1];
+          return t[1];
+        },
+        trys: [],
+        ops: [],
+      },
+      f,
+      y,
+      t,
+      g;
+    return (
+      (g = { next: verb(0), throw: verb(1), return: verb(2) }),
+      typeof Symbol === 'function' &&
+        (g[Symbol.iterator] = function () {
+          return this;
+        }),
+      g
+    );
+    function verb(n) {
+      return function (v) {
+        return step([n, v]);
+      };
+    }
+    function step(op) {
+      if (f) throw new TypeError('Generator is already executing.');
+      while ((g && ((g = 0), op[0] && (_ = 0)), _))
+        try {
+          if (
+            ((f = 1),
+            y &&
+              (t =
+                op[0] & 2
+                  ? y['return']
+                  : op[0]
+                  ? y['throw'] || ((t = y['return']) && t.call(y), 0)
+                  : y.next) &&
+              !(t = t.call(y, op[1])).done)
+          )
+            return t;
+          if (((y = 0), t)) op = [op[0] & 2, t.value];
+          switch (op[0]) {
+            case 0:
+            case 1:
+              t = op;
+              break;
+            case 4:
+              _.label++;
+              return { value: op[1], done: false };
+            case 5:
+              _.label++;
+              y = op[1];
+              op = [0];
+              continue;
+            case 7:
+              op = _.ops.pop();
+              _.trys.pop();
+              continue;
+            default:
+              if (
+                !((t = _.trys), (t = t.length > 0 && t[t.length - 1])) &&
+                (op[0] === 6 || op[0] === 2)
+              ) {
+                _ = 0;
+                continue;
+              }
+              if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
+                _.label = op[1];
+                break;
+              }
+              if (op[0] === 6 && _.label < t[1]) {
+                _.label = t[1];
+                t = op;
+                break;
+              }
+              if (t && _.label < t[2]) {
+                _.label = t[2];
+                _.ops.push(op);
+                break;
+              }
+              if (t[2]) _.ops.pop();
+              _.trys.pop();
+              continue;
+          }
+          op = body.call(thisArg, _);
+        } catch (e) {
+          op = [6, e];
+          y = 0;
+        } finally {
+          f = t = 0;
+        }
+      if (op[0] & 5) throw op[1];
+      return { value: op[0] ? op[1] : void 0, done: true };
+    }
+  };
+var __spreadArray =
+  (this && this.__spreadArray) ||
+  function (to, from, pack) {
+    if (pack || arguments.length === 2)
+      for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+          if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+          ar[i] = from[i];
+        }
+      }
+    return to.concat(ar || Array.prototype.slice.call(from));
+  };
+
+export var useSearchFiltersConnector = function (_a) {
+  var _this = this;
+  var defaults = _a.defaults,
+    isDisabledTypeFilters = _a.isDisabledTypeFilters,
+    isMobile = _a.isMobile;
+  var defaultCopyWithoutTerm = __assign(
+    {
+      time: defaults.time,
+      blockchain: defaults.blockchain,
+      category: defaults.category,
+      status: defaults.status,
+    },
+    'type' in defaults
+      ? {
+          type: defaults.type,
+        }
+      : {}
+  );
+  var searchResultSelections =
+    useFetchSearchResultSelections().searchResultSelections;
+  var _b = useState(defaultCopyWithoutTerm),
+    filterInput = _b[0],
+    setFilterInput = _b[1];
+  var router = useRouter();
+  useEffect(function () {
+    router.replace(
+      {
+        query: __assign(__assign({}, router.query), defaultCopyWithoutTerm),
+      },
+      undefined,
+      { shallow: true }
+    );
+  }, []);
+  var handleFilterInput = function (fieldName, fieldValue) {
+    return __awaiter(_this, void 0, void 0, function () {
+      var _a;
+      return __generator(this, function (_b) {
+        switch (_b.label) {
+          case 0:
+            return [
+              4 /*yield*/,
+              router.replace(
+                {
+                  query: __assign(
+                    __assign({}, router.query),
+                    ((_a = {}), (_a[fieldName] = fieldValue), _a)
+                  ),
+                },
+                undefined,
+                { shallow: true }
+              ),
+            ];
+          case 1:
+            _b.sent();
+            setFilterInput(function (prevFilters) {
+              var _a;
+              return __assign(
+                __assign({}, prevFilters),
+                ((_a = {}), (_a[fieldName] = fieldValue), _a)
+              );
+            });
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+  var handleMobileFilterInput = function (newFilters) {
+    return __awaiter(_this, void 0, void 0, function () {
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            return [
+              4 /*yield*/,
+              router.replace(
+                {
+                  query: __assign(__assign({}, router.query), newFilters),
+                },
+                undefined,
+                { shallow: true }
+              ),
+            ];
+          case 1:
+            _a.sent();
+            setFilterInput(function (prevFilters) {
+              return __assign(__assign({}, prevFilters), newFilters);
+            });
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+  var handleResetFilter = function () {
+    var _a, _b, _c, _d, _e;
+    if (searchResultSelections) {
+      var filterInitialStateNft = __assign(
+        __assign(
+          {},
+          isDisabledTypeFilters
+            ? {}
+            : {
+                type:
+                  (_a = searchResultSelections.typeSelections[0]) === null ||
+                  _a === void 0
+                    ? void 0
+                    : _a.id,
+              }
+        ),
+        {
+          time:
+            (_b = searchResultSelections.timeSelections[0]) === null ||
+            _b === void 0
+              ? void 0
+              : _b.id,
+          blockchain:
+            (_c = searchResultSelections.blockchainSelections[0]) === null ||
+            _c === void 0
+              ? void 0
+              : _c.id,
+          category:
+            (_d = searchResultSelections.categorySelections[0]) === null ||
+            _d === void 0
+              ? void 0
+              : _d.id,
+          status:
+            (_e = searchResultSelections.statusSelections[0]) === null ||
+            _e === void 0
+              ? void 0
+              : _e.id,
+        }
+      );
+      setFilterInput(filterInitialStateNft);
+      router.replace(
+        {
+          query: __assign(__assign({}, router.query), filterInitialStateNft),
+        },
+        undefined,
+        { shallow: true }
+      );
+    }
+  };
+  return {
+    filterInput: filterInput,
+    renderFilters:
+      filterInput.time ||
+      filterInput.status ||
+      filterInput.category ||
+      filterInput.blockchain ? (
+        <>
+          {searchResultSelections && (
+            <Filters
+              filterInput={filterInput}
+              selectData={__spreadArray(
+                __spreadArray(
+                  [],
+                  !isDisabledTypeFilters
+                    ? [
+                        {
+                          id: 1,
+                          data: {
+                            selectName: 'type',
+                            selectOptions:
+                              searchResultSelections.typeSelections,
+                          },
+                        },
+                      ]
+                    : [],
+                  true
+                ),
+                [
+                  {
+                    id: 2,
+                    data: {
+                      selectName: 'blockchain',
+                      selectOptions:
+                        searchResultSelections.blockchainSelections,
+                    },
+                  },
+                  {
+                    id: 3,
+                    data: {
+                      selectName: 'category',
+                      selectOptions: searchResultSelections.categorySelections,
+                    },
+                  },
+                  {
+                    id: 4,
+                    data: {
+                      selectName: 'time',
+                      selectOptions: searchResultSelections.timeSelections,
+                    },
+                  },
+                  {
+                    id: 5,
+                    data: {
+                      selectName: 'status',
+                      selectOptions: searchResultSelections.statusSelections,
+                    },
+                  },
+                ],
+                false
+              )}
+              filterInputHandler={handleFilterInput}
+              handleResetFilter={handleResetFilter}
+              handleMobileFilterInput={handleMobileFilterInput}
+              isMobile={isMobile}
+            />
+          )}
+        </>
+      ) : (
+        <></>
+      ),
+  };
+};

package/dist/components/searchPage/searchProfiles/index.jsx

@@ -0,0 +1,112 @@
+import React, { useEffect, useState } from 'react';
+
+import { useRouter } from 'next/router';
+
+import { useFindProfilesByName } from '@/api/server-search/queries/useFindProfilesByName';
+
+import {
+  ProfileSkeletonWrapper,
+  ProfileUserCard,
+  ProfileUserCards,
+} from '@/components/profile';
+import SearchResultCaption from '@/components/search/searchResultCaption';
+
+import CardsNoResults from '@/system/CardsHolderWithSkeleton/CardsHolder/CardsNoResults';
+
+import { getMediaENVDomain } from '@/utils/env';
+
+// Component
+var SearchProfiles = function (_a) {
+  var defaultTerm = _a.defaultTerm;
+  var _b = useState(defaultTerm),
+    searchTerm = _b[0],
+    setSearchTerm = _b[1];
+  var _c = useFindProfilesByName({
+      name: searchTerm,
+      page: {
+        token: '',
+        size: 4,
+      },
+    }),
+    clientProfiles = _c.clientProfiles,
+    clientResults = _c.clientResults,
+    loading = _c.loading;
+  var router = useRouter();
+  var term = router.query.term;
+  useEffect(
+    function () {
+      setSearchTerm(term || '');
+    },
+    [term]
+  );
+  return (
+    <div>
+      <SearchResultCaption
+        isLoading={loading}
+        nftCounter={clientResults}
+        searchQuery={searchTerm}
+      />
+
+      {!(clientProfiles === null || clientProfiles === void 0
+        ? void 0
+        : clientProfiles.length) ? (
+        <CardsNoResults
+          noFoundText={'No results found for \u201C'.concat(
+            searchTerm,
+            '\u201D'
+          )}
+        />
+      ) : (
+        <ProfileUserCards>
+          {loading ? (
+            <ProfileSkeletonWrapper profilesCount={8} />
+          ) : clientProfiles === null || clientProfiles === void 0 ? (
+            void 0
+          ) : (
+            clientProfiles.map(function (profile) {
+              return (
+                <ProfileUserCard
+                  key={
+                    profile === null || profile === void 0
+                      ? void 0
+                      : profile.getUserId()
+                  }
+                  userId={
+                    profile === null || profile === void 0
+                      ? void 0
+                      : profile.getUserId()
+                  }
+                  userName={
+                    profile === null || profile === void 0
+                      ? void 0
+                      : profile.getName()
+                  }
+                  userPic={
+                    profile === null || profile === void 0
+                      ? void 0
+                      : profile.getUserPic({
+                          mediaDomain: getMediaENVDomain(),
+                        })
+                  }
+                  followings={
+                    profile === null || profile === void 0
+                      ? void 0
+                      : profile.getFollowings()
+                  }
+                  isFollowing={
+                    profile === null || profile === void 0
+                      ? void 0
+                      : profile.getIsFollowing()
+                  }
+                  windowDimensions={null}
+                />
+              );
+            })
+          )}
+        </ProfileUserCards>
+      )}
+    </div>
+  );
+};
+// Export
+export default SearchProfiles;

package/dist/components/shareDialog/index.jsx

@@ -0,0 +1,86 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { EmailShareButton, FacebookShareButton, // InstapaperShareButton,
+RedditShareButton, TelegramShareButton, TwitterShareButton, WhatsappShareButton, } from 'react-share';
+import styled from 'styled-components';
+import { alertVariants } from '@ludo.ninja/ui/build/system/Alert/type';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { copyToClipboard } from '@ludo.ninja/utils';
+import { useUiStore } from '@/store/ui';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { BlackColor, TextGrayColor } from '@/styles/colors';
+import { Flex, H1, H5 } from '@system';
+// import CopyIcon from '@/public/share/copy-link-btn.svg';
+// import EmailIcon from '@/public/share/email-btn.svg';
+// import FacebookIcon from '@/public/share/facebook-btn.svg';
+// import InstagramIcon from '@/public/share/insta-btn.svg';
+// import RedditIcon from '@/public/share/reddit-btn.svg';
+// import TelegramIcon from '@/public/share/telegram-btn.svg';
+// import TwitterIcon from '@/public/share/twitter-btn.svg';
+// import WatsUpIcon from '@/public/share/whatsapp-btn.svg';
+// Styles
+var STitle = styled(H1)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 24px;\n  color: ", ";\n  ", " {\n    margin-bottom: ", ";\n  }\n"], ["\n  margin-bottom: 24px;\n  color: ", ";\n  ", " {\n    margin-bottom: ", ";\n  }\n"])), BlackColor, mediaQuery.minWidthFourK, adaptiveValueCalc(24));
+var StyledShare = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  .shareButtons {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n    row-gap: 24px;\n    column-gap: 16px;\n    margin: 0 43px 33px 43px;\n    justify-content: center;\n\n    ", " {\n      grid-template-columns: 1fr 1fr;\n      justify-items: center;\n      align-items: center;\n    }\n  }\n\n  .shareBtn {\n    width: 108px;\n    height: 64px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-direction: column;\n    cursor: pointer;\n    border: none;\n    background-color: transparent;\n\n    img {\n      width: 40px;\n      height: 40px;\n    }\n  }\n\n  ", " {\n    .shareButtons {\n      row-gap: ", ";\n      column-gap: ", ";\n      margin: 0 ", " ", "\n        ", ";\n    }\n\n    .shareBtn {\n      width: ", ";\n      height: ", ";\n\n      img {\n        width: ", ";\n        height: ", ";\n      }\n    }\n  }\n"], ["\n  .shareButtons {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n    row-gap: 24px;\n    column-gap: 16px;\n    margin: 0 43px 33px 43px;\n    justify-content: center;\n\n    ", " {\n      grid-template-columns: 1fr 1fr;\n      justify-items: center;\n      align-items: center;\n    }\n  }\n\n  .shareBtn {\n    width: 108px;\n    height: 64px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-direction: column;\n    cursor: pointer;\n    border: none;\n    background-color: transparent;\n\n    img {\n      width: 40px;\n      height: 40px;\n    }\n  }\n\n  ", " {\n    .shareButtons {\n      row-gap: ", ";\n      column-gap: ", ";\n      margin: 0 ", " ", "\n        ", ";\n    }\n\n    .shareBtn {\n      width: ", ";\n      height: ", ";\n\n      img {\n        width: ", ";\n        height: ", ";\n      }\n    }\n  }\n"])), mediaQuery.mobile, mediaQuery.minWidthFourK, adaptiveValueCalc(24), adaptiveValueCalc(16), adaptiveValueCalc(43), adaptiveValueCalc(33), adaptiveValueCalc(43), adaptiveValueCalc(108), adaptiveValueCalc(64), adaptiveValueCalc(40), adaptiveValueCalc(40));
+var ShareDialog = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var link = _a.link, onHide = _a.onHide, params = _a.params;
+    var url = new URL(link || '');
+    url.search = '';
+    var urlWithoutGetParameters = url.toString();
+    var openAlert = useUiStore(function (state) { return state.openAlert; });
+    return (<StyledShare>
+      <Flex alignItems={'center'} justifyContent={'center'}>
+        <STitle>{'Share to...'}</STitle>
+      </Flex>
+      <div className="shareButtons">
+        <button onClick={function () {
+            onHide();
+            copyToClipboard(urlWithoutGetParameters).then(function () {
+                openAlert({
+                    type: alertVariants.copied,
+                });
+            });
+        }} className={'shareBtn'}>
+          <img src="/share/copy-link-btn.svg" alt="share" height={40} width={40}/>
+          <H5 color={TextGrayColor}>Copy Link</H5>
+        </button>
+        <EmailShareButton url={urlWithoutGetParameters} body={(_b = params === null || params === void 0 ? void 0 : params.email) === null || _b === void 0 ? void 0 : _b.body} separator={(_c = params === null || params === void 0 ? void 0 : params.email) === null || _c === void 0 ? void 0 : _c.separator} subject={(_d = params === null || params === void 0 ? void 0 : params.email) === null || _d === void 0 ? void 0 : _d.subject} className="shareBtn" onClick={onHide}>
+          <img src="/share/email-btn.svg" alt="email" height={40} width={40}/>
+          <H5 color={TextGrayColor}>Email</H5>
+        </EmailShareButton>
+        <TelegramShareButton url={urlWithoutGetParameters} title={(_e = params === null || params === void 0 ? void 0 : params.telegram) === null || _e === void 0 ? void 0 : _e.title} className="shareBtn" onClick={onHide}>
+          <img src="/share/telegram-btn.svg" alt="telegram" height={40} width={40}/>
+          <H5 color={TextGrayColor}>Telegram</H5>
+        </TelegramShareButton>
+        <WhatsappShareButton url={urlWithoutGetParameters} title={(_f = params === null || params === void 0 ? void 0 : params.whatsapp) === null || _f === void 0 ? void 0 : _f.title} separator={(_g = params === null || params === void 0 ? void 0 : params.whatsapp) === null || _g === void 0 ? void 0 : _g.separator} className="shareBtn" onClick={onHide}>
+          <img src="/share/whatsapp-btn.svg" alt="whatsapp" height={40} width={40}/>
+          <H5 color={TextGrayColor}>WhatsApp</H5>
+        </WhatsappShareButton>
+        <TwitterShareButton url={urlWithoutGetParameters} title={(_h = params === null || params === void 0 ? void 0 : params.twitter) === null || _h === void 0 ? void 0 : _h.title} via={(_j = params === null || params === void 0 ? void 0 : params.twitter) === null || _j === void 0 ? void 0 : _j.via} related={(_k = params === null || params === void 0 ? void 0 : params.twitter) === null || _k === void 0 ? void 0 : _k.related} hashtags={(_l = params === null || params === void 0 ? void 0 : params.twitter) === null || _l === void 0 ? void 0 : _l.hashtags} className="shareBtn" onClick={onHide}>
+          <img src="/share/twitter-btn.svg" alt="twitter" width={40} height={40}/>
+          <H5 color={TextGrayColor}>Twitter</H5>
+        </TwitterShareButton>
+        {/*<InstapaperShareButton*/}
+        {/*  url={urlWithoutGetParameters}*/}
+        {/*  className="shareBtn"*/}
+        {/*  onClick={onHide}*/}
+        {/*>*/}
+        {/*  <InstagramIcon />*/}
+        {/*  <H5 color={TextGrayColor}>Instagram</H5>*/}
+        {/*</InstapaperShareButton>*/}
+        <RedditShareButton url={urlWithoutGetParameters} title={(_m = params === null || params === void 0 ? void 0 : params.reddit) === null || _m === void 0 ? void 0 : _m.title} className="shareBtn" onClick={onHide}>
+          <img src="/share/reddit-btn.svg" alt="reddit" width={40} height={40}/>
+          <H5 color={TextGrayColor}>Reddit</H5>
+        </RedditShareButton>
+        <FacebookShareButton url={urlWithoutGetParameters} quote={((_o = params === null || params === void 0 ? void 0 : params.facebook) === null || _o === void 0 ? void 0 : _o.quote) || 'My cool NFT'} hashtag={((_p = params === null || params === void 0 ? void 0 : params.facebook) === null || _p === void 0 ? void 0 : _p.hashtag) || '#ludo'} className="shareBtn" onClick={onHide}>
+          <img src="/share/facebook-btn.svg" alt="facebook" width={40} height={40}/>
+          <H5 color={TextGrayColor}>Facebook</H5>
+        </FacebookShareButton>
+      </div>
+    </StyledShare>);
+};
+// Export
+export default ShareDialog;
+var templateObject_1, templateObject_2;

package/dist/components/showcaseAssets/showcaseSort/data.js

@@ -0,0 +1,26 @@
+var sortData = [
+    {
+        id: Math.random(),
+        value: 'all',
+        label: 'All',
+    },
+    {
+        id: Math.random(),
+        value: 'asset',
+        label: 'NFTs',
+    },
+    {
+        id: Math.random(),
+        value: 'collection',
+        label: 'Collections',
+    },
+    // {
+    //   id: Math.random(),
+    //   label: 'Events',
+    // },
+    // {
+    //   id: Math.random(),
+    //   label: 'Apps',
+    // },
+];
+export { sortData };

package/dist/components/showcaseAssets/showcaseSort/index.jsx

@@ -0,0 +1,25 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { BlackColor } from '@/styles/colors';
+import { FH2 } from '@/styles/typography';
+import { StyledTabsNavLink } from '@/system/Tabs/TabNavLink';
+import TabsNav from '@/system/Tabs/TabsNav';
+// Styles
+var StyledShowCaseSort = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 25px;\n  display: flex;\n  align-items: center;\n  .caption {\n    user-select: none;\n    color: ", ";\n    ", ";\n    margin-right: 32px;\n    padding-bottom: 10px;\n  }\n  .tabs {\n    ", " {\n      margin-right: 24px;\n      margin-bottom: 10px;\n      &:last-child {\n        margin-right: 0;\n      }\n    }\n  }\n"], ["\n  margin-bottom: 25px;\n  display: flex;\n  align-items: center;\n  .caption {\n    user-select: none;\n    color: ", ";\n    ", ";\n    margin-right: 32px;\n    padding-bottom: 10px;\n  }\n  .tabs {\n    ", " {\n      margin-right: 24px;\n      margin-bottom: 10px;\n      &:last-child {\n        margin-right: 0;\n      }\n    }\n  }\n"])), BlackColor, FH2, StyledTabsNavLink);
+// Component
+var ShowCaseSort = function (_a) {
+    var activeTab = _a.activeTab, setActiveTab = _a.setActiveTab, data = _a.data;
+    return (<StyledShowCaseSort>
+      <span className={"caption"}>Explore</span>
+      <div className="tabs">
+        <TabsNav activeTab={activeTab} tabsData={data} setActiveTab={setActiveTab}/>
+      </div>
+    </StyledShowCaseSort>);
+};
+// Export
+export default ShowCaseSort;
+var templateObject_1;