FEAT: Added JBEYs necessary components and router for form for lesson_25

lesson_25/JBEY/package.json

@@ -14,11 +14,12 @@
     "@tanstack/react-query": "^5.62.7",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^7.5.3"
+    "react-router-dom": "^7.0.2"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "^2.12.1",
     "@trivago/prettier-plugin-sort-imports": "^5.2.0",
+    "@types/node": "^22.15.17",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.2",
     "@typescript-eslint/eslint-plugin": "^8.18.0",

lesson_25/JBEY/src/components/button/button.scss

@@ -0,0 +1,14 @@
+.programs-section {
+  .custom-button {
+    display: block;
+    margin: 1rem auto 0;
+    padding: 10px 20px;
+    background-color: #ff8000;
+    color: white;
+    font-size: 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+  }
+}

lesson_25/JBEY/src/components/button/button.tsx

@@ -0,0 +1,30 @@
+// This file defines a Button component in React with TypeScript.
+// This is simply the button that you're clicking on to get from page to page.
+import './Button.scss';
+
+type ButtonProps = {
+  label: string;
+  onClick?: () => void;
+  type?: 'button' | 'submit' | 'reset';
+  disabled?: boolean;
+};
+
+const Button: React.FC<ButtonProps> = ({
+  label,
+  onClick,
+  type = 'button',
+  disabled = false,
+}) => {
+  return (
+    <button
+      className="custom-button"
+      onClick={onClick}
+      type={type}
+      disabled={disabled}
+    >
+      {label}
+    </button>
+  );
+};
+
+export default Button;

lesson_25/JBEY/src/components/header/Header.tsx

@@ -20,9 +20,6 @@ export const Header: React.FC = () => {
         <li>
           <a href="#">Contact</a>
         </li>
-        <li>
-          <a href="/add-program">Add New Program</a>
-        </li>
       </ul>
       <div className="header-cta">
         <a className="sign-up-button" href="#">

lesson_25/JBEY/src/components/program/Program.tsx

@@ -1,16 +1,16 @@
-// Program.tsx
-import React from 'react';
+// This is an inferface for ProgramList. ProgramList will import this interface
+// and use it to define the type of the props that it will pass to Program.
 
-interface ProgramProps {
-  title: string;
-  description: string;
+interface ProgramStuff {
+  top: string;
+  bottom: string;
 }
 
-export const Program: React.FC<ProgramProps> = ({title, description}) => {
+export const Program = ({top, bottom}: ProgramStuff) => {
   return (
-    <li className="program">
-      <h3>{title}</h3>
-      <p>{description}</p>
-    </li>
+    <>
+      <h3>{top}</h3>
+      <p>{bottom}</p>
+    </>
   );
 };

lesson_25/JBEY/src/components/programList/ProgramList.scss

@@ -0,0 +1,13 @@
+.programs {
+  display: flex;
+  flex-flow: row wrap;
+  list-style: none;
+  padding: 0;
+  justify-content: space-between;
+}
+
+.program {
+  display: flex;
+  flex-direction: column;
+  max-width: 48%;
+}

lesson_25/JBEY/src/components/programList/ProgramList.tsx

@@ -0,0 +1,57 @@
+// This is a simple program component that takes in two strings from Program.tsx and displays them.
+import './ProgramList.scss';
+
+import {Program} from '../program/Program';
+
+export const ProgramList = () => {
+  const programs = [
+    {
+      top: 'Swine Short Loin',
+      bottom: `Swine short loin burgdoggen ball tip, shank ham hock bacon.
+      Picanha strip steak pork, swine boudin ham meatball meatloaf
+      leberkas sausage. Turkey beef andouille kielbasa rump pastrami
+      biltong chislic alcatra buffalo prosciutto jowl. Pastrami chicken
+      sirloin swine capicola landjaeger jowl boudin pork chop shankle
+      bresaola turducken leberkas ham.`,
+    },
+    {
+      top: 'Bacon Ipsum',
+      bottom: `Bacon ipsum dolor amet leberkas chuck biltong pork loin sirloin
+      bresaola rump frankfurter. Shoulder doner strip steak chuck. Short
+      ribs venison salami chuck sirloin jowl chislic cupim swine cow.
+      Corned beef chuck frankfurter tenderloin venison biltong andouille
+      leberkas kielbasa sausage t-bone turducken fatback. Pork picanha
+      buffalo bacon tail salami meatball, jowl chislic.`,
+    },
+    {
+      top: 'Picanha Swine Jowl',
+      bottom: `Picanha swine jowl meatball boudin pastrami bresaola fatback
+      shankle pork belly cow. Frankfurter ground round shank corned beef
+      chuck. Jerky frankfurter fatback capicola hamburger, pork
+      prosciutto bresaola ham porchetta rump t-bone pancetta tenderloin.
+      Fatback ham hock prosciutto, tenderloin shoulder salami tri-tip
+      leberkas bacon turducken chislic venison sausage frankfurter.`,
+    },
+    {
+      top: 'Kevin Chicken T-Bone',
+      bottom: `Kevin chicken t-bone spare ribs shankle bacon drumstick kielbasa
+      cow jowl doner salami chuck andouille. Rump spare ribs bresaola
+      frankfurter shankle. Bresaola ribeye turducken, cow leberkas
+      boudin biltong sirloin filet mignon ham pork belly shank.
+      Tenderloin sirloin pancetta pork loin shankle venison turducken
+      boudin. Brisket tenderloin salami ham bresaola burgdoggen.`,
+    },
+  ];
+
+  return (
+    <>
+      <ul className="programs">
+        {programs.map((program, index) => (
+          <Program key={index} top={program.top} bottom={program.bottom} />
+        ))}
+      </ul>
+    </>
+  );
+};
+
+export default ProgramList;

lesson_25/JBEY/src/main.tsx

@@ -1,11 +1,13 @@
+// This file defines the router paths.
 import App from './App.tsx';
 import {Home} from './pages/Home/Home.tsx';
+import AcceptedForm from './pages/acceptedForm/acceptedForm.tsx';
+import {NewProgram} from './pages/newProgram/newProgram.tsx';
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import {RouterProvider, createBrowserRouter} from 'react-router-dom';
 
-import AddProgramPage from './components/program/AddProgramPage.tsx';
 import './index.scss';
 
 const queryClient = new QueryClient();
@@ -20,8 +22,12 @@ const router = createBrowserRouter([
         element: <Home />,
       },
       {
-        path: '/add-program',
-        element: <AddProgramPage />,
+        path: '/new-program',
+        element: <NewProgram />,
+      },
+      {
+        path: '/accepted-form',
+        element: <AcceptedForm />,
       },
     ],
   },