working now, layout.tsx has issues

src/Example Code/BasicClassComponent/index.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types' //ES6
+import styles from './styles.module.css'
+
+export default class BasicClassComponent extends Component {
+    constructor(props){
+        super(props) 
+        this.state = {
+        
+        }
+    }
+
+    render(){
+        return (
+            <div >
+                <h1>Basic Component</h1>
+            </div>
+        )
+    }
+}
+
+BasicClassComponent.propTypes = {
+
+};
+

src/Example Code/BasicClassComponent/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "basicclasscomponent",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index",
+  "author": {
+    "name": "Don Strawsburg",
+    "email": "don@goforward.group",
+    "url": "https://goforward.group/"
+  },
+  "contributors": [
+    {
+      "name": "Don Strawsburg",
+      "email": "don@goforward.group",
+      "url": "https://goforward.group/"
+    },
+    {
+      "name": "Sean Strawsburg",
+      "email": "sean@goforward.group",
+      "url": "https://goforward.group/"
+    }
+  ]
+}

src/Example Code/BasicFunctionComponent /index.js

@@ -0,0 +1,10 @@
+import styles from './styles.module.css'
+
+export const BasicFunctionComponent = () => {
+    return (
+        <div>
+            
+        </div>
+    )
+}
+export default BasicFunctionComponent;

src/Example Code/BasicFunctionComponent /package.json

@@ -0,0 +1,23 @@
+{
+  "name": "basicfunctioncomponent",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index",
+  "author": {
+    "name": "Don Strawsburg",
+    "email": "don@goforward.group",
+    "url": "https://goforward.group/"
+  },
+  "contributors": [
+    {
+      "name": "Don Strawsburg",
+      "email": "don@goforward.group",
+      "url": "https://goforward.group/"
+    },
+    {
+      "name": "Sean Strawsburg",
+      "email": "sean@goforward.group",
+      "url": "https://goforward.group/"
+    }
+  ]
+}

src/Example Code/Card/index.css

@@ -0,0 +1,14 @@
+.card {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    max-width: 80%;
+    margin: auto;
+    text-align: center;
+    padding: 1em;
+  }
+  
+  .close {
+    font-size: 1.5em;
+    float: right;
+    cursor: pointer;
+  }
+   

src/Example Code/Card/index.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import "./index.css";
+class Card extends React.Component {
+
+constructor( props ) {
+    super(props)
+    this.state = { show : true };
+}
+
+render() {
+        return (
+            <div className="card" >
+                <span
+                    className="close" onClick={this.props.dataclick}
+                    datatitle={this.props.title}>&times;</span>
+                <h3>{this.props.title}</h3>
+                <p>{this.props.content}</p>
+            </div>
+        );
+    }
+
+}
+export default Card;

src/Example Code/CardList/index.css

@@ -0,0 +1,3 @@
+.cardList {
+    
+    }

src/Example Code/CardList/index.js

@@ -0,0 +1,38 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import Card from "../Card/";
+import data from "../../data.json";
+
+class CardList extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = { cards: data.cards };
+    }
+
+    remove() {
+
+    }
+    render() {
+        return (
+            <div>
+                {
+                    this.state.cards.map((card, index) => {
+                        return <Card
+                            key={index}
+                            title={card.title}
+                            content={card.content}
+                            dataclick={this.remove}
+                        />
+                    })
+                  
+                });
+            }
+
+            </div>
+        );
+    }
+
+}
+export default CardList;
+

src/Example Code/Weather/index.js

@@ -0,0 +1,38 @@
+import React from "react";
+import styles from "./styles.module.css";
+class Weather extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      show: true,
+     
+    };
+    this.props = {
+      name : '',
+      temperature : '',
+      temperatureUnit : '',
+      detailedForecast : '',
+    }
+  }
+
+  render() {
+    return (
+      <div className="card">
+        <span
+          className="close"
+          onClick={this.props.dataclick}
+          datatitle={this.props.title}
+        >&times;
+        </span>
+      
+        <p>{this.props.name}</p>
+        <p>{this.props.temperature}</p>
+        <p>{this.props.temperatureUnit}</p>
+        <p>{this.props.detailedForecast}</p>
+      </div>
+    );
+  }
+  
+}
+
+export default Weather;

src/Example Code/Weather/styles.module.css

@@ -0,0 +1,14 @@
+.card {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    max-width: 80%;
+    margin: auto;
+    text-align: center;
+    padding: 1em;
+  }
+  
+  .close {
+    font-size: 1.5em;
+    float: right;
+    cursor: pointer;
+  }
+   

src/Example Code/WeatherList/index.css

@@ -0,0 +1,3 @@
+.cardList {
+    
+    }

src/Example Code/WeatherList/index.js

@@ -0,0 +1,54 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import Weather from "../Weather";
+
+class WeatherList extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = { periods: [] };
+    }
+
+    remove() {
+
+    }
+    render() {
+        return (
+            <div>
+                {
+                    this.state.periods.map((period, index) => {
+                        return <Weather
+                            key={index}
+                            name={period.name}
+                            temperature={period.temperature}
+                            temperatureUnit={period.temperatureUnit}
+                            detailedForecast={period.detailedForecast}
+                            dataclick={this.remove}
+                        />
+                    })
+                  
+                });
+            }
+
+            </div>
+        );
+    }
+    getData() {
+        fetch("https://api.weather.gov/gridpoints/MLB/25,69/forecast")
+           .then(response => response.json())       
+           .then(data => this.setState({ periods : data.properties.periods}))
+           .then(data => console.log(data));  
+           this.setState({
+               detailedForcast : 'Test Detailed forcast',
+               name : 'Test data',
+               temperature : '90',
+               temperatureUnit : 'Celcius'});
+   
+       }
+     
+     componentDidMount() { 
+         this.getData();
+     }
+
+}
+export default WeatherList;

src/Example Code/fetchData.tsx

@@ -0,0 +1,11 @@
+export default async function Page() {
+    let data = await fetch('https://api.vercel.app/blog')
+    let posts = await data.json()
+    return (
+      <ul>
+        {posts.map((post) => (
+          <li key={post.id}>{post.title}</li>
+        ))}
+      </ul>
+    )
+  }

src/app/layout-test.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import { Providers } from './providers'
+import "./globals.css";
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+
+export const metadata: Metadata = {
+  title: "Ballistic Builder",
+  description: "Freedom On",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`} >
+    {/*   <Providers>{children}</Providers> */}
+      </body>
+    </html>
+  );
+}

src/app/layout.tsx

@@ -1,34 +1,16 @@
-import type { Metadata } from "next";
-import localFont from "next/font/local";
-import { Providers } from './providers'
-import "./globals.css";
-
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
-});
-
-export const metadata: Metadata = {
-  title: "Ballistic Builder",
-  description: "Freedom On",
-};
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
 
 export default function RootLayout({
   children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+}: {
+  children: React.ReactNode
+}) {
   return (
     <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`} >
-      <Providers>{children}</Providers>
-      </body>
+      <body>{children}</body>
     </html>
-  );
+  )
 }