NikitolProject/volsu-contests
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Expand CornerBrackets color options and make children optional, and refine MatrixRain animation reference type.

Browse Source
This commit is contained in:
n.tolstov 2025-11-30 23:29:23 +03:00
parent 101cf97cc2
commit 3ae3275401
2 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/components/decorative/CornerBrackets.tsx
View File

@ -4,16 +4,19 @@ import React from "react";
import { cn } from "@/lib/utils";
interface CornerBracketsProps {
children: React.ReactNode;
children?: React.ReactNode;
className?: string;
color?: "green" | "cyan" | "purple";
color?: "green" | "cyan" | "purple" | "pink" | "orange" | "yellow" | string;
size?: "sm" | "md" | "lg";
}
const colorStyles = {
green: "border-[var(--color-neon-green)]",
cyan: "border-[var(--color-neon-cyan)]",
purple: "border-[var(--color-neon-purple)]",
const colorStyles: Record<string, string> = {
green: "var(--color-neon-green)",
cyan: "var(--color-neon-cyan)",
purple: "var(--color-neon-purple)",
pink: "var(--color-neon-pink)",
orange: "var(--color-neon-orange)",
yellow: "var(--color-neon-yellow)",
};
const sizeStyles = {
@ -29,6 +32,8 @@ export function CornerBrackets({
size = "md",
}: CornerBracketsProps) {
const { bracket, offset } = sizeStyles[size];
// Support both named colors and CSS variable strings
const borderColor = colorStyles[color] || color;
return (
<div className={cn("relative", className)}>
@ -37,40 +42,36 @@ export function CornerBrackets({
className={cn(
"absolute border-t-2 border-l-2 transition-opacity",
bracket,
colorStyles[color],
"opacity-50 group-hover:opacity-100"
)}
style={{ top: offset, left: offset }}
style={{ top: offset, left: offset, borderColor }}
/>
{/* Top Right */}
<div
className={cn(
"absolute border-t-2 border-r-2 transition-opacity",
bracket,
colorStyles[color],
"opacity-50 group-hover:opacity-100"
)}
style={{ top: offset, right: offset }}
style={{ top: offset, right: offset, borderColor }}
/>
{/* Bottom Left */}
<div
className={cn(
"absolute border-b-2 border-l-2 transition-opacity",
bracket,
colorStyles[color],
"opacity-50 group-hover:opacity-100"
)}
style={{ bottom: offset, left: offset }}
style={{ bottom: offset, left: offset, borderColor }}
/>
{/* Bottom Right */}
<div
className={cn(
"absolute border-b-2 border-r-2 transition-opacity",
bracket,
colorStyles[color],
"opacity-50 group-hover:opacity-100"
)}
style={{ bottom: offset, right: offset }}
style={{ bottom: offset, right: offset, borderColor }}
/>
{children}
</div>

2
frontend/src/components/effects/MatrixRain.tsx
View File

@ -38,7 +38,7 @@ export function MatrixRain({
speed = "normal",
}: MatrixRainProps) {
const canvasRef = useRef<HTMLCanvasElement>(null);
const animationRef = useRef<number>();
const animationRef = useRef<number | undefined>(undefined);
const dropsRef = useRef<number[]>([]);
const draw = useCallback(() => {