mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-01-16 06:32:10 +01:00
Kaj Kowalski
93fbb44eec
Major code quality overhaul addressing 58% of all linting issues: • Type Safety Improvements: - Replace all any types with proper TypeScript interfaces - Fix Map component shadowing (renamed to CountryMap) - Add comprehensive custom error classes system - Enhance API route type safety • Accessibility Enhancements: - Add explicit button types to all interactive elements - Implement useId() hooks for form element accessibility - Add SVG title attributes for screen readers - Fix static element interactions with keyboard handlers • React Best Practices: - Resolve exhaustive dependencies warnings with useCallback - Extract nested component definitions to top level - Fix array index keys with proper unique identifiers - Improve component organization and prop typing • Code Organization: - Automatic import organization and type import optimization - Fix unused function parameters and variables - Enhanced error handling with structured error responses - Improve component reusability and maintainability Results: 248 → 104 total issues (58% reduction) - Fixed all critical type safety and security issues - Enhanced accessibility compliance significantly - Improved code maintainability and performance
62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import type React from "react";
|
|
import { useEffect, useState } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
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>
|
|
))}
|
|
</>
|
|
);
|
|
};
|