Versions

  • v0

    11/27/2024
    Open: Version
    +69
    -0

    /** @jsxImportSource https://esm.sh/react */
    import { sqlite } from "https://esm.town/v/std/sqlite?v=6";
    import { html } from "https://esm.town/v/stevekrouse/html";
    import { SparklineSVG } from "https://esm.town/v/stevekrouse/sparklineSVGReact";
    import { renderToString } from "npm:react-dom/server";

    function StatusRow({ rows }) {
    return (
    <div className="w-full flex flex-col space-y-2">
    <div className="w-full h-16 flex flex-row">
    {rows.map(row => (
    <div
    className={`flex-grow flex-shrink ${row[1] ? "bg-green-500" : "bg-red-500"} border border-white rounded p-`}
    />
    ))}
    </div>
    <h3 className="font-bold text-slate-700">Response times</h3>
    <SparklineSVG
    strokeWidth={1.5}
    data={rows.map(row => row[2])}
    height={70}
    width={800}
    fill="white"
    stroke="rgba(0, 10, 150, 0.5)" // blue
    />
    </div>
    );
    }

    function StatusSection({ url, rows }) {
    const sectionRows = rows.filter(row => row[0] === url);
    const percentUp = Math.round((sectionRows.filter(row => row[1]).length / sectionRows.length) * 100);
    return (
    <div className="w-full">
    <div className="w-full flex flex-row justify-between">
    <h2 className="text-xl font-bold">{url.replace(/\/$/, "").replace(/^https?:\/\//, "")}</h2>
1
Next
dfymagicthemes-status.web.val.run
Updated: November 27, 2024