feat: improve mobile experience

src/components/BottomNavigationBar/BottomNavigationBarItem.tsx

@@ -0,0 +1,27 @@
+import { cn } from '@/lib/utils'
+import { Button } from '../ui/button'
+import { MouseEventHandler } from 'react'
+
+export default function BottomNavigationBarItem({
+  children,
+  active = false,
+  onClick
+}: {
+  children: React.ReactNode
+  active?: boolean
+  onClick: MouseEventHandler
+}) {
+  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',
+        active && 'text-primary disabled:opacity-100'
+      )}
+      disabled={active}
+      variant="ghost"
+      onClick={onClick}
+    >
+      {children}
+    </Button>
+  )
+}