feat: filterBar + sorting

apps/common/components/AppCard.tsx

@@ -2,8 +2,8 @@ import Image from 'next/image';
 import Link from 'next/link';
 import {IconShare} from '@common/icons/IconShare';
 
-import type {TApp} from 'pages/home/[category]';
 import type {ReactElement} from 'react';
+import type {TApp} from '@common/types/category';
 
 type TAppCardProps = {
 	app: TApp;

apps/common/components/CategorySection.tsx

@@ -2,8 +2,8 @@ import {IconChevron} from '@common/icons/IconChevron';
 
 import {AppCard} from './AppCard';
 
-import type {TApp} from 'pages/home/[category]';
 import type {ReactElement} from 'react';
+import type {TApp} from '@common/types/category';
 
 type TAppSectionProps = {
 	title: string;

apps/common/components/FilterBar.tsx

@@ -0,0 +1,30 @@
+import {cl} from '@builtbymom/web3/utils';
+import {CATEGORY_PAGE_FILTERS} from '@common/utils/constants';
+
+import type {ReactElement} from 'react';
+
+function FilterItem({isActive, title}: {isActive: boolean; title: string}): ReactElement {
+	return (
+		<div
+			className={cl(
+				'border-1 whitespace-nowrap max-h-10 px-6 py-2 text-base text-white border',
+				isActive ? 'border-white' : 'border-white/15'
+			)}>
+			{title}
+		</div>
+	);
+}
+
+export function FilterBar({selectedFilter}: {selectedFilter: {title: string; value: string}}): ReactElement {
+	return (
+		<div className={'flex'}>
+			{CATEGORY_PAGE_FILTERS.map(filter => (
+				<FilterItem
+					title={filter.title}
+					isActive={filter.value === selectedFilter.value}
+					key={filter.value}
+				/>
+			))}
+		</div>
+	);
+}

apps/common/components/SortingBar.tsx

@@ -0,0 +1,35 @@
+import {type ReactElement, useState} from 'react';
+import {IconChevron} from '@common/icons/IconChevron';
+
+function SortItem({isActive, title}: {isActive: boolean; title: string}): ReactElement {
+	return <div className={`px-6 py-2 ${isActive ? 'font-bold text-white' : 'text-gray-400'}`}>{title}</div>;
+}
+
+export function SortingBar(): ReactElement {
+	const [isOpen, set_isOpen] = useState(false);
+	return (
+		<>
+			<button
+				onClick={() => set_isOpen(prev => !prev)}
+				className={'relative flex items-center'}>
+				<p className={'mr-2 text-xs text-white'}>{'Sort by Popularity'}</p>
+				<IconChevron className={`size-6 text-white ${isOpen && 'rotate-180'}`} />
+			</button>
+			{isOpen && (
+				<div
+					className={
+						'border-1 absolute top-28 z-30 w-80 border border-gray-700 bg-gray-500 py-2 text-white max-sm:left-0 md:right-1 md:top-10'
+					}>
+					{Array(4)
+						.fill('List Item')
+						.map((item, i) => (
+							<SortItem
+								isActive={i === 2}
+								title={item}
+							/>
+						))}
+				</div>
+			)}
+		</>
+	);
+}

apps/common/utils/constants.ts

@@ -1,7 +1,7 @@
 import {arbitrum, base, fantom, mainnet, optimism, polygon} from 'viem/chains';
 import {toAddress} from '@builtbymom/web3/utils';
 
-import type {TApp} from 'pages/home/[category]';
+import type {TApp} from '@common/types/category';
 
 export const DEFAULT_SLIPPAGE = 0.5;
 export const DEFAULT_MAX_LOSS = 1n;
@@ -133,3 +133,10 @@ export const MENU_TABS = [
 	{title: 'Community Apps', route: 'community'},
 	{title: 'Yearn X Projects', route: 'yearn-x'}
 ];
+
+export const CATEGORY_PAGE_FILTERS = [
+	{title: 'All', value: 'all'},
+	{title: 'Filter', value: 'filter'},
+	{title: 'Tab', value: 'tab'},
+	{title: 'Large Filter', value: 'large-filter'}
+];

pages/home/[category].tsx

@@ -1,5 +1,7 @@
 import {usePathname} from 'next/navigation';
 import {AppCard} from '@common/components/AppCard';
+import {FilterBar} from '@common/components/FilterBar';
+import {SortingBar} from '@common/components/SortingBar';
 import {CATEGORIES_DICT} from '@common/utils/constants';
 
 import type {ReactElement} from 'react';
@@ -22,6 +24,17 @@ export default function Index(): ReactElement {
 					</p>
 				</div>
 
+				<div className={'relative mb-10 hidden w-full flex-col justify-between gap-7  md:flex-row md:gap-0'}>
+					<FilterBar
+						selectedFilter={{
+							title: 'Filter',
+							value: 'filter'
+						}}
+					/>
+
+					<SortingBar />
+				</div>
+
 				<div className={'flex grid-rows-1 flex-col gap-6 md:grid md:grid-cols-2 lg:grid-cols-4'}>
 					{currentCatrgory?.apps.map(app => <AppCard app={app} />)}
 				</div>