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
107 lines
2.4 KiB
TypeScript
107 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { type MotionStyle, motion, type Transition } from "motion/react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface BorderBeamProps {
|
|
/**
|
|
* The size of the border beam.
|
|
*/
|
|
size?: number;
|
|
/**
|
|
* The duration of the border beam.
|
|
*/
|
|
duration?: number;
|
|
/**
|
|
* The delay of the border beam.
|
|
*/
|
|
delay?: number;
|
|
/**
|
|
* The color of the border beam from.
|
|
*/
|
|
colorFrom?: string;
|
|
/**
|
|
* The color of the border beam to.
|
|
*/
|
|
colorTo?: string;
|
|
/**
|
|
* The motion transition of the border beam.
|
|
*/
|
|
transition?: Transition;
|
|
/**
|
|
* The class name of the border beam.
|
|
*/
|
|
className?: string;
|
|
/**
|
|
* The style of the border beam.
|
|
*/
|
|
style?: React.CSSProperties;
|
|
/**
|
|
* Whether to reverse the animation direction.
|
|
*/
|
|
reverse?: boolean;
|
|
/**
|
|
* The initial offset position (0-100).
|
|
*/
|
|
initialOffset?: number;
|
|
/**
|
|
* The border width of the beam.
|
|
*/
|
|
borderWidth?: number;
|
|
}
|
|
|
|
export const BorderBeam = ({
|
|
className,
|
|
size = 50,
|
|
delay = 0,
|
|
duration = 6,
|
|
colorFrom = "#ffaa40",
|
|
colorTo = "#9c40ff",
|
|
transition,
|
|
style,
|
|
reverse = false,
|
|
initialOffset = 0,
|
|
borderWidth = 1,
|
|
}: BorderBeamProps) => {
|
|
return (
|
|
<div
|
|
className="pointer-events-none absolute inset-0 rounded-[inherit] border-transparent [mask-clip:padding-box,border-box] [mask-composite:intersect] [mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000)] border-(length:--border-beam-width)"
|
|
style={
|
|
{
|
|
"--border-beam-width": `${borderWidth}px`,
|
|
} as React.CSSProperties
|
|
}
|
|
>
|
|
<motion.div
|
|
className={cn(
|
|
"absolute aspect-square",
|
|
"bg-gradient-to-l from-[var(--color-from)] via-[var(--color-to)] to-transparent",
|
|
className
|
|
)}
|
|
style={
|
|
{
|
|
width: size,
|
|
offsetPath: `rect(0 auto auto 0 round ${size}px)`,
|
|
"--color-from": colorFrom,
|
|
"--color-to": colorTo,
|
|
...style,
|
|
} as MotionStyle
|
|
}
|
|
initial={{ offsetDistance: `${initialOffset}%` }}
|
|
animate={{
|
|
offsetDistance: reverse
|
|
? [`${100 - initialOffset}%`, `${-initialOffset}%`]
|
|
: [`${initialOffset}%`, `${100 + initialOffset}%`],
|
|
}}
|
|
transition={{
|
|
repeat: Infinity,
|
|
ease: "linear",
|
|
duration,
|
|
delay: -delay,
|
|
...transition,
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|