1/** @jsxImportSource https://esm.sh/react */
2import confetti from "https://esm.sh/canvas-confetti@1.6.0";
3import React, { useEffect, useRef, useState } from "https://esm.sh/react";
4import { createRoot } from "https://esm.sh/react-dom/client";
5
6const taskIcons = {
1# Routine Tracker
2
3This is a little React component to make our 7yo's after school routine self-serve so she can be a bit more independent after school.
4
5To change the items in the list, modify the `routineTasks` array of objects:
1/** @jsxImportSource https://esm.sh/react */
2import Cerebras from "https://esm.sh/@cerebras/cerebras_cloud_sdk";
3import React, { useState, useEffect, useRef } from "https://esm.sh/react";
4import { createRoot } from "https://esm.sh/react-dom/client";
5
6function App() {
1/** @jsxImportSource https://esm.sh/react */
2import React, { useState, useEffect } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5const leadershipStyles = [
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# 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# Routine Tracker
2
3This is a little React component to make our 7yo's after school routine self-serve so she can be a bit more independent after school.
4
5To change the items in the list, modify the `routineTasks` array of objects:
1/** @jsxImportSource https://esm.sh/react */
2import confetti from "https://esm.sh/canvas-confetti@1.6.0";
3import React, { useEffect, useRef, useState } from "https://esm.sh/react";
4import { createRoot } from "https://esm.sh/react-dom/client";
5
6const routineTasks = [
1/** @jsxImportSource https://esm.sh/react */
2import { sqlite } from "https://esm.town/v/std/sqlite?v=6";
3import { html } from "https://esm.town/v/stevekrouse/html";
4import { SparklineSVG } from "https://esm.town/v/stevekrouse/sparklineSVGReact";
5import { renderToString } from "npm:react-dom/server";
6
7function StatusRow({ rows }) {
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() {
