loop-decoder/apps/web/src/app/layout.tsx at 3d491fe9576308688e9d58e5836300df28f4e2b8 · 3loop/loop-decoder · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import { Separator } from '@/components/ui/separator'
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import { MainNav } from '@/components/ui/main-nav'
import { Analytics } from '@vercel/analytics/react'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Button } from '@/components/ui/button'
import Link from 'next/link'
import { NpmAlert } from '@/components/NpmAlert'

const navLinks = [
  {
    href: '/calldata',
    match: '/calldata',
    title: 'Calldata',
  },
  {
    href: '/decode',
    match: 'decode',
    title: 'Transaction Decoder',
  },
  {
    href: '/interpret',
    match: 'interpret',
    title: 'Transaction Interpreter',
  },
]

const SOCIAL_LINKS = [
  {
    href: 'https://twitter.com/3loop_io',
    title: 'Twitter',
  },
  {
    href: 'https://github.com/3loop/loop-decoder',
    title: 'Github',
  },
  {
    href: 'https://loop-decoder.3loop.io/',
    title: 'Docs',
  },
]

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Loop Decoder',
  description: 'Demo of Loop Decoder',
}

const NavigationBar = () => {
  return (
    <>
      <div className="w-full mx-auto px-3 lg:px-4 max-w-screen-xl flex justify-between py-4 flex-row items-center space-y-0 md:h-16">
        <h2 className="text-lg font-semibold">Loop Decoder</h2>

        <MainNav className="mx-6 hidden lg:block" navLinks={navLinks} />

        <div className="hidden lg:flex flex-row space-x-4">
          {SOCIAL_LINKS.map((link) => (
            <a
              target="_blank"
              key={link.title}
              href={link.href}
              className="text-sm font-medium text-gray-700 transition-colors hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100"
            >
              {link.title}
            </a>
          ))}
        </div>

        <div className="block lg:hidden">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline">Menu</Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuGroup>
                {navLinks.map((link) => (
                  <DropdownMenuItem asChild key={link.href}>
                    <Link href={link.href}>{link.title}</Link>
                  </DropdownMenuItem>
                ))}
              </DropdownMenuGroup>
              <DropdownMenuSeparator />
              <DropdownMenuGroup>
                {SOCIAL_LINKS.map((link) => (
                  <DropdownMenuItem asChild key={link.title}>
                    <a target="_blank" href={link.href}>
                      {link.title}
                    </a>
                  </DropdownMenuItem>
                ))}
              </DropdownMenuGroup>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
      <Separator />
    </>
  )
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <div className="flex h-screen flex-col">
          <NavigationBar />
          <div className="w-full mx-auto px-3 lg:px-4 max-w-screen-xl h-full py-4">
            <NpmAlert />
            {children}
          </div>
        </div>
        <Analytics />
      </body>
    </html>
  )
}