Quinta/dotjava
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Basic code editor

Browse Source
This commit is contained in:
Quinta
2024-06-19 23:36:48 +02:00
parent 21c4a4c582
commit 055176d83b
6 changed files with 99 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/_app.tsx
+16
View File
@@ -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
app/editor.tsx
-10
View File
@@ -1,10 +0,0 @@
import Layout from "./layout"
import CodeEditor from "../components/codeeditor"
export default function JavaCodeEditor() {
return (
<Layout>
<CodeEditor />
</Layout>
)
}
app/editor/page.tsx
+7
View File
@@ -0,0 +1,7 @@
import CodeEditor from "../../components/codeeditor"
export default function JavaCodeEditor() {
return (
<CodeEditor />
)
}
app/globals.css
+2
View File
@@ -72,5 +72,7 @@
} }
body { body {
@apply bg-background text-foreground; @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';
} }
} }
app/layout.tsx
+51 -17
View File
@@ -1,25 +1,59 @@
import { Work_Sans } from 'next/font/google' "use client";
import './globals.css' import { useState, useEffect } from "react"
import Navigation from '@/components/navigation'; import Navigation from "../components/navigation"
import Footer from '@/components/footer'; import Footer from "../components/footer"
import "./globals.css"
const work_sans = Work_Sans({ export default function RootLayout({ children }: { children: React.ReactNode }) {
subsets: ['latin'], const [showButton, setShowButton] = useState(false)
display: 'swap',
variable: '--font-work_sans', 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 ( return (
<html lang="en"> <html lang="en">
<head>
<body className={work_sans.variable}> <style jsx global>{`
<Navigation/> html {
scroll-behavior: smooth;
}
`}</style>
</head>
<body className="flex flex-col min-h-[100dvh] scroll-smooth">
<Navigation />
<main className="flex-1">
{children} {children}
<Footer/> </main>
</body> {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> </html>
) )
} }
app/page.tsx
+23 -70
View File
@@ -1,78 +1,31 @@
"use client"
import { useState, useEffect } from "react"
import Link from "next/link"
import JavaText from "./java_tutorial.json" import JavaText from "./java_tutorial.json"
export default function Component() { export default function MainPage() {
const JavaContent = JavaText 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 ( return (
<div className="flex flex-col min-h-[100dvh] scroll-smooth"> <>
<style jsx global>{` {JavaContent.sections.map((section, index) => (
html { <section key={index} id={section.id} className={`py-12 md:py-24 ${index % 2 === 0 ? 'bg-muted' : ''}`}>
scroll-behavior: smooth; <div className="container mx-auto px-4 md:px-6">
} <h2 className="text-3xl font-bold mb-8">{section.title}</h2>
`}</style> <p className="text-lg mb-8">{section.description}</p>
<div className="grid md:grid-cols-2 gap-10">
<main className="flex-1"> {section.items.map((item, itemIndex) => (
{JavaContent.sections.map((section, index) => ( <div key={itemIndex}>
<section key={index} id={section.id} <h3 className="text-2xl font-bold mb-4">{item.title}</h3>
className={`py-12 md:py-24 ${index % 2 === 0 ? 'bg-muted' : ''}`}> <p className="text-muted-foreground mb-6">{item.description}</p>
<div className="container mx-auto px-4 md:px-6"> <div className="bg-background rounded-lg p-6 shadow my-4">
<h2 className="text-3xl font-bold mb-8">{section.title}</h2> <pre className="text-sm font-mono">
<p className="text-lg mb-8">{section.description}</p> <code className="text-pretty">{item.code}</code>
<div className="grid md:grid-cols-2 gap-10"> </pre>
{section.items.map((item, itemIndex) => (
<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">
<pre className="text-sm font-mono">
<code className="text-pretty">{item.code}</code>
</pre>
</div>
<p className="text-pretty">{item.explanation}</p>
</div> </div>
))} <p className="text-pretty">{item.explanation}</p>
</div> </div>
))}
</div> </div>
</section> </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>
) )
} }