104 lines
3.8 KiB
TypeScript
104 lines
3.8 KiB
TypeScript
import { Analytics } from "@vercel/analytics/react";
|
|
import { SpeedInsights } from "@vercel/speed-insights/next";
|
|
import type { Metadata } from "next";
|
|
|
|
import { Inter } from "next/font/google";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import "./globals.css";
|
|
|
|
const inter = Inter({ subsets: ["latin"] });
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Studying Next.js...",
|
|
description: "Generated by create next app",
|
|
};
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: Readonly<{
|
|
children: React.ReactNode;
|
|
}>) {
|
|
return (
|
|
<html lang="en">
|
|
<body className={inter.className}>
|
|
<main className="flex min-h-screen flex-col items-center justify-between p-24">
|
|
<div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
|
|
<Link
|
|
href="/"
|
|
className="cursor-pointer rounded-md bg-blue-500 p-2 text-white"
|
|
>
|
|
Home
|
|
</Link>
|
|
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white lg:static lg:h-auto lg:w-auto lg:bg-none dark:from-black dark:via-black">
|
|
<a
|
|
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
|
|
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
By{" "}
|
|
<Image
|
|
src="/vercel.svg"
|
|
alt="Vercel Logo"
|
|
className="dark:invert"
|
|
width={100}
|
|
height={24}
|
|
priority
|
|
/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{children}
|
|
<div className="mb-32 grid text-center lg:mb-0 lg:w-full lg:max-w-5xl lg:grid-cols-4 lg:text-left">
|
|
{linkItemProp.map((linkItem, i) => (
|
|
<a
|
|
href={linkItem.href}
|
|
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
key={`link-item-${i}`}
|
|
>
|
|
<h2 className={`mb-3 text-2xl font-semibold`}>
|
|
{linkItem.title}{" "}
|
|
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
|
->
|
|
</span>
|
|
</h2>
|
|
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
|
{linkItem.sub}
|
|
</p>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</main>
|
|
<SpeedInsights />
|
|
<Analytics />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|
|
|
|
const linkItemProp = [
|
|
{
|
|
href: "https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app",
|
|
title: "Docs",
|
|
sub: "Find in-depth information about Next.js features and API.",
|
|
},
|
|
{
|
|
href: "https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app",
|
|
title: "Learn",
|
|
sub: "Learn about Next.js in an interactive course with quizzes!",
|
|
},
|
|
{
|
|
href: "https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app",
|
|
title: "Templates",
|
|
sub: "Explore starter templates for Next.js.",
|
|
},
|
|
{
|
|
href: "https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app",
|
|
title: "Deploy",
|
|
sub: "Instantly deploy your Next.js site to a shareable URL with Vercel.",
|
|
},
|
|
];
|