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

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

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