Calendar Prototype

manifest.json

@@ -0,0 +1,10 @@
+{
+    "name": "New Tab - CustomP",
+    "description": "this is to override the normal create tab command and start the build process",
+    "version": "1.0.0",
+    "manifest_version": 3
+    "chrome_url_overrides" : {
+        "newtab": " to be determined"
+  }
+    "permissions": ["storage"]
+}

src/calandersample.tsk

@@ -0,0 +1,16 @@
+import { useState } from 'react';
+import Calendar from 'react-calendar';
+
+type ValuePiece = Date | null;
+
+type Value = ValuePiece | [ValuePiece, ValuePiece];
+
+function MyApp() {
+  const [value, onChange] = useState<Value>(new Date());
+
+  return (
+    <div>
+      <Calendar onChange={onChange} value={value} />
+    </div>
+  );
+}

src/calanderwidget.tsk

@@ -0,0 +1,9 @@
+import Calendar from 'react-calendar';
+import 'react-calendar/dist/Calendar.css'; 
+
+function MyCalendar() {
+    const [date, setDate] = useState(new Date());return (
+        <div><Calendar onChange={setDate}value={date} />
+        </div>
+    );
+}

src/calanderwidget.tsx

@@ -0,0 +1,9 @@
+import Calendar from 'react-calendar';
+import 'react-calendar/dist/Calendar.css'; 
+
+function MyCalendar() {
+    const [date, setDate] = useState(new Date());return (
+        <div><Calendar onChange={setDate}value={date} />
+        </div>
+    );
+}

src/widgets/calanderwidget.tsx

@@ -0,0 +1,10 @@
+import React, { useState} from 'react';
+import Calendar from 'react-calendar';
+import 'react-calendar/dist/Calendar.css'; 
+
+export function MyCalendar() {
+    const [date, setDate] = useState(new Date());return (
+        <div><Calendar onChange={setDate}value={date} />
+        </div>
+    );
+}

src/widgets/notepadwidget.tsx

@@ -0,0 +1,30 @@
+import React, { useState} from 'react';
+
+// set to export 
+export const NoteForm = ({ onSaveNote }) => {
+    const [noteText, setNoteText] = useState('');
+    const handleChange = (event) => {
+      setNoteText(event.target.value);
+    };
+    // use trim
+    const handleSave = () => {
+      if (noteText.trim()) {
+        onSaveNote(noteText);
+        setNoteText('');
+      }
+    };
+  //set the note area with a save button
+    return (
+      <div>
+        <textarea
+          placeholder="Your notes here."
+          value={noteText}
+          onChange={handleChange}
+          rows="10"
+          cols="40"
+        />
+
+        <button onClick={handleSave}>Save Note</button>
+      </div>
+    );
+  };