Back

Version 145

12/14/2024
/** @jsxImportSource https://esm.sh/react@18.2.0 */
import { AnimatePresence, motion } from "https://esm.sh/framer-motion?deps=react@18.2.0,react-dom@18.2.0";
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
import React, { useCallback, useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";

function ErrorMessage({ message }) {
return (
<div className="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
<div
className="bg-red-100 dark:bg-red-900 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-300 px-4 py-3 rounded relative"
role="alert"
>
<strong className="font-bold">Oops!</strong>
<span className="block sm:inline">{message}</span>
</div>
</div>
);
}

function Loader() {
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
{/* Outer container for spin */}
<div className="animate-spin">
{/* Main record container */}
<div className="w-32 h-32 bg-black dark:bg-gray-300 rounded-full relative overflow-hidden">
{/* Outer ring groove */}
<div className="absolute inset-2 border-4 border-gray-800 dark:border-gray-600 rounded-full opacity-60"></div>

{/* Inner grooves */}
<div className="absolute inset-4 border-2 border-gray-800 dark:border-gray-700 rounded-full opacity-50"></div>
<div className="absolute inset-8 border-2 border-gray-800 dark:border-gray-700 rounded-full opacity-50"></div>
<div className="absolute inset-12 border-2 border-gray-800 dark:border-gray-700 rounded-full opacity-50">
</div>

{/* Light arcs to show rotation */}
ashryanio-randodisc.web.val.run
Updated: December 15, 2024