Basic code editor
This commit is contained in:
@@ -0,0 +1,16 @@
|
||||
import { AppProps } from 'next/app'
|
||||
import Head from 'next/head'
|
||||
import '../globals.css'
|
||||
|
||||
function MyApp({ Component, pageProps }: AppProps) {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</Head>
|
||||
<Component {...pageProps} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default MyApp
|
||||
@@ -1,10 +0,0 @@
|
||||
import Layout from "./layout"
|
||||
import CodeEditor from "../components/codeeditor"
|
||||
|
||||
export default function JavaCodeEditor() {
|
||||
return (
|
||||
<Layout>
|
||||
<CodeEditor />
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import CodeEditor from "../../components/codeeditor"
|
||||
|
||||
export default function JavaCodeEditor() {
|
||||
return (
|
||||
<CodeEditor />
|
||||
)
|
||||
}
|
||||
@@ -72,5 +72,7 @@
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
}
|
||||
}
|
||||
+50
-16
@@ -1,25 +1,59 @@
|
||||
import { Work_Sans } from 'next/font/google'
|
||||
import './globals.css'
|
||||
import Navigation from '@/components/navigation';
|
||||
import Footer from '@/components/footer';
|
||||
"use client";
|
||||
import { useState, useEffect } from "react"
|
||||
import Navigation from "../components/navigation"
|
||||
import Footer from "../components/footer"
|
||||
import "./globals.css"
|
||||
|
||||
const work_sans = Work_Sans({
|
||||
subsets: ['latin'],
|
||||
display: 'swap',
|
||||
variable: '--font-work_sans',
|
||||
})
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
const [showButton, setShowButton] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
if (window.scrollY > 300) {
|
||||
setShowButton(true)
|
||||
} else {
|
||||
setShowButton(false)
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("scroll", handleScroll)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth"
|
||||
})
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
export default function Layout({ children }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
|
||||
<body className={work_sans.variable}>
|
||||
<Navigation/>
|
||||
<head>
|
||||
<style jsx global>{`
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
`}</style>
|
||||
</head>
|
||||
<body className="flex flex-col min-h-[100dvh] scroll-smooth">
|
||||
<Navigation />
|
||||
<main className="flex-1">
|
||||
{children}
|
||||
<Footer/>
|
||||
</main>
|
||||
{showButton && (
|
||||
<button
|
||||
onClick={scrollToTop}
|
||||
className="fixed bottom-10 right-10 bg-primary text-primary-foreground p-3 rounded-full shadow-lg hover:bg-primary-dark transition"
|
||||
>
|
||||
↑ Top
|
||||
</button>
|
||||
)}
|
||||
<Footer />
|
||||
</body>
|
||||
|
||||
</html>
|
||||
)
|
||||
}
|
||||
|
||||
+5
-52
@@ -1,47 +1,11 @@
|
||||
"use client"
|
||||
import { useState, useEffect } from "react"
|
||||
import Link from "next/link"
|
||||
import JavaText from "./java_tutorial.json"
|
||||
|
||||
export default function Component() {
|
||||
export default function MainPage() {
|
||||
const JavaContent = JavaText
|
||||
const [showButton, setShowButton] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
if (window.scrollY > 300) {
|
||||
setShowButton(true)
|
||||
} else {
|
||||
setShowButton(false)
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("scroll", handleScroll)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth"
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col min-h-[100dvh] scroll-smooth">
|
||||
<style jsx global>{`
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<main className="flex-1">
|
||||
<>
|
||||
{JavaContent.sections.map((section, index) => (
|
||||
<section key={index} id={section.id}
|
||||
className={`py-12 md:py-24 ${index % 2 === 0 ? 'bg-muted' : ''}`}>
|
||||
<section key={index} id={section.id} className={`py-12 md:py-24 ${index % 2 === 0 ? 'bg-muted' : ''}`}>
|
||||
<div className="container mx-auto px-4 md:px-6">
|
||||
<h2 className="text-3xl font-bold mb-8">{section.title}</h2>
|
||||
<p className="text-lg mb-8">{section.description}</p>
|
||||
@@ -50,7 +14,7 @@ export default function Component() {
|
||||
<div key={itemIndex}>
|
||||
<h3 className="text-2xl font-bold mb-4">{item.title}</h3>
|
||||
<p className="text-muted-foreground mb-6">{item.description}</p>
|
||||
<div className="bg-background rounded-lg p-6 shadow-2xl my-4">
|
||||
<div className="bg-background rounded-lg p-6 shadow my-4">
|
||||
<pre className="text-sm font-mono">
|
||||
<code className="text-pretty">{item.code}</code>
|
||||
</pre>
|
||||
@@ -62,17 +26,6 @@ export default function Component() {
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</main>
|
||||
{showButton && (
|
||||
<button
|
||||
onClick={scrollToTop}
|
||||
className="fixed bottom-10 right-10 bg-primary text-primary-foreground p-3 rounded-full shadow-md hover:bg-primary-dark transition"
|
||||
>
|
||||
↑ Top
|
||||
</button>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user