From 8f5be0e4376d036b7b17846df3bec638c724a9c7 Mon Sep 17 00:00:00 2001 From: cfngc4594 Date: Fri, 21 Feb 2025 19:49:56 +0800 Subject: [PATCH] feat(layout): implement app layout with banner and code editor components --- src/app/(app)/layout.tsx | 16 ++++++++++++++++ src/app/{ => (app)}/page.tsx | 4 ++-- src/app/layout.tsx | 20 +++++++++----------- src/components/banner.tsx | 28 +++++++++++++++------------- 4 files changed, 42 insertions(+), 26 deletions(-) create mode 100644 src/app/(app)/layout.tsx rename src/app/{ => (app)}/page.tsx (90%) diff --git a/src/app/(app)/layout.tsx b/src/app/(app)/layout.tsx new file mode 100644 index 0000000..1894622 --- /dev/null +++ b/src/app/(app)/layout.tsx @@ -0,0 +1,16 @@ +import { Banner } from "@/components/banner"; + +interface AppLayoutProps { + children: React.ReactNode; +} + +export default function AppLayout({ children }: AppLayoutProps) { + return ( +
+ +
+ {children} +
+
+ ); +} diff --git a/src/app/page.tsx b/src/app/(app)/page.tsx similarity index 90% rename from src/app/page.tsx rename to src/app/(app)/page.tsx index 4838bc6..5328ccb 100644 --- a/src/app/page.tsx +++ b/src/app/(app)/page.tsx @@ -2,7 +2,7 @@ import CodeEditor from "@/components/code-editor"; import { DEFAULT_PROBLEM } from "@/config/problem"; import MdxPreview from "@/components/problem-description"; -export default function Home() { +export default function HomePage() { return (
@@ -12,5 +12,5 @@ export default function Home() {
- ) + ); } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index ef63a75..0679ea5 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,31 +1,29 @@ import "./globals.css"; import type { Metadata } from "next"; -import { Banner } from "@/components/banner"; import { ThemeProvider } from "@/components/theme-provider"; export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "monaco-editor-lsp-next", + description: "A Next.js integration of Monaco Editor with LSP support, free from SSR issues", }; -export default function RootLayout({ - children, -}: Readonly<{ +interface RootLayoutProps { children: React.ReactNode; -}>) { +} + +export default function RootLayout({ children }: RootLayoutProps) { return ( - + - -
+
{children} -
+ diff --git a/src/components/banner.tsx b/src/components/banner.tsx index 2d09b96..b23953d 100644 --- a/src/components/banner.tsx +++ b/src/components/banner.tsx @@ -1,3 +1,4 @@ +import { cn } from "@/lib/utils"; import { siteConfig } from "@/config/site"; import { ArrowRightIcon } from "lucide-react"; @@ -14,18 +15,19 @@ export function Banner({ ...props }: BannerProps) { return ( -
-

- - ✨ - {text} - -

-
+
+ + ✨ + {text} + +
); }