Skip to content

Commit b5e05e6

Browse files
2color2color
committed
fix: simplify nav bar and load chat on index route
1 parent 9de8413 commit b5e05e6

File tree

4 files changed

+61
-152
lines changed

4 files changed

+61
-152
lines changed

‎js-peer/src/components/connection-info-button.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { ServerIcon } from '@heroicons/react/24/outline'
2+
import React from 'react'
3+
4+
interface ConnectionInfoButtonProps {
5+
onClick: () => void
6+
}
7+
8+
export default function ConnectionInfoButton({ onClick }: ConnectionInfoButtonProps) {
9+
return (
10+
<button
11+
type="button"
12+
onClick={onClick}
13+
className="rounded-md bg-indigo-600 py-1.5 px-2 sm:px-3 text-xs sm:text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 flex items-center"
14+
>
15+
<ServerIcon className="h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2" aria-hidden="true" />
16+
<span className="hidden sm:inline">libp2p node info</span>
17+
<span className="sm:hidden">Node</span>
18+
</button>
19+
)
20+
}

‎js-peer/src/components/nav.tsx‎

Lines changed: 10 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,13 @@
11
import { Fragment } from 'react'
2-
import { Disclosure, Menu, Transition } from '@headlessui/react'
2+
import { Disclosure, DisclosureButton, DisclosurePanel, Menu, Transition } from '@headlessui/react'
33
import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/react/24/outline'
44
import Link from 'next/link'
55
import Image from 'next/image'
66
import { useRouter } from 'next/router'
77

88
const navigationItems = [
9-
{ name: 'Chat', href: '/chat' },
109
{ name: 'Source', href: 'https://github.com/libp2p/universal-connectivity' },
1110
]
12-
const userNavigation = [
13-
{ name: 'Your Profile', href: '#' },
14-
{ name: 'Settings', href: '#' },
15-
{ name: 'Sign out', href: '#' },
16-
]
1711

1812
function classNames(...classes: string[]) {
1913
return classes.filter(Boolean).join(' ')
@@ -27,16 +21,19 @@ export default function Navigation({ connectionInfoButton }: { connectionInfoBut
2721
{({ open }) => (
2822
<>
2923
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
30-
<div className="flex h-16 justify-between">
31-
<div className="flex">
24+
<div className="flex h-16 justify-between items-center">
25+
<div className="flex items-center">
3226
<div className="flex flex-shrink-0 items-center">
3327
<Image src="/libp2p-logo.svg" alt="libp2p logo" height="46" width="46" />
3428
<div className="ml-3 flex items-center">
3529
<h1 className="text-xl font-semibold text-gray-900 hidden sm:block">Universal Connectivity</h1>
3630
<Image src="/libp2p-hero.svg" alt="libp2p hero" height="24" width="24" className="ml-2 hidden sm:block" />
3731
</div>
3832
</div>
39-
<div className="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
33+
</div>
34+
35+
<div className="flex items-center space-x-4">
36+
<div className="flex space-x-4">
4037
{navigationItems.map((item) => (
4138
<Link key={item.href} href={item.href} legacyBehavior>
4239
<a
@@ -45,7 +42,7 @@ export default function Navigation({ connectionInfoButton }: { connectionInfoBut
4542
router.pathname === item.href
4643
? 'border-indigo-500 text-gray-900'
4744
: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
48-
'inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium',
45+
'inline-flex items-center px-1 pt-1 text-sm font-medium',
4946
)}
5047
aria-current={router.pathname === item.href ? 'page' : undefined}
5148
>
@@ -54,100 +51,12 @@ export default function Navigation({ connectionInfoButton }: { connectionInfoBut
5451
</Link>
5552
))}
5653
</div>
57-
</div>
58-
<div className="hidden sm:ml-6 sm:flex sm:items-center">
59-
{connectionInfoButton}
60-
61-
{/* <button
62-
type="button"
63-
className="ml-3 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
64-
>
65-
<span className="sr-only">View notifications</span>
66-
<BellIcon className="h-6 w-6" aria-hidden="true" />
67-
</button> */}
68-
69-
{/* Profile dropdown */}
70-
<Menu as="div" className="relative ml-3">
71-
<div>
72-
</div>
73-
<Transition
74-
as={Fragment}
75-
enter="transition ease-out duration-200"
76-
enterFrom="transform opacity-0 scale-95"
77-
enterTo="transform opacity-100 scale-100"
78-
leave="transition ease-in duration-75"
79-
leaveFrom="transform opacity-100 scale-100"
80-
leaveTo="transform opacity-0 scale-95"
81-
>
82-
<Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
83-
{userNavigation.map((item) => (
84-
<Menu.Item key={item.name}>
85-
{({ active }) => (
86-
<a
87-
href={item.href}
88-
className={classNames(
89-
active ? 'bg-gray-100' : '',
90-
'block px-4 py-2 text-sm text-gray-700',
91-
)}
92-
>
93-
{item.name}
94-
</a>
95-
)}
96-
</Menu.Item>
97-
))}
98-
</Menu.Items>
99-
</Transition>
100-
</Menu>
101-
</div>
102-
<div className="-mr-2 flex items-center sm:hidden">
103-
{/* Mobile menu button */}
104-
<Disclosure.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
105-
<span className="sr-only">Open main menu</span>
106-
{open ? (
107-
<XMarkIcon className="block h-6 w-6" aria-hidden="true" />
108-
) : (
109-
<Bars3Icon className="block h-6 w-6" aria-hidden="true" />
110-
)}
111-
</Disclosure.Button>
112-
</div>
113-
</div>
114-
</div>
115-
116-
<Disclosure.Panel className="sm:hidden">
117-
<div className="space-y-1 pt-2 pb-3">
118-
<div className="px-4 py-2">
11954
<div className="flex items-center">
120-
<h1 className="text-lg font-semibold text-gray-900">Universal Connectivity</h1>
121-
<Image src="/libp2p-hero.svg" alt="libp2p hero" height="20" width="20" className="ml-2" />
55+
{connectionInfoButton}
12256
</div>
12357
</div>
124-
{navigationItems.map((item) => (
125-
<Link key={item.href} href={item.href} legacyBehavior>
126-
<Disclosure.Button
127-
key={item.href}
128-
className={classNames(
129-
router.pathname === item.href
130-
? 'border-indigo-500 bg-indigo-50 text-indigo-700'
131-
: 'border-transparent text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800',
132-
'block border-l-4 py-2 pl-3 pr-4 text-base font-medium',
133-
)}
134-
aria-current={router.pathname === item.href ? 'page' : undefined}
135-
>
136-
{item.name}
137-
</Disclosure.Button>
138-
</Link>
139-
))}
14058
</div>
141-
<div className="border-t border-gray-200 pt-4 pb-3">
142-
<div className="flex items-center px-4">
143-
{connectionInfoButton && (
144-
<div className="flex-shrink-0">
145-
{connectionInfoButton}
146-
</div>
147-
)}
148-
</div>
149-
</div>
150-
</Disclosure.Panel>
59+
</div>
15160
</>
15261
)}
15362
</Disclosure>

‎js-peer/src/pages/chat.tsx‎

Lines changed: 0 additions & 43 deletions
This file was deleted.

‎js-peer/src/pages/index.tsx‎

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,35 @@
1-
import { useEffect } from 'react'
2-
import { useRouter } from 'next/router'
1+
import Head from 'next/head'
2+
import Nav from '@/components/nav'
3+
import ChatContainer from '@/components/chat'
4+
import ConnectionPanel from '@/components/connection-panel'
5+
import { useState } from 'react'
6+
import { useLibp2pContext } from '@/context/ctx'
7+
import ConnectionInfoButton from '@/components/connection-info-button'
38

4-
export default function Home() {
5-
const router = useRouter()
9+
export default function Chat() {
10+
const [isConnectionPanelOpen, setIsConnectionPanelOpen] = useState(false)
611

7-
useEffect(() => {
8-
router.replace('/chat')
9-
}, [router])
12+
const handleOpenConnectionPanel = () => {
13+
setIsConnectionPanelOpen(true)
14+
}
1015

11-
return null
16+
return (
17+
<>
18+
<Head>
19+
<title>Universal Connectivity</title>
20+
<meta name="description" content="universal connectivity" />
21+
<meta name="viewport" content="width=device-width, initial-scale=1" />
22+
<link rel="icon" href="/favicon.ico" />
23+
</Head>
24+
<main className="min-h-full flex flex-col">
25+
<Nav connectionInfoButton={<ConnectionInfoButton onClick={handleOpenConnectionPanel} />} />
26+
<div className="flex-1 mx-auto w-full max-w-7xl px-0 sm:px-2 pt-0 pb-2 lg:px-8">
27+
<div className="bg-white shadow-sm rounded-lg overflow-hidden border border-gray-200">
28+
<ChatContainer />
29+
</div>
30+
</div>
31+
</main>
32+
<ConnectionPanel isOpen={isConnectionPanelOpen} onClose={() => setIsConnectionPanelOpen(false)} />
33+
</>
34+
)
1235
}

0 commit comments

Comments
 (0)