feat: explore (#85)

src/components/BottomNavigationBar/BottomNavigationBarItem.tsx

@@ -14,7 +14,7 @@ export default function BottomNavigationBarItem({
   return (
     <Button
       className={cn(
-        'flex shadow-none items-center bg-transparent w-full h-12 xl:w-full xl:h-auto p-3 m-0 xl:py-2 xl:px-4 rounded-lg xl:justify-start text-lg font-semibold [&_svg]:size-full xl:[&_svg]:size-4',
+        'flex shadow-none items-center bg-transparent w-full h-12 p-3 m-0 rounded-lg [&_svg]:size-6',
         active && 'text-primary hover:text-primary'
       )}
       variant="ghost"

src/components/BottomNavigationBar/ExploreButton.tsx

@@ -0,0 +1,13 @@
+import { usePrimaryPage } from '@/PageManager'
+import { Compass } from 'lucide-react'
+import BottomNavigationBarItem from './BottomNavigationBarItem'
+
+export default function ExploreButton() {
+  const { navigate, current } = usePrimaryPage()
+
+  return (
+    <BottomNavigationBarItem active={current === 'explore'} onClick={() => navigate('explore')}>
+      <Compass />
+    </BottomNavigationBarItem>
+  )
+}

src/components/BottomNavigationBar/PostButton.tsx

@@ -1,26 +0,0 @@
-import PostEditor from '@/components/PostEditor'
-import { useNostr } from '@/providers/NostrProvider'
-import { PencilLine } from 'lucide-react'
-import { useState } from 'react'
-import BottomNavigationBarItem from './BottomNavigationBarItem'
-
-export default function PostButton() {
-  const { checkLogin } = useNostr()
-  const [open, setOpen] = useState(false)
-
-  return (
-    <>
-      <BottomNavigationBarItem
-        onClick={(e) => {
-          e.stopPropagation()
-          checkLogin(() => {
-            setOpen(true)
-          })
-        }}
-      >
-        <PencilLine />
-      </BottomNavigationBarItem>
-      <PostEditor open={open} setOpen={setOpen} />
-    </>
-  )
-}

src/components/BottomNavigationBar/index.tsx

@@ -1,8 +1,8 @@
 import { cn } from '@/lib/utils'
 import AccountButton from './AccountButton'
+import ExploreButton from './ExploreButton'
 import HomeButton from './HomeButton'
 import NotificationsButton from './NotificationsButton'
-import PostButton from './PostButton'
 
 export default function BottomNavigationBar() {
   return (
@@ -16,7 +16,7 @@ export default function BottomNavigationBar() {
       }}
     >
       <HomeButton />
-      <PostButton />
+      <ExploreButton />
       <NotificationsButton />
       <AccountButton />
     </div>