eexiv/src/app/layout.tsx

112 lines
3.9 KiB
TypeScript
Raw Normal View History

2024-02-09 22:59:43 -08:00
import type { Metadata } from 'next'
import { Inter, Zilla_Slab } from 'next/font/google'
import './globals.css'
import styles from './home.module.css'
import Link from 'next/link'
import SearchBar from './components/SearchBar'
2024-02-10 00:43:22 -08:00
import Container from './container/Container'
import MobileMenu from './components/MobileMenu'
2024-02-11 13:17:54 -08:00
import { ToastContainer } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'
2024-02-09 19:00:26 -08:00
2024-02-10 00:43:22 -08:00
/* The default font is Inter. If you want to use Zilla Slab (or any other Google Font,
which are pre-provided by Next.js in the 'next/font/google' module), you need to
import it, as is done here with Zilla Slab, and then execute a CSS exploit by assigning
the tag className={zillaSlab.className} to set the font family of an element to your desired font.
DO NOT directly set the font family in CSS using font-family. You will break EVERYTHING!
*/
2024-02-09 22:59:43 -08:00
const inter = Inter({ subsets: ['latin'] })
const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500', '700'] })
2024-02-09 19:00:26 -08:00
export const metadata: Metadata = {
2024-02-09 23:07:46 -08:00
title: 'eeXiv^2',
2024-02-11 02:06:29 -08:00
description: 'arXiv just got better',
2024-02-09 22:59:43 -08:00
}
2024-02-09 19:00:26 -08:00
export default function RootLayout({
2024-02-09 23:07:46 -08:00
children,
2024-02-09 19:00:26 -08:00
}: Readonly<{
2024-02-09 23:07:46 -08:00
children: React.ReactNode
2024-02-09 19:00:26 -08:00
}>) {
2024-02-09 23:07:46 -08:00
return (
<html lang='en'>
<body className={inter.className}>
2024-02-11 13:17:54 -08:00
<ToastContainer />
2024-02-09 23:07:46 -08:00
<div className={styles.header}>
2024-02-10 21:05:14 -08:00
<div className='max-w-[1200px] flex flex-nowrap mx-auto justify-between items-center'>
2024-02-10 22:54:11 -08:00
<Link href='/affiliation/1280-eecs'>
2024-02-11 02:08:55 -08:00
<img
className='h-[100px] mt-4'
src='/img/logos/eecs-wordmark.png'
2024-02-11 13:17:54 -08:00
alt='EECS'
2024-02-11 02:08:55 -08:00
/>
2024-02-10 22:54:11 -08:00
</Link>
2024-02-10 21:05:14 -08:00
<p className={`max-w-[600px] hidden md:inline`}>
We gratefully acknowledge support from our volunteer peer
reviewers, member institutions, and all{' '}
<a
2024-02-11 02:06:29 -08:00
href='https://github.com/couscousdude/eeXiv-2/graphs/contributors'
target='_blank'
>
open-source contributors
</a>
.
</p>
2024-02-10 21:05:14 -08:00
</div>
2024-02-09 23:07:46 -08:00
</div>
2024-02-10 21:05:14 -08:00
<div className={`${styles.banner} w-full h-[100px] mb-[50px]`}>
<div className='max-w-[1200px] flex justify-between mx-auto items-center pt-3 flex-nowrap'>
<h1 className={`${styles.title} ${zillaSlab.className} mx-10`}>
<Link href='/' className='no-link-style'>
2024-02-11 23:12:19 -08:00
eeXiv
</Link>
</h1>
2024-02-10 21:05:14 -08:00
<div className='hidden md:inline'>
<SearchBar />
</div>
<div className='md:hidden'>
<MobileMenu />
</div>
2024-02-10 21:05:14 -08:00
</div>
2024-02-09 23:07:46 -08:00
</div>
<Container>{children}</Container>
2024-02-09 23:07:46 -08:00
<footer>
<div className={styles.footerContent}>
<ul>
<li key='about'>
<Link href='/about'>About</Link>
</li>
<li key='help'>
<Link href='/help'>Help</Link>
</li>
<li key='contact'>
<Link href='/contact'>Contact</Link>
</li>
<li key='subscribe'>
<Link href='/subscribe'>Subscribe</Link>
</li>
<li key='copyright'>
<Link href='/legal/copyright'>Copyright</Link>
</li>
<li key='privacy'>
<Link href='/legal/privacy'>Privacy Policy</Link>
</li>
<li key='accessibility'>
<Link href='/help/accessibility'>Accessibility</Link>
</li>
<li key='status'>
<Link href='/status'>eeXiv status</Link>
</li>
<li key='notifications'>
<Link href='/status/notifications'>
Get status notifications
</Link>
</li>
</ul>
2024-02-09 23:07:46 -08:00
</div>
</footer>
</body>
</html>
)
2024-02-09 19:00:26 -08:00
}