Life.jsx

1import { useNow } from "../lib/hooks.ts";2import { juice, label } from "../lib/life.ts";34function Clock({ born, now }) {5  const words = label(born, now).split(" ");6  const head = words.shift();7  const end = words.length ? ` ${words.pop()}` : "";8  const trim = words.join(" ");9  return (10    <span>11      {head}12      {trim ? <span className="trim">{` ${trim}`}</span> : null}13      {end}14    </span>15  );16}1718export function Life({ born, bar = false, now: built = 0 }) {19  const now = useNow(built);20  return (21    <span className={bar ? "life" : "life plain"}>22      <Clock born={born} now={now} />23      {bar ? (24        <span className="juice">25          <i style={{ width: `${juice(born, now).toFixed(1)}%` }}></i>26        </span>27      ) : null}28    </span>29  );30}