Add Next.js frontend

2024-06-18 21:55:45 -04:00
parent 78ed72234a
commit c57fc11c5e
6 changed files with 495 additions and 0 deletions
--- a/reactNextJS/app/layout.js
+++ b/reactNextJS/app/layout.js
@@ -0,0 +1,12 @@
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
--- a/reactNextJS/app/page.js
+++ b/reactNextJS/app/page.js
@@ -0,0 +1,29 @@
+'use client';
+import { useState } from 'react';
+
+const blurb_data = {
+  title: "Fart Man Comes To Town!",
+  blurb: "Will this controversial figure finally cause the downfall of the town? Sally Smith from town center says that she can already smell trouble brewing but other members of the town believe the imminent winds of change will revitalize the towns central business district."
+};
+
+function Blurb({ title, blurb }) {
+  return (<div>
+    <h1>{ title }</h1>
+    <p>{ blurb }</p>
+    <a href="#">Read more...</a>
+  </div>);
+}
+
+export default function HomePage() {
+  const [blurbs, setBlurbs] = useState([ blurb_data ])
+  function addBlurb() {
+    setBlurbs(blurbs.concat([blurb_data]));
+  }
+  return (<>
+    {blurbs.map((blurb, i) => (
+      <Blurb key={i} {...blurb} />
+    ))}
+    <br />
+    <button onClick={addBlurb}>Load More</button>
+  </>);
+}