feat(admin): add bottom navigation items and settings page to admin panel

src/shared/components/TabNav.js

@@ -0,0 +1,28 @@
+'use client';
+
+import React from 'react';
+
+const TabNav = ({ tabs = [], activeTab, onTabChange }) => {
+    return (
+        <div className="flex border-b border-neutral-200 dark:border-neutral-800/70">
+            {tabs.map((tab) => {
+                const isActive = tab.id === activeTab;
+                return (
+                    <button
+                        key={tab.id}
+                        onClick={() => onTabChange(tab.id)}
+                        className={`cursor-pointer px-4 py-2.5 text-[13px] font-medium transition-colors duration-[120ms] ease-out border-b-2 -mb-px ${
+                            isActive
+                                ? 'border-neutral-900 dark:border-white text-neutral-900 dark:text-white'
+                                : 'border-transparent text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
+                        }`}
+                    >
+                        {tab.label}
+                    </button>
+                );
+            })}
+        </div>
+    );
+};
+
+export default TabNav;

src/shared/components/index.js

@@ -29,3 +29,4 @@ export { default as TagInput } from './TagInput';
 export { default as UserAvatar } from './UserAvatar';
 export { default as ColorPicker } from './ColorPicker.client';
 export { default as RelativeDate } from './RelativeDate.client';
+export { default as TabNav } from './TabNav';