/** * This app displays a thick horizontal line with a color gradient from dark red to yellow to light green. * Below each section, there's a text input field. Each color section can have up to 8 values. * It uses React for the UI and CSS for styling the gradient line and inputs. * It includes a reorder functionality for the items in each section and an expandable "Learn more" section. */ /** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [redItems, setRedItems] = useState([]); const [yellowItems, setYellowItems] = useState([]); const [greenItems, setGreenItems] = useState([]); const [isReordering, setIsReordering] = useState(false); const [isLearnMoreExpanded, setIsLearnMoreExpanded] = useState(false); const addItem = (color: string, item: string) => { if (item.trim() === "") return; switch (color) { case "red": { if (redItems.length < 8) setRedItems([...redItems, item.trim()]); (document.querySelector('input[placeholder="Add red item"]') as HTMLInputElement).value = ''; break; } case "yellow": { if (yellowItems.length < 8) setYellowItems([...yellowItems, item.trim()]); (document.querySelector('input[placeholder="Add yellow item"]') as HTMLInputElement).value = ''; break; } case "green": { if (greenItems.length < 8) setGreenItems([...greenItems, item.trim()]); (document.querySelector('input[placeholder="Add green item"]') as HTMLInputElement).value = ''; break; } } }; const removeItem = (color: string, index: number) => { switch (color) { case "red": setRedItems(redItems.filter((_, i) => i !== index)); break; case "yellow": setYellowItems(yellowItems.filter((_, i) => i !== index)); break; case "green": setGreenItems(greenItems.filter((_, i) => i !== index)); break; } }; const moveItem = (color: string, index: number, direction: 'up' | 'down') => { const setter = color === 'red' ? setRedItems : color === 'yellow' ? setYellowItems : setGreenItems; const items = color === 'red' ? redItems : color === 'yellow' ? yellowItems : greenItems; if ((direction === 'up' && index > 0) || (direction === 'down' && index < items.length - 1)) { const newItems = [...items]; const [removed] = newItems.splice(index, 1); newItems.splice(direction === 'up' ? index - 1 : index + 1, 0, removed); setter(newItems); } }; const toggleReorder = () => { setIsReordering(!isReordering); }; const toggleLearnMore = () => { setIsLearnMoreExpanded(!isLearnMoreExpanded); }; const exportData = async () => { const markdownText = `# Know Your Boundaries ## Intolerable ${redItems.map((item, index) => `${index + 1}. ${item}`).join('\n')} ## Pushing Limits ${yellowItems.map((item, index) => `${index + 1}. ${item}`).join('\n')} ## Flourishing ${greenItems.map((item, index) => `${index + 1}. ${item}`).join('\n')} `; try { await navigator.clipboard.writeText(markdownText); alert('Exported data has been copied to your clipboard!'); } catch (err) { console.error('Failed to copy text: ', err); alert('Failed to copy to clipboard. Please try again.'); } }; const renderItems = (items: string[], color: string) => { return items.map((item, index) => (

{item} {isReordering ? (

) : ( )}

)); }; return (

Know Your Boundaries

See a sample |

{isLearnMoreExpanded && (

People, like bridges, have ranges of tolerance, which can be described by lists of symptoms. If I'm doing things in the green list, I'm flourishing - I'm in good shape. If I'm doing things in the yellow list, I'm hitting my boundaries - time to pay attention. If I'm doing things in the red list, it's intolerable - I'm at risk of collapsing, and something needs to change.

Revisit your lists often to check in, and get specific and clear about "how you're doing."

Read full article

)}

Intolerable Pushing limits Flourishing

{renderItems(redItems, 'red')} e.key === "Enter" && addItem("red", e.currentTarget.value)} />

{renderItems(yellowItems, 'yellow')} e.key === "Enter" && addItem("yellow", e.currentTarget.value)} />

{renderItems(greenItems, 'green')} e.key === "Enter" && addItem("green", e.currentTarget.value)} />

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { return new Response(` Know Your Boundaries

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { margin: 0; font-family: 'Inter', system-ui, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; } .title { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; color: #333; } .container { width: 100%; max-width: 1500px; text-align: center; padding: 0 20px; box-sizing: border-box; } .learn-more-container { display: flex; flex-direction: column; align-items: center; margin-bottom: 2rem; max-width: 500px; margin-left: auto; margin-right: auto; } .learn-more-links { display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; } .sample-link, .learn-more-button { background: none; border: none; color: #007bff; cursor: pointer; font-size: 1rem; padding: 0; text-decoration: none; } .sample-link:hover, .learn-more-button:hover { text-decoration: underline; } .link-separator { margin: 0 0.5rem; color: #007bff; } .learn-more-text { background-color: #f0f0f0; text-align: left; font-size: 0.9rem; line-height: 1.5; margin-top: 1rem; padding: 0; color: #333; } .read-more-link { display: inline-block; margin-top: 1rem; color: #007bff; text-decoration: none; } .read-more-link:hover { text-decoration: underline; } .gradient-container { width: 100%; margin-bottom: 2rem; } .gradient-labels { display: flex; justify-content: space-between; margin-bottom: 5px; } .label { font-weight: bold; font-size: 0.9em; } .label.red { color: #8B0000; } .label.yellow { color: #FFD700; } .label.green { color: #2E8B57; } .gradient-line { height: 40px; background: linear-gradient(to right, #8B0000, #FFD700, #90EE90); width: 100%; } .red-section { border-top: 2px solid #8B0000; } .yellow-section { border-top: 2px solid #FFD700; } .green-section { border-top: 2px solid #90EE90; } .sections { width: 100%; } .sections { display: flex; justify-content: space-between; } .section { flex: 1; margin: 0 12.5px; padding-top: 10px; width: 33.33%; box-sizing: border-box; } ul { list-style-type: none; padding: 0; margin-bottom: 1rem; margin: 0; text-align: left; } li { margin: 5px 0; display: flex; justify-content: space-between; align-items: center; word-break: break-word; overflow-wrap: break-word; max-width: 100%; padding-bottom: 5px; border-bottom: 1px solid #e0e0e0; font-weight: 400; } li:last-child { border-bottom: none; } li button { background: none; border: none; cursor: pointer; font-size: 0.8em; padding: 0; margin-left: 5px; flex-shrink: 0; opacity: 0.7; } .reorder-buttons { display: flex; gap: 5px; margin-left: 5px; } .input-field { width: 95%; padding: 5px; border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box; margin-bottom: 1rem; max-width: 100%; } .button-container { display: flex; justify-content: space-between; margin-top: 20px; } .reorder-button { padding: 10px 20px; margin-top: 1rem; background-color: #f0f0f0; color: #333; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; } .reorder-button:hover { background-color: #e0e0e0; } .export-button { padding: 10px 20px; margin-top: 1rem; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; } .export-button:hover { background-color: #0056b3; } @media (max-width: 768px) { .sections { flex-direction: column; } .section { width: 100%; margin: 0; margin-bottom: 20px; } } `; export default server;

concentricCirclesApp

Version 32