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

20
src/app/layout.tsx
View File

@ -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 (
<html lang="en" suppressHydrationWarning>
<body className="h-screen flex flex-col antialiased">
<body className="min-h-svh antialiased">
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<Banner className="h-12 flex items-center justify-center bg-muted text-foreground" />
<main className="flex-1">
<div className="relative flex min-h-svh flex-col">
{children}
</main>
</div>
</ThemeProvider>
</body>
</html>

28
src/components/banner.tsx
View File

@ -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 (
<div className={className} {...props}>
<p className="flex justify-center text-sm">
<a href={link} className="group">
<span className="me-1 text-base leading-none">✨</span>
{text}
<ArrowRightIcon
className="ms-2 -mt-0.5 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5"
size={16}
aria-hidden="true"
/>
</a>
</p>
</div>
<header
{...props}
className={cn("h-12 flex items-center justify-center bg-muted text-foreground", className)}
>
<a href={link} className="group flex justify-center text-sm">
<span className="me-1 text-base leading-none">✨</span>
{text}
<ArrowRightIcon
className="ms-2 -mt-0.5 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5"
size={16}
aria-hidden="true"
/>
</a>
</header>
);
}