feat: following's favoriate relays

src/pages/primary/ExplorePage/index.tsx

@@ -1,10 +1,17 @@
+import FollowingFavoriteRelayList from '@/components/FollowingFavoriteRelayList'
 import RelayList from '@/components/RelayList'
 import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
+import { cn } from '@/lib/utils'
+import { useDeepBrowsing } from '@/providers/DeepBrowsingProvider'
 import { Compass } from 'lucide-react'
-import { forwardRef } from 'react'
+import { forwardRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
+type TExploreTabs = 'following' | 'all'
+
 const ExplorePage = forwardRef((_, ref) => {
+  const [tab, setTab] = useState<TExploreTabs>('following')
+
   return (
     <PrimaryPageLayout
       ref={ref}
@@ -12,7 +19,8 @@ const ExplorePage = forwardRef((_, ref) => {
       titlebar={<ExplorePageTitlebar />}
       displayScrollToTopButton
     >
-      <RelayList />
+      <Tabs value={tab} setValue={setTab} />
+      {tab === 'following' ? <FollowingFavoriteRelayList /> : <RelayList />}
     </PrimaryPageLayout>
   )
 })
@@ -29,3 +37,43 @@ function ExplorePageTitlebar() {
     </div>
   )
 }
+
+function Tabs({
+  value,
+  setValue
+}: {
+  value: TExploreTabs
+  setValue: (value: TExploreTabs) => void
+}) {
+  const { t } = useTranslation()
+  const { deepBrowsing, lastScrollTop } = useDeepBrowsing()
+
+  return (
+    <div
+      className={cn(
+        'sticky top-12 bg-background z-30 duration-700 transition-transform select-none',
+        deepBrowsing && lastScrollTop > 800 ? '-translate-y-[calc(100%+12rem)]' : ''
+      )}
+    >
+      <div className="flex">
+        <div
+          className={`w-1/2 text-center py-2 font-semibold clickable cursor-pointer rounded-lg ${value === 'following' ? '' : 'text-muted-foreground'}`}
+          onClick={() => setValue('following')}
+        >
+          {t("Following's Favorites")}
+        </div>
+        <div
+          className={`w-1/2 text-center py-2 font-semibold clickable cursor-pointer rounded-lg ${value === 'all' ? '' : 'text-muted-foreground'}`}
+          onClick={() => setValue('all')}
+        >
+          {t('All')}
+        </div>
+      </div>
+      <div
+        className={`w-1/2 px-4 sm:px-6 transition-transform duration-500 ${value === 'all' ? 'translate-x-full' : ''}`}
+      >
+        <div className="w-full h-1 bg-primary rounded-full" />
+      </div>
+    </div>
+  )
+}