60 lines
1.3 KiB
TypeScript
60 lines
1.3 KiB
TypeScript
import type { Metadata } from "next";
|
|
import React from "react";
|
|
|
|
import "./globals.css";
|
|
import Form from "next/form";
|
|
import Link from "next/link";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Next.js Address Book",
|
|
description: "From the RRv7 tutorial",
|
|
};
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: Readonly<{
|
|
children: React.ReactNode;
|
|
}>) {
|
|
return (
|
|
<html lang="en">
|
|
<body>
|
|
<div id="sidebar">
|
|
<h1>React Router Contacts</h1>
|
|
<div>
|
|
<Form id="search-form" role="search" action="." formMethod="get">
|
|
<input
|
|
aria-label="Search contacts"
|
|
id="q"
|
|
name="q"
|
|
placeholder="Search"
|
|
type="search"
|
|
/>
|
|
<div
|
|
aria-hidden
|
|
hidden={true}
|
|
id="search-spinner"
|
|
/>
|
|
</Form>
|
|
<Form action="." formMethod="post">
|
|
<button type="submit">New</button>
|
|
</Form>
|
|
</div>
|
|
<nav>
|
|
<ul>
|
|
<li>
|
|
<Link href={`/contacts/1`}>Your Name</Link>
|
|
</li>
|
|
<li>
|
|
<Link href={`/contacts/2`}>Your Friend</Link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<div id={'detail'}>
|
|
{children}
|
|
</div>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|