feat: improve peer list styling

js-peer/package.json

@@ -11,7 +11,7 @@
     "@chainsafe/libp2p-noise": "^15.0.0",
     "@chainsafe/libp2p-yamux": "^6.0.2",
     "@download/blockies": "^1.0.3",
-    "@headlessui/react": "^1.7.19",
+    "@headlessui/react": "^2.0.1",
     "@helia/delegated-routing-v1-http-api-client": "^3.0.1",
     "@heroicons/react": "^2.1.3",
     "@libp2p/bootstrap": "^10.0.21",
@@ -24,6 +24,7 @@
     "@libp2p/websockets": "^8.0.20",
     "@libp2p/webtransport": "^4.0.28",
     "@multiformats/multiaddr": "^12.2.1",
+    "clsx": "^2.1.1",
     "debug": "^4.3.4",
     "it-length-prefixed": "^9.0.4",
     "it-map": "^3.1.0",

js-peer/src/components/alert.tsx

@@ -0,0 +1,111 @@
+import {
+  Description as HeadlessDescription,
+  Dialog as HeadlessDialog,
+  DialogPanel as HeadlessDialogPanel,
+  DialogTitle as HeadlessDialogTitle,
+  Transition as HeadlessTransition,
+  TransitionChild as HeadlessTransitionChild,
+  type DialogProps as HeadlessDialogProps,
+} from '@headlessui/react'
+import clsx from 'clsx'
+import type React from 'react'
+import { Text } from './text'
+
+const sizes = {
+  xs: 'sm:max-w-xs',
+  sm: 'sm:max-w-sm',
+  md: 'sm:max-w-md',
+  lg: 'sm:max-w-lg',
+  xl: 'sm:max-w-xl',
+  '2xl': 'sm:max-w-2xl',
+  '3xl': 'sm:max-w-3xl',
+  '4xl': 'sm:max-w-4xl',
+  '5xl': 'sm:max-w-5xl',
+}
+
+export function Alert({
+  open,
+  onClose,
+  size = 'md',
+  className,
+  children,
+  ...props
+}: { size?: keyof typeof sizes; children: React.ReactNode } & HeadlessDialogProps) {
+  return (
+    <HeadlessTransition appear show={open} {...props}>
+      <HeadlessDialog onClose={onClose}>
+        <HeadlessTransitionChild
+          enter="ease-out duration-100"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto bg-zinc-950/15 px-2 py-2 focus:outline-0 sm:px-6 sm:py-8 lg:px-8 lg:py-16 dark:bg-zinc-950/50" />
+        </HeadlessTransitionChild>
+
+        <div className="fixed inset-0 w-screen overflow-y-auto pt-6 sm:pt-0">
+          <div className="grid min-h-full grid-rows-[1fr_auto_1fr] justify-items-center p-8 sm:grid-rows-[1fr_auto_3fr] sm:p-4">
+            <HeadlessTransitionChild
+              enter="ease-out duration-100"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-100"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <HeadlessDialogPanel
+                className={clsx(
+                  className,
+                  sizes[size],
+                  'row-start-2 w-full rounded-2xl bg-white p-8 shadow-lg ring-1 ring-zinc-950/10 sm:rounded-2xl sm:p-6 dark:bg-zinc-900 dark:ring-white/10 forced-colors:outline'
+                )}
+              >
+                {children}
+              </HeadlessDialogPanel>
+            </HeadlessTransitionChild>
+          </div>
+        </div>
+      </HeadlessDialog>
+    </HeadlessTransition>
+  )
+}
+
+export function AlertTitle({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+  return (
+    <HeadlessDialogTitle
+      {...props}
+      className={clsx(
+        className,
+        'text-balance text-center text-base/6 font-semibold text-zinc-950 sm:text-wrap sm:text-left sm:text-sm/6 dark:text-white'
+      )}
+    />
+  )
+}
+
+export function AlertDescription({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+  return (
+    <HeadlessDescription
+      as={Text}
+      {...props}
+      className={clsx(className, 'mt-2 text-pretty text-center sm:text-left')}
+    />
+  )
+}
+
+export function AlertBody({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+  return <div {...props} className={clsx(className, 'mt-4')} />
+}
+
+export function AlertActions({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+  return (
+    <div
+      {...props}
+      className={clsx(
+        className,
+        'mt-6 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:mt-4 sm:flex-row sm:*:w-auto'
+      )}
+    />
+  )
+}