Massbug/judge4c
2
0
Fork 0
mirror of https://github.com/massbug/judge4c.git synced 2025-05-18 07:16:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(layout): implement app layout with banner and code editor components

Browse Source
This commit is contained in:
cfngc4594 2025-02-21 19:49:56 +08:00
parent 9a04f90538
commit 8f5be0e437
4 changed files with 42 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/(app)/layout.tsx Normal file
View File

@ -0,0 +1,16 @@
import { Banner } from "@/components/banner";
interface AppLayoutProps {
children: React.ReactNode;
}
export default function AppLayout({ children }: AppLayoutProps) {
return (
<div className="flex flex-1 flex-col">
<Banner />
<main className="flex flex-1 flex-col">
{children}
</main>
</div>
);
}

4
src/app/page.tsx → src/app/(app)/page.tsx
View File

@ -2,7 +2,7 @@ import CodeEditor from "@/components/code-editor";
import { DEFAULT_PROBLEM } from "@/config/problem"; import { DEFAULT_PROBLEM } from "@/config/problem";
import MdxPreview from "@/components/problem-description"; import MdxPreview from "@/components/problem-description";
export default function Home() { export default function HomePage() {
return ( return (
<div className="h-full flex items-center"> <div className="h-full flex items-center">
<div className="h-full w-1/2"> <div className="h-full w-1/2">
@ -12,5 +12,5 @@ export default function Home() {
<CodeEditor /> <CodeEditor />
</div> </div>
</div> </div>
) );
} }

20
src/app/layout.tsx
View File

@ -1,31 +1,29 @@
import "./globals.css"; import "./globals.css";
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Banner } from "@/components/banner";
import { ThemeProvider } from "@/components/theme-provider"; import { ThemeProvider } from "@/components/theme-provider";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Create Next App", title: "monaco-editor-lsp-next",
description: "Generated by create next app", description: "A Next.js integration of Monaco Editor with LSP support, free from SSR issues",
}; };
export default function RootLayout({ interface RootLayoutProps {
children,
}: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }
export default function RootLayout({ children }: RootLayoutProps) {
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<body className="h-screen flex flex-col antialiased"> <body className="min-h-svh antialiased">
<ThemeProvider <ThemeProvider
attribute="class" attribute="class"
defaultTheme="system" defaultTheme="system"
enableSystem enableSystem
disableTransitionOnChange disableTransitionOnChange
> >
<Banner className="h-12 flex items-center justify-center bg-muted text-foreground" /> <div className="relative flex min-h-svh flex-col">
<main className="flex-1">
{children} {children}
</main> </div>
</ThemeProvider> </ThemeProvider>
</body> </body>
</html> </html>

28
src/components/banner.tsx
View File

@ -1,3 +1,4 @@
import { cn } from "@/lib/utils";
import { siteConfig } from "@/config/site"; import { siteConfig } from "@/config/site";
import { ArrowRightIcon } from "lucide-react"; import { ArrowRightIcon } from "lucide-react";
@ -14,18 +15,19 @@ export function Banner({
...props ...props
}: BannerProps) { }: BannerProps) {
return ( return (
<div className={className} {...props}> <header
<p className="flex justify-center text-sm"> {...props}
<a href={link} className="group"> className={cn("h-12 flex items-center justify-center bg-muted text-foreground", className)}
<span className="me-1 text-base leading-none">✨</span> >
{text} <a href={link} className="group flex justify-center text-sm">
<ArrowRightIcon <span className="me-1 text-base leading-none">✨</span>
className="ms-2 -mt-0.5 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5" {text}
size={16} <ArrowRightIcon
aria-hidden="true" className="ms-2 -mt-0.5 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5"
/> size={16}
</a> aria-hidden="true"
</p> />
</div> </a>
</header>
); );
} }