index.tsx raw

   1  import Relay from '@/components/Relay'
   2  import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
   3  import { normalizeUrl, simplifyUrl } from '@/lib/url'
   4  import { useRelayAdmin } from '@/providers/RelayAdminProvider'
   5  import { TPageRef } from '@/types'
   6  import { Server, Shield } from 'lucide-react'
   7  import { forwardRef, lazy, Suspense, useMemo } from 'react'
   8  
   9  const RelayAdminPanel = lazy(() => import('./admin'))
  10  
  11  const RelayPage = forwardRef<TPageRef>(({ url }: { url?: string }, ref) => {
  12    const normalizedUrl = useMemo(() => (url ? normalizeUrl(url) : undefined), [url])
  13    const { isEmbedded, isAdmin, isLoading } = useRelayAdmin()
  14  
  15    const showAdmin = isEmbedded && isAdmin && !normalizedUrl
  16  
  17    return (
  18      <PrimaryPageLayout
  19        pageName="relay"
  20        titlebar={<RelayPageTitlebar url={normalizedUrl} showAdmin={showAdmin} />}
  21        displayScrollToTopButton
  22        ref={ref}
  23      >
  24        {normalizedUrl ? (
  25          <Relay url={normalizedUrl} />
  26        ) : showAdmin ? (
  27          <Suspense
  28            fallback={
  29              <div className="flex items-center justify-center py-12 text-muted-foreground">
  30                Loading admin...
  31              </div>
  32            }
  33          >
  34            <RelayAdminPanel />
  35          </Suspense>
  36        ) : isEmbedded && !isLoading ? (
  37          <div className="flex items-center justify-center py-12 text-muted-foreground">
  38            Log in as admin to access relay management.
  39          </div>
  40        ) : (
  41          <div className="flex items-center justify-center py-12 text-muted-foreground">
  42            Select a relay to view its information.
  43          </div>
  44        )}
  45      </PrimaryPageLayout>
  46    )
  47  })
  48  RelayPage.displayName = 'RelayPage'
  49  export default RelayPage
  50  
  51  function RelayPageTitlebar({ url, showAdmin }: { url?: string; showAdmin?: boolean }) {
  52    return (
  53      <div className="flex items-center gap-2 px-3 h-full">
  54        {showAdmin ? <Shield /> : <Server />}
  55        <div className="text-lg font-semibold truncate">
  56          {showAdmin ? 'Relay Admin' : simplifyUrl(url ?? '')}
  57        </div>
  58      </div>
  59    )
  60  }
  61