1# Daily Schedule & Chores Tracker
2A flexible and interactive analogue clock schedule and chore tracker designed for my 8-year-old. This React component helps manage daily routines and tasks, featuring a visually appealing clock interface and a dynamic chore list.
3
4## Features
11
12## Installation
13To use the component, include it in your React project and provide the necessary props.
14```ts
15import AnalogueScheduleClock from './path-to-component';
1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useMemo, useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5interface ScheduleItem {
63};
64
65const ScheduleSegment: React.FC<{
66 startMinutes: number;
67 endMinutes: number;
90};
91
92const ClockHand: React.FC<{ angle: number; length: number; width: number; color: string }> = (
93 { angle, length, width, color },
94) => (
115};
116
117const Legend: React.FC<{ schedule: ScheduleItem[]; currentTime: Date; heading: string }> = (
118 { schedule, currentTime, heading },
119) => {
150};
151
152const TodoList: React.FC<{ todos: TaskItem[]; heading: string }> = ({ todos, heading }) => {
153 const [todoItems, setTodoItems] = useState(todos);
154
1/** @jsxImportSource https://esm.sh/react */
2import { Cursors, init } from "https://esm.sh/@instantdb/react?bundle-deps";
3import React, { JSX } from "https://esm.sh/react";
4import { createRoot } from "https://esm.sh/react-dom/client";
5
6const cursorsClassNames =
1/** @jsxImportSource https://esm.sh/react */
2import { Cursors, init } from "https://esm.sh/@instantdb/react";
3import React from "https://esm.sh/react";
4import { createRoot } from "https://esm.sh/react-dom/client";
5
6function InstantCursors() {
1/** @jsxImportSource https://esm.sh/react */
2import { init } from "https://esm.sh/@instantdb/react";
3import React, { createRef, useRef } from "https://esm.sh/react";
4import { createRoot } from "https://esm.sh/react-dom/client";
5
6type EmojiName = keyof typeof emoji;
103
104 const elRefsRef = useRef<{
105 [k: string]: React.RefObject<HTMLDivElement>;
106 }>(refsInit);
107
1/** @jsxImportSource https://esm.sh/react */
2import React, { useState, useEffect, useCallback } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5const symbols = "!@#$%^&*()_+-=[]{}|;:,.<>?`~";
1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useRef, useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5interface WordEntry {
126 };
127
128 const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
129 const input = e.target.value;
130 const now = Date.now();
174 };
175
176 const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
177 if (e.key === "Tab") {
178 e.preventDefault();
1/** @jsxImportSource https://esm.sh/react */
2import React, { useState, useCallback, useEffect, useRef } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5function App() {
1/** @jsxImportSource https://esm.sh/react */
2import React, { useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5function App() {
13
141. Vanilla client-side JavaScript: @stevekrouse/cron_client_side_script_fork
152. Client-side ReactJS (no SSR): @stevekrouse/cron_client_react_fork
16
17I think (2) Client-side React without any SSR is the simplest architecture. Maybe will move to that.
18
19Migrated from folder: Archive/flutteringVioletBird
