mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-01-16 18:32:10 +01:00
Kaj Kowalski
2a033fe639
- Fix TopQuestionsChart with proper dark mode colors using CSS variables and shadcn/ui components - Enhance ResponseTimeDistribution with thicker bars (maxBarSize: 60) - Replace GeographicMap with dark/light mode compatible CartoDB tiles - Add custom text selection background color with primary theme color - Update all loading states to use proper CSS variables instead of hardcoded colors - Fix dashboard layout background to use bg-background instead of bg-gray-100
105 lines
2.4 KiB
TypeScript
105 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
import { motion, MotionStyle, Transition } from "motion/react";
|
|
|
|
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>
|
|
);
|
|
};
|