mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-01-16 09:52:09 +01:00
Kaj Kowalski
ef71c9c06e
## Dark Mode Implementation - Convert User Management page to shadcn/ui components for proper theming - Replace hardcoded colors with CSS variables for dark/light mode support - Add proper test attributes and accessibility improvements - Fix loading state management and null safety issues ## Test Suite Implementation - Add comprehensive User Management page tests (18 tests passing) - Add format-enums utility tests (24 tests passing) - Add integration test infrastructure with proper mocking - Add accessibility test framework with jest-axe integration - Add keyboard navigation test structure - Fix test environment configuration for React components ## Code Quality Improvements - Fix all ESLint warnings and errors - Add null safety for users array (.length → ?.length || 0) - Add proper form role attribute for accessibility - Fix TypeScript interface issues in magic UI components - Improve component error handling and user experience ## Technical Infrastructure - Add jest-dom and node-mocks-http testing dependencies - Configure jsdom environment for React component testing - Add window.matchMedia mock for theme provider compatibility - Fix auth test mocking and database test configuration Result: Core functionality working with 42/44 critical tests passing All dark mode theming, user management, and utility functions verified
61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
interface MeteorsProps {
|
|
number?: number;
|
|
minDelay?: number;
|
|
maxDelay?: number;
|
|
minDuration?: number;
|
|
maxDuration?: number;
|
|
angle?: number;
|
|
className?: string;
|
|
}
|
|
|
|
export const Meteors = ({
|
|
number = 20,
|
|
minDelay = 0.2,
|
|
maxDelay = 1.2,
|
|
minDuration = 2,
|
|
maxDuration = 10,
|
|
angle = 215,
|
|
className,
|
|
}: MeteorsProps) => {
|
|
const [meteorStyles, setMeteorStyles] = useState<Array<React.CSSProperties>>(
|
|
[]
|
|
);
|
|
|
|
useEffect(() => {
|
|
const styles = [...new Array(number)].map(() => ({
|
|
"--angle": -angle + "deg",
|
|
top: "-5%",
|
|
left: `calc(0% + ${Math.floor(Math.random() * window.innerWidth)}px)`,
|
|
animationDelay: Math.random() * (maxDelay - minDelay) + minDelay + "s",
|
|
animationDuration:
|
|
Math.floor(Math.random() * (maxDuration - minDuration) + minDuration) +
|
|
"s",
|
|
}));
|
|
setMeteorStyles(styles);
|
|
}, [number, minDelay, maxDelay, minDuration, maxDuration, angle]);
|
|
|
|
return (
|
|
<>
|
|
{[...meteorStyles].map((style, idx) => (
|
|
// Meteor Head
|
|
<span
|
|
key={idx}
|
|
style={{ ...style }}
|
|
className={cn(
|
|
"pointer-events-none absolute size-0.5 rotate-[var(--angle)] animate-meteor rounded-full bg-zinc-500 shadow-[0_0_0_1px_#ffffff10]",
|
|
className
|
|
)}
|
|
>
|
|
{/* Meteor Tail */}
|
|
<div className="pointer-events-none absolute top-1/2 -z-10 h-px w-[50px] -translate-y-1/2 bg-gradient-to-r from-zinc-500 to-transparent" />
|
|
</span>
|
|
))}
|
|
</>
|
|
);
|
|
};
|