mirror of
https://gitlab.w-hs.de/an14051/backerup-website.git
synced 2026-07-27 17:35:29 +00:00
Anders Böttcher
0d58fafe4e
- Add user management API endpoints for listing and creating users. - Implement login and logout functionality with rate limiting. - Create UI components for login form, logout button, and animated elements. - Add session management with JWT and secure cookie handling. - Seed initial admin user if no users exist. - Introduce utility functions for password hashing and user authentication. - Set up proxy middleware for route protection and security headers. - Create a JSON file for user data storage. - Add links configuration for external resources.
45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import { useRef } from "react";
|
|
|
|
/**
|
|
* SpotlightCard — renders a card with a cursor-following radial glow
|
|
* that lights up where the user's mouse is hovering. Zero dependencies.
|
|
*/
|
|
export default function SpotlightCard({
|
|
children,
|
|
className = "",
|
|
}: {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}) {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
|
function onMouseMove(e: React.MouseEvent<HTMLDivElement>) {
|
|
const el = ref.current;
|
|
if (!el) return;
|
|
const rect = el.getBoundingClientRect();
|
|
el.style.setProperty("--mx", `${e.clientX - rect.left}px`);
|
|
el.style.setProperty("--my", `${e.clientY - rect.top}px`);
|
|
}
|
|
|
|
function onMouseLeave() {
|
|
// Reset so the glow fades away gracefully
|
|
const el = ref.current;
|
|
if (!el) return;
|
|
el.style.setProperty("--mx", "-9999px");
|
|
el.style.setProperty("--my", "-9999px");
|
|
}
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={`spotlight ${className}`}
|
|
onMouseMove={onMouseMove}
|
|
onMouseLeave={onMouseLeave}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|