Draft/gifted thunder

## GitHub Copilot Chat.md

@@ -0,0 +1,36 @@
+## GitHub Copilot Chat
+
+- Extension Version: 0.23.2 (prod)
+- VS Code: vscode/1.96.4
+- OS: Linux
+
+## Network
+
+User Settings:
+```json
+  "github.copilot.advanced.debug.useElectronFetcher": true,
+  "github.copilot.advanced.debug.useNodeFetcher": false,
+  "github.copilot.advanced.debug.useNodeFetchFetcher": true
+```
+
+Connecting to https://api.github.com:
+- DNS ipv4 Lookup: timed out after 10 seconds
+- DNS ipv6 Lookup: Error (8 ms): getaddrinfo ENOTFOUND api.github.com
+- Proxy URL: None (2 ms)
+- Electron fetch (configured): timed out after 10 seconds
+- Node.js https: timed out after 10 seconds
+- Node.js fetch: timed out after 10 seconds
+- Helix fetch: timed out after 10 seconds
+
+Connecting to https://api.individual.githubcopilot.com/_ping:
+- DNS ipv4 Lookup: timed out after 10 seconds
+- DNS ipv6 Lookup: timed out after 10 seconds
+- Proxy URL: None (16 ms)
+- Electron fetch (configured): timed out after 10 seconds
+- Node.js https: timed out after 10 seconds
+- Node.js fetch: timed out after 10 seconds
+- Helix fetch: timed out after 10 seconds
+
+## Documentation
+
+In corporate networks: [Troubleshooting firewall settings for GitHub Copilot](https://docs.github.com/en/copilot/troubleshooting-github-copilot/troubleshooting-firewall-settings-for-github-copilot).

.codesandbox/tasks.json

@@ -0,0 +1,23 @@
+{
+  // These tasks will run in order when initializing your CodeSandbox project.
+  "setupTasks": [
+    {
+      "command": "pnpm install",
+      "name": "Installing Dependencies"
+    }
+  ],
+
+  // These tasks can be run from CodeSandbox. Running one will open a log in the app.
+  "tasks": {
+    "start": {
+      "name": "start",
+      "command": "pnpm start",
+      "runAtStart": false
+    },
+    "dev": {
+      "name": "dev",
+      "command": "pnpm dev",
+      "runAtStart": true
+    }
+  }
+}

.gitignore

@@ -1,8 +1,9 @@
-node_modules
-.DS_Store
+n.DS_Store
 .env
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
-package-lock.json
+package-lock.json
+node_modules
+node_modules

.idx/dev.nix

@@ -0,0 +1,55 @@
+# To learn more about how to use Nix to configure your environment
+# see: https://firebase.google.com/docs/studio/customize-workspace
+{ pkgs, ... }: {
+  # Which nixpkgs channel to use.
+  channel = "stable-24.05"; # or "unstable"
+
+  # Use https://search.nixos.org/packages to find packages
+  packages = [
+    # pkgs.go
+    # pkgs.python311
+    # pkgs.python311Packages.pip
+    # pkgs.nodejs_20
+    # pkgs.nodePackages.nodemon
+  ];
+
+  # Sets environment variables in the workspace
+  env = {};
+  idx = {
+    # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
+    extensions = [
+      # "vscodevim.vim"
+    ];
+
+    # Enable previews
+    previews = {
+      enable = true;
+      previews = {
+        # web = {
+        #   # Example: run "npm run dev" with PORT set to IDX's defined port for previews,
+        #   # and show it in IDX's web preview panel
+        #   command = ["npm" "run" "dev"];
+        #   manager = "web";
+        #   env = {
+        #     # Environment variables to set for your server
+        #     PORT = "$PORT";
+        #   };
+        # };
+      };
+    };
+
+    # Workspace lifecycle hooks
+    workspace = {
+      # Runs when a workspace is first created
+      onCreate = {
+        # Example: install JS dependencies from NPM
+        # npm-install = "npm install";
+      };
+      # Runs when the workspace is (re)started
+      onStart = {
+        # Example: start a background task to watch and re-build backend code
+        # watch-backend = "npm run watch-backend";
+      };
+    };
+  };
+}

.vscode/launch.json

@@ -0,0 +1,17 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+
+
+        {
+            "name": "Python Debugger: Current File",
+            "type": "debugpy",
+            "request": "launch",
+            "program": "${file}",
+            "console": "integratedTerminal"
+        }
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "IDX.aI.enableInlineCompletion": true,
+    "IDX.aI.enableCodebaseIndexing": true
+}

1-multiplication.spec.js

@@ -0,0 +1,7 @@
+import { multiply } from './1-multiplication';
+
+describe('multiplication', () => {
+    it('should multiply two numbers correctly', () => {
+        expect(multiply(2, 3)).toBe(6);
+    });
+});

2-first-last.js

@@ -0,0 +1,4 @@
+export const firstLast = (items) => {
+    return 'First: ${items[0]}, Last: ${items[items[1]}'
+
+}

App.css

@@ -0,0 +1,72 @@
+#root {
+    margin: 0 auto;
+  }
+
+  body {
+    margin: 0;
+    font-family: "Montserrat";
+  }
+
+  h1, section, header {
+    padding: 2rem;
+  }
+
+  .light {
+    background: aquamarine;
+    color: rgb(0, 24, 164);
+  }
+
+  .dark {
+    background: rgb(0, 24, 164);
+    color: aquamarine;
+  }
+
+  button {
+    padding: 18px;
+    border-radius: 30px;
+    border: 0;
+    background: hotpink;
+    color: white;
+    font-size: 16px;
+    font-weight: bold;
+    font-family: "Montserrat";
+    margin-right: 0.5rem;
+  }
+
+  select {
+    border: none;
+    border-radius: 4px;
+    color: rgb(0, 24, 164);
+    font-size: 16px;
+    font-weight: 600;
+    height: 40px;
+    font-family: 'Montserrat';
+    padding: 0 20px;
+    cursor: pointer;
+
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+  }
+
+  main {
+    padding: 2rem;
+  }
+
+  .thought { 
+    border: 2px solid blue;
+    padding: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    width: 200px;
+    padding-bottom: 2rem;
+  }
+
+  textarea {
+    height: 100px;
+    margin-bottom: 1rem;
+  }

App.jsx

@@ -0,0 +1,17 @@
+import { Header } from "./components/Header"
+import { ThoughtForm } from "./components/ThoughtForm"
+import { ThoughtList } from "./components/ThoughtList"
+
+import "./App.css"
+
+export const App = () => { 
+  return (
+    <>
+      <Header />
+      <main>
+        <ThoughtForm />
+        <ThoughtList />
+      </main>
+    </>
+  )
+}

App.tsx

@@ -0,0 +1,126 @@
+import React, { useState } from 'react';
+import { useEffect } from 'react';
+import Card from './Card.tsx';
+import './index.css'
+import './components/Card.css'
+import './components/Card.tsx'
+import './components/Card.jsx'
+import './components/form.jsx'
+import './components/index.json'
+import './components/main.tsx'
+import './components/App.css'
+import './components/App.js'
+import './components/App.jsx'
+import './components/index.css'
+import './components/index.js'
+import './components/tests.ts'
+import './components/index.html'
+import './components/tests.tsx'
+import './form.css';
+// import { Form } from './form' // Removed as 'Form' is not exported from './form'
+import './App.css';
+import './index.css';
+import { main } from './main.jsx';
+import Main from './main.tsx';
+
+fetch ("https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts")
+fetch ("https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts/THOUGHT_ID/like")
+const [thoughts, setThoughts] = useState<{ message: string }[]>([])
+const handleFormSubmit = (event) => {
+  event.preventDefault()
+  fetch("<https://technigo-thoughts.herokuapp.com/>", {
+    method: "POST",
+    body: JSON.stringify({
+      message: "Hello world",
+    }),
+    headers: { "Content-Type": "application/json" },
+  })
+    .then((res) => res.json())
+    .then((newThought) => {
+      setThoughts((previousThoughts) => [newThought, ...previousThoughts])
+    })
+}
+
+
+// if creating a Review as an object
+interface Review {
+  id: number;
+  text: string;
+  dessert: string;
+}
+
+const App = () => {
+  const [selectedCard, setSelectedCard] = useState<string>('');
+  const [reviews, setReviews] = useState<Review[]>([]); // if implementing an array of reviews
+  const [review, setReview] = useState(''); // if implementing one review only, as string.
+  const [reviewText, setReviewText] = useState('');
+
+  const handleCardSelect = (title: string) => {
+    setSelectedCard(title);
+  };
+
+  // setting a signle review as a text, then clearing the text area
+  const handleReviewSubmit = (e: React.FormEvent) => {
+    e.preventDefault(); // stop from doing its default re render here.
+    setReview(reviewText);
+    setReviewText('');
+  };
+
+  return (
+    <main className="app">
+      <div className="card-container">
+        <Card
+          title="Message App"
+          description="A simple message app"
+          icon="/images/message.svg"
+          color="all"
+          isSelected={selectedCard === "Message App"}
+          onSelect={() => handleCardSelect("Message App")}
+        />
+      </div>
+
+
+      <div className="message-section">
+        <h2>Write a message</h2>
+        <form onSubmit={handleReviewSubmit} className="message-form">
+          <textarea
+            value={reviewText}
+            onChange={(e) => setReviewText(e.target.value)}
+            placeholder={`Write a thought for ${selectedCard || 'your thought'}...`}
+            className="review-input"
+            disabled={!selectedCard} // not able to write anything if not selected a message.
+          />
+          <button
+            type="submit"
+            className="send"
+            disabled={!selectedCard || !reviewText.trim()} // button is disabled if no text or not selected a card
+          >
+            Send
+          </button>
+        </form>
+
+        <div className="send-container">
+
+<h3>Recent message</h3>
+<p className="message-text">{review}</p>
+
+
+
+
+{/* IF creating an array of message with richer info, this is how to loop through and display them
+<h3>Recent Message</h3>
+{message.map(message => (
+<div key={message.id} className="message-card">
+<span className="Message-App">{message.app}</span>
+<p className="message-text">{message.text}</p>
+ </div>
+          ))} */}
+        </div>
+      </div>
+
+
+    </main>
+  )
+}
+
+export default App