mj-lab10v2 1.0.0

package/index.js

@@ -0,0 +1,191 @@
+#!/usr/bin/env node
+
+import fs from "fs";
+import path from "path";
+
+const files = {
+  "App.jsx": `
+import React,{useState,useEffect} from "react";
+import "./App.css";
+
+const DataFetcher=()=>{
+  const [data,setData]=useState([]);
+  const [q,setQ]=useState("");
+  const [err,setErr]=useState(null);
+  const [load,setLoad]=useState(false);
+
+  const fetchData=async()=>{
+    setLoad(true);
+
+    try{
+      const res=await fetch("https://jsonplaceholder.typicode.com/users");
+
+      if(!res.ok){
+        throw new Error("Fetch failed");
+      }
+
+      setData(await res.json());
+      setErr(null);
+    }
+    catch(e){
+      setErr(e.message);
+    }
+
+    setLoad(false);
+  };
+
+  useEffect(()=>{
+    fetchData();
+  },[]);
+
+  const filtered=q
+    ? data.filter(d =>
+        d.name.toLowerCase().includes(q.toLowerCase())
+      )
+    : data;
+
+  return(
+    <div>
+      <h1>User Data</h1>
+
+      {err && <div>Error: {err}</div>}
+
+      <input
+        value={q}
+        onChange={e=>setQ(e.target.value)}
+        placeholder="Search..."
+      />
+
+      {load ? (
+        <div>Loading...</div>
+      ) : (
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Email</th>
+              <th>City</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            {filtered.length ? (
+              filtered.map(({id,name,email,address})=>(
+                <tr key={id}>
+                  <td>{name}</td>
+                  <td>{email}</td>
+                  <td>{address.city}</td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan="3">No results</td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      )}
+
+      <button onClick={fetchData}>
+        Refresh
+      </button>
+    </div>
+  );
+};
+
+export default DataFetcher;
+`,
+
+  "App.css": `
+*{
+  padding:0;
+  margin:0;
+  box-sizing:border-box;
+}
+
+body{
+  font-family:Arial,sans-serif;
+  margin:0;
+  padding:0;
+  background-color:#f4f4f4;
+}
+
+button{
+  border-radius:5px;
+  border:none;
+  cursor:pointer;
+  color:#fff;
+  font-weight:bold;
+  background:red;
+  margin-top:20px;
+  padding:10px;
+}
+
+.data-fetcher{
+  width:80%;
+  margin:0 auto;
+  padding:20px;
+  background-color:#fff;
+  border-radius:8px;
+  box-shadow:0 4px 8px rgba(0,0,0,0.1);
+}
+
+h1{
+  text-align:center;
+  color:#333;
+}
+
+.search-bar{
+  margin:20px 0;
+  text-align:center;
+}
+
+.search-bar input{
+  padding:8px;
+  width:60%;
+  font-size:16px;
+  border:1px solid #000;
+  border-radius:4px;
+}
+
+table{
+  width:100%;
+  margin-top:20px;
+  border-collapse:collapse;
+}
+
+table th,
+table td{
+  padding:10px;
+  text-align:left;
+  border-bottom:1px solid #ddd;
+}
+
+.error{
+  color:red;
+  text-align:center;
+}
+`,
+
+  "main.jsx": `
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.jsx";
+
+createRoot(document.getElementById("root")).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+`
+};
+
+for (const [fileName, content] of Object.entries(files)) {
+  fs.writeFileSync(
+    path.join(process.cwd(), fileName),
+    content.trim()
+  );
+}
+
+console.log(".");

package/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "mj-lab10v2",
+  "version": "1.0.0",
+  "type": "module",
+  "bin": {
+    "mj-lab10v2": "index.js"
+  }
+}