feat: update tab button design

heyxyz · Mar 2, 2024 · 2cd1c44 · 2cd1c44
1 parent 54b332b
commit 2cd1c44
Show file tree

Hide file tree

Showing 14 changed files with 108 additions and 272 deletions.
diff --git a/apps/web/src/components/Home/Algorithms.tsx b/apps/web/src/components/Home/Algorithms.tsx
@@ -0,0 +1,73 @@
+import type { HomeFeedType } from '@hey/data/enums';
+import type { Dispatch, FC, SetStateAction } from 'react';
+
+import MenuTransition from '@components/Shared/MenuTransition';
+import { Menu } from '@headlessui/react';
+import { SparklesIcon } from '@heroicons/react/24/outline';
+import { CheckCircleIcon } from '@heroicons/react/24/solid';
+import { algorithms } from '@hey/data/algorithms';
+import { HOME } from '@hey/data/tracking';
+import cn from '@hey/ui/cn';
+import { Leafwatch } from '@lib/leafwatch';
+
+interface AlgorithmsProps {
+  feedType: HomeFeedType;
+  setFeedType: Dispatch<SetStateAction<HomeFeedType>>;
+}
+
+const Algorithms: FC<AlgorithmsProps> = ({ feedType, setFeedType }) => {
+  return (
+    <Menu as="div" className="relative">
+      <>
+        <Menu.Button
+          className="outline-brand-500 rounded-md p-1 hover:bg-gray-300/20"
+          onClick={() => {
+            Leafwatch.track(HOME.ALGORITHMS.OPEN_ALGORITHMS);
+          }}
+        >
+          <SparklesIcon className="size-5" />
+        </Menu.Button>
+        <MenuTransition>
+          <Menu.Items
+            className="absolute right-0 z-[5] mt-1 w-52 rounded-xl border bg-white shadow-sm focus:outline-none dark:border-gray-700 dark:bg-gray-900"
+            static
+          >
+            {algorithms.map((algorithm) => (
+              <Menu.Item
+                as="div"
+                className={({ active }: { active: boolean }) =>
+                  cn({ 'dropdown-active': active }, 'm-2 rounded-lg')
+                }
+                key={algorithm.name}
+              >
+                <button
+                  className="flex w-full items-center justify-between px-2 py-1.5"
+                  onClick={() => {
+                    setFeedType(algorithm.feedType as HomeFeedType);
+                    Leafwatch.track(HOME.ALGORITHMS.SWITCH_ALGORITHMIC_FEED, {
+                      algorithm: algorithm.feedType
+                    });
+                  }}
+                >
+                  <div className="flex items-center space-x-1.5 text-sm text-gray-700 dark:text-gray-200">
+                    <img
+                      alt={algorithm.name}
+                      className="size-4 rounded"
+                      src={algorithm.image}
+                    />
+                    <div>{algorithm.name}</div>
+                  </div>
+                  {feedType === algorithm.feedType && (
+                    <CheckCircleIcon className="size-4" />
+                  )}
+                </button>
+              </Menu.Item>
+            ))}
+          </Menu.Items>
+        </MenuTransition>
+      </>
+    </Menu>
+  );
+};
+
+export default Algorithms;
diff --git a/apps/web/src/components/Home/Algorithms/List.tsx b/apps/web/src/components/Home/Algorithms/List.tsx
diff --git a/apps/web/src/components/Home/Algorithms/Tabs.tsx b/apps/web/src/components/Home/Algorithms/Tabs.tsx
diff --git a/apps/web/src/components/Home/Algorithms/index.tsx b/apps/web/src/components/Home/Algorithms/index.tsx
diff --git a/apps/web/src/components/Home/FeedType.tsx b/apps/web/src/components/Home/FeedType.tsx
@@ -1,11 +1,5 @@
 import type { Dispatch, FC, SetStateAction } from 'react';
 
-import {
-  CheckCircleIcon,
-  CurrencyDollarIcon,
-  LightBulbIcon,
-  UserGroupIcon
-} from '@heroicons/react/24/outline';
 import { IS_MAINNET } from '@hey/data/constants';
 import { HomeFeedType } from '@hey/data/enums';
 import { HOME } from '@hey/data/tracking';
@@ -27,17 +21,10 @@ const FeedType: FC<FeedTypeProps> = ({ feedType, setFeedType }) => {
   );
 
   return (
-    <div className="flex flex-wrap items-center justify-between px-1 md:px-0">
-      <div className="flex gap-3 overflow-x-auto sm:px-0">
+    <div className="flex flex-wrap items-center justify-between px-3 md:px-0">
+      <div className="flex flex-wrap gap-x-6 overflow-x-auto sm:px-0">
         <TabButton
           active={feedType === HomeFeedType.FOLLOWING}
-          icon={
-            fallbackToCuratedFeed ? (
-              <CheckCircleIcon className="size-4" />
-            ) : (
-              <UserGroupIcon className="size-4" />
-            )
-          }
           name={fallbackToCuratedFeed ? 'Curated Feed' : 'Following'}
           onClick={() => {
             setFeedType(HomeFeedType.FOLLOWING);
@@ -46,7 +33,6 @@ const FeedType: FC<FeedTypeProps> = ({ feedType, setFeedType }) => {
         />
         <TabButton
           active={feedType === HomeFeedType.HIGHLIGHTS}
-          icon={<LightBulbIcon className="size-4" />}
           name="Highlights"
           onClick={() => {
             setFeedType(HomeFeedType.HIGHLIGHTS);
@@ -55,7 +41,7 @@ const FeedType: FC<FeedTypeProps> = ({ feedType, setFeedType }) => {
         />
         <TabButton
           active={feedType === HomeFeedType.PREMIUM}
-          icon={<CurrencyDollarIcon className="size-4" />}
+          hideOnSm
           name="Premium"
           onClick={() => {
             setFeedType(HomeFeedType.PREMIUM);
@@ -68,7 +54,9 @@ const FeedType: FC<FeedTypeProps> = ({ feedType, setFeedType }) => {
         feedType === HomeFeedType.HIGHLIGHTS ? (
           <SeeThroughLens />
         ) : null}
-        {IS_MAINNET ? <Algorithms /> : null}
+        {IS_MAINNET ? (
+          <Algorithms feedType={feedType} setFeedType={setFeedType} />
+        ) : null}
       </div>
     </div>
   );

diff --git a/apps/web/src/components/Home/index.tsx b/apps/web/src/components/Home/index.tsx
@@ -11,7 +11,6 @@ import { useEffect, useState } from 'react';
 import useProfileStore from 'src/store/persisted/useProfileStore';
 
 import AlgorithmicFeed from './AlgorithmicFeed';
-import Tabs from './Algorithms/Tabs';
 import FeedType from './FeedType';
 import Hero from './Hero';
 import Highlights from './Highlights';
@@ -43,10 +42,7 @@ const Home: NextPage = () => {
           {loggedInWithProfile ? (
             <>
               <NewPost />
-              <div className="space-y-3">
-                <FeedType feedType={feedType} setFeedType={setFeedType} />
-                <Tabs feedType={feedType} setFeedType={setFeedType} />
-              </div>
+              <FeedType feedType={feedType} setFeedType={setFeedType} />
               {feedType === HomeFeedType.FOLLOWING ? (
                 <Timeline />
               ) : feedType === HomeFeedType.HIGHLIGHTS ? (

diff --git a/apps/web/src/components/Mod/FeedType.tsx b/apps/web/src/components/Mod/FeedType.tsx
@@ -15,7 +15,7 @@ interface FeedTypeProps {
 
 const FeedType: FC<FeedTypeProps> = ({ feedType, setFeedType }) => {
   return (
-    <div className="flex gap-3 overflow-x-auto sm:px-0">
+    <div className="flex gap-x-6 overflow-x-auto px-3 sm:px-0">
       <TabButton
         active={feedType === ModFeedType.LATEST}
         icon={<ClockIcon className="size-4" />}

diff --git a/apps/web/src/components/Notification/FeedType.tsx b/apps/web/src/components/Notification/FeedType.tsx
@@ -25,7 +25,7 @@ const FeedType: FC<FeedTypeProps> = ({ feedType }) => {
 
   return (
     <div className="flex items-center justify-between">
-      <div className="mt-3 flex gap-3 overflow-x-auto px-5 pb-2 sm:mt-0 sm:px-0 md:pb-0">
+      <div className="mt-3 flex gap-x-6 overflow-x-auto px-5 pb-2 sm:mt-0 sm:px-0 md:pb-0">
         <TabButton
           active={feedType === NotificationTabType.All}
           icon={<BellIcon className="size-4" />}
@@ -49,13 +49,15 @@ const FeedType: FC<FeedTypeProps> = ({ feedType }) => {
         />
         <TabButton
           active={feedType === NotificationTabType.Likes}
+          hideOnSm
           icon={<HeartIcon className="size-4" />}
           name="Likes"
           onClick={() => switchTab(NotificationTabType.Likes)}
           type={NotificationTabType.Likes.toLowerCase()}
         />
         <TabButton
           active={feedType === NotificationTabType.Collects}
+          hideOnSm
           icon={<RectangleStackIcon className="size-4" />}
           name="Collects"
           onClick={() => switchTab(NotificationTabType.Collects)}

diff --git a/apps/web/src/components/Profile/FeedType.tsx b/apps/web/src/components/Profile/FeedType.tsx
@@ -30,7 +30,7 @@ const FeedType: FC<FeedTypeProps> = ({ feedType, setFeedType }) => {
 
   return (
     <div className="flex items-center justify-between">
-      <div className="mt-3 flex gap-3 overflow-x-auto px-5 pb-2 sm:mt-0 sm:px-0 md:pb-0">
+      <div className="mt-3 flex gap-x-6 overflow-x-auto px-5 pb-2 sm:mt-0 sm:px-0 md:pb-0">
         <TabButton
           active={feedType === ProfileFeedType.Feed}
           icon={<PencilSquareIcon className="size-4" />}

diff --git a/apps/web/src/components/Settings/Allowance/index.tsx b/apps/web/src/components/Settings/Allowance/index.tsx
@@ -44,18 +44,16 @@ const AllowanceSettings: NextPage = () => {
       </GridItemFour>
       <GridItemEight>
         <Card className="p-5">
-          <div className="flex items-center gap-3">
+          <div className="flex items-center gap-x-6">
             <TabButton
               active={type === Type.COLLECT_MODULES}
               name="Collect & Follow Modules"
               onClick={() => setType(Type.COLLECT_MODULES)}
-              showOnSm
             />
             <TabButton
               active={type === Type.OPEN_ACTIONS}
               name="Open Actions"
               onClick={() => setType(Type.OPEN_ACTIONS)}
-              showOnSm
             />
           </div>
           {type === Type.COLLECT_MODULES && <CollectModules />}