diff --git a/apps/web/src/components/Feed/SuggestedProfileCard.tsx b/apps/web/src/components/Feed/SuggestedProfileCard.tsx
index 215ee15fe9..4dc8fbd194 100644
--- a/apps/web/src/components/Feed/SuggestedProfileCard.tsx
+++ b/apps/web/src/components/Feed/SuggestedProfileCard.tsx
@@ -168,7 +168,7 @@ const StyledSuggestedProfileCard = styled(HStack)`
}
@media only screen and ${breakpoints.desktop} {
- min-width: 170px;
+ width: 230px;
}
`;
diff --git a/apps/web/src/components/Search/SearchDefault.tsx b/apps/web/src/components/Search/SearchDefault.tsx
index 5d2ea4f519..85f3e3b03b 100644
--- a/apps/web/src/components/Search/SearchDefault.tsx
+++ b/apps/web/src/components/Search/SearchDefault.tsx
@@ -1,5 +1,5 @@
-import { useMemo } from 'react';
import { graphql, useLazyLoadQuery } from 'react-relay';
+import styled from 'styled-components';
import { SearchDefaultQuery } from '~/generated/SearchDefaultQuery.graphql';
import { CmsTypes } from '~/scenes/ContentPages/cms_types';
@@ -7,7 +7,7 @@ import { CmsTypes } from '~/scenes/ContentPages/cms_types';
import { VStack } from '../core/Spacer/Stack';
import { SearchFilterType } from './Search';
import SearchDefaultTrendingCuratorsSection from './SearchDefaultTrendingCuratorsSection';
-import SearchFeaturedCollectionSection from './SearchFeaturedCollectionSection';
+import SearchDefaultTrendingUsersSection from './SearchDefaultTrendingUsersSection';
import SearchSuggestedUsersSection from './SearchSuggestedUsersSection';
import { SearchItemType } from './types';
@@ -30,29 +30,23 @@ export default function SearchDefault({
graphql`
query SearchDefaultQuery {
...SearchSuggestedUsersSectionFragment
+ ...SearchDefaultTrendingUsersSectionFragment
...SearchDefaultTrendingCuratorsSectionFragment
}
`,
{}
);
- const featuredProfiles = useMemo(() => {
- if (pageContent) {
- return pageContent.featuredProfiles?.slice(0, 2);
- }
- return [];
- }, [pageContent]);
-
return (
-
+
{!selectedFilter && (
-
-
+
+
-
)}
-
+
);
}
+
+const SectionWrapper = styled(VStack)`
+ padding: 12px;
+`;
diff --git a/apps/web/src/components/Search/SearchDefaultTrendingUsersSection.tsx b/apps/web/src/components/Search/SearchDefaultTrendingUsersSection.tsx
new file mode 100644
index 0000000000..6c8726d5f8
--- /dev/null
+++ b/apps/web/src/components/Search/SearchDefaultTrendingUsersSection.tsx
@@ -0,0 +1,89 @@
+import { graphql, useFragment } from 'react-relay';
+import styled, { keyframes } from 'styled-components';
+
+import breakpoints from '~/components/core/breakpoints';
+import { SearchDefaultTrendingUsersSectionFragment$key } from '~/generated/SearchDefaultTrendingUsersSectionFragment.graphql';
+
+import { HStack, VStack } from '../core/Spacer/Stack';
+import SuggestedProfileCard from '../Feed/SuggestedProfileCard';
+import SearchResultsHeader from './SearchResultsHeader';
+import { SearchItemType } from './types';
+
+type Props = {
+ queryRef: SearchDefaultTrendingUsersSectionFragment$key;
+ variant?: 'default' | 'compact';
+ onSelect: (item: SearchItemType) => void;
+};
+
+export default function SearchDefaultTrendingUsersSection({ queryRef, variant, onSelect }: Props) {
+ const query = useFragment(
+ graphql`
+ fragment SearchDefaultTrendingUsersSectionFragment on Query {
+ trendingUsers5Days: trendingUsers(input: { report: LAST_5_DAYS }) {
+ ... on TrendingUsersPayload {
+ __typename
+ users {
+ username
+ dbid
+ ...SuggestedProfileCardFragment
+ }
+ }
+ }
+
+ ...SuggestedProfileCardFollowFragment
+ }
+ `,
+ queryRef
+ );
+
+ if (query.trendingUsers5Days?.__typename !== 'TrendingUsersPayload') {
+ return null;
+ }
+
+ const { users: trendingUsers } = query.trendingUsers5Days;
+
+ return (
+
+
+
+ Trending collectors and creators
+
+
+
+ {trendingUsers?.slice(0, 2)?.map((profile) => (
+
+ onSelect({
+ type: 'User' as const,
+ label: profile.username ?? '',
+ value: profile.dbid,
+ })
+ }
+ showFollowButton={false}
+ />
+ ))}
+
+
+ );
+}
+
+const HeaderWrapper = styled(HStack)`
+ padding: 0px 12px;
+
+ @media only screen and ${breakpoints.desktop} {
+ padding-right: 12px;
+ padding-left: 8px;
+ }
+`;
+
+const fadeIn = keyframes`
+ from { opacity: 0 };
+ to { opacity: 0.96 };
+`;
+
+const StyledWrapper = styled(VStack)`
+ animation: ${fadeIn} 0.2s ease-out forwards;
+`;
diff --git a/apps/web/src/contexts/globalLayout/GlobalSidebar/AnimatedSidebarDrawer.tsx b/apps/web/src/contexts/globalLayout/GlobalSidebar/AnimatedSidebarDrawer.tsx
index 516eea199f..c68eb16088 100644
--- a/apps/web/src/contexts/globalLayout/GlobalSidebar/AnimatedSidebarDrawer.tsx
+++ b/apps/web/src/contexts/globalLayout/GlobalSidebar/AnimatedSidebarDrawer.tsx
@@ -80,7 +80,7 @@ const StyledMotion = styled(motion.div)`
`;
const StyledDrawer = styled(VStack)`
- background-color: ${colors.offWhite};
+ background-color: ${colors.white};
width: 100%;
position: relative;
min-height: 0;