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;