mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-02-22 08:42:00 +00:00
i701
c06c4fee3f
- Added a new Parental Control page for managing device access and notifications. - Introduced blockDevice function to handle blocking and unblocking devices based on payment status. - Enhanced omada-actions.ts to include device blocking logic and improved error handling. - Updated DevicesTable component to integrate BlockDeviceButton for managing device states. - Implemented API route for checking device statuses and sending notifications for expiring devices. - Refactored payment processing to update device statuses upon successful payment verification. - Added new utility functions for API key validation and SMS notifications. These changes improve user control over device management and enhance the overall functionality of the application.
56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
'use client';
|
|
import React, { useMemo, type JSX } from 'react';
|
|
import { motion } from 'motion/react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface TextShimmerProps {
|
|
children: string;
|
|
as?: React.ElementType;
|
|
className?: string;
|
|
duration?: number;
|
|
spread?: number;
|
|
}
|
|
|
|
export function TextShimmer({
|
|
children,
|
|
as: Component = 'p',
|
|
className,
|
|
duration = 2,
|
|
spread = 2,
|
|
}: TextShimmerProps) {
|
|
const MotionComponent = motion.create(
|
|
Component as keyof JSX.IntrinsicElements
|
|
);
|
|
|
|
const dynamicSpread = useMemo(() => {
|
|
return children.length * spread;
|
|
}, [children, spread]);
|
|
|
|
return (
|
|
<MotionComponent
|
|
className={cn(
|
|
'relative inline-block bg-[length:250%_100%,auto] bg-clip-text',
|
|
'text-transparent [--base-color:#a1a1aa] [--base-gradient-color:#000]',
|
|
'[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]',
|
|
'dark:[--base-color:#71717a] dark:[--base-gradient-color:#ffffff] dark:[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))]',
|
|
className
|
|
)}
|
|
initial={{ backgroundPosition: '100% center' }}
|
|
animate={{ backgroundPosition: '0% center' }}
|
|
transition={{
|
|
repeat: Infinity,
|
|
duration,
|
|
ease: 'linear',
|
|
}}
|
|
style={
|
|
{
|
|
'--spread': `${dynamicSpread}px`,
|
|
backgroundImage: `var(--bg), linear-gradient(var(--base-color), var(--base-color))`,
|
|
} as React.CSSProperties
|
|
}
|
|
>
|
|
{children}
|
|
</MotionComponent>
|
|
);
|
|
}
|