apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-21 18:55:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

Initial formatting using biome

Browse source
This commit is contained in:
Utkarsh-Patel-13 2025-07-27 10:05:37 -07:00
parent 4c8ff48155
commit 758603b275
156 changed files with 23825 additions and 29508 deletions
Download patch file Download diff file Expand all files Collapse all files

130
surfsense_web/components/ui/spotlight.tsx
View file

@ -1,81 +1,79 @@
'use client';
import React, { useRef, useState, useCallback, useEffect } from 'react';
import { motion, useSpring, useTransform, SpringOptions } from 'framer-motion';
import { cn } from '@/lib/utils';
"use client";
import React, { useRef, useState, useCallback, useEffect } from "react";
import { motion, useSpring, useTransform, type SpringOptions } from "framer-motion";
import { cn } from "@/lib/utils";
type SpotlightProps = {
className?: string;
size?: number;
springOptions?: SpringOptions;
className?: string;
size?: number;
springOptions?: SpringOptions;
};
export function Spotlight({
className,
size = 200,
springOptions = { bounce: 0 },
className,
size = 200,
springOptions = { bounce: 0 },
}: SpotlightProps) {
const containerRef = useRef<HTMLDivElement>(null);
const [isHovered, setIsHovered] = useState(false);
const [parentElement, setParentElement] = useState<HTMLElement | null>(null);
const containerRef = useRef<HTMLDivElement>(null);
const [isHovered, setIsHovered] = useState(false);
const [parentElement, setParentElement] = useState<HTMLElement | null>(null);
const mouseX = useSpring(0, springOptions);
const mouseY = useSpring(0, springOptions);
const mouseX = useSpring(0, springOptions);
const mouseY = useSpring(0, springOptions);
const spotlightLeft = useTransform(mouseX, (x) => `${x - size / 2}px`);
const spotlightTop = useTransform(mouseY, (y) => `${y - size / 2}px`);
const spotlightLeft = useTransform(mouseX, (x) => `${x - size / 2}px`);
const spotlightTop = useTransform(mouseY, (y) => `${y - size / 2}px`);
useEffect(() => {
if (containerRef.current) {
const parent = containerRef.current.parentElement;
if (parent) {
parent.style.position = 'relative';
parent.style.overflow = 'hidden';
setParentElement(parent);
}
}
}, []);
useEffect(() => {
if (containerRef.current) {
const parent = containerRef.current.parentElement;
if (parent) {
parent.style.position = "relative";
parent.style.overflow = "hidden";
setParentElement(parent);
}
}
}, []);
const handleMouseMove = useCallback(
(event: MouseEvent) => {
if (!parentElement) return;
const { left, top } = parentElement.getBoundingClientRect();
mouseX.set(event.clientX - left);
mouseY.set(event.clientY - top);
},
[mouseX, mouseY, parentElement]
);
const handleMouseMove = useCallback(
(event: MouseEvent) => {
if (!parentElement) return;
const { left, top } = parentElement.getBoundingClientRect();
mouseX.set(event.clientX - left);
mouseY.set(event.clientY - top);
},
[mouseX, mouseY, parentElement]
);
useEffect(() => {
if (!parentElement) return;
useEffect(() => {
if (!parentElement) return;
parentElement.addEventListener('mousemove', handleMouseMove);
parentElement.addEventListener('mouseenter', () => setIsHovered(true));
parentElement.addEventListener('mouseleave', () => setIsHovered(false));
parentElement.addEventListener("mousemove", handleMouseMove);
parentElement.addEventListener("mouseenter", () => setIsHovered(true));
parentElement.addEventListener("mouseleave", () => setIsHovered(false));
return () => {
parentElement.removeEventListener('mousemove', handleMouseMove);
parentElement.removeEventListener('mouseenter', () => setIsHovered(true));
parentElement.removeEventListener('mouseleave', () =>
setIsHovered(false)
);
};
}, [parentElement, handleMouseMove]);
return () => {
parentElement.removeEventListener("mousemove", handleMouseMove);
parentElement.removeEventListener("mouseenter", () => setIsHovered(true));
parentElement.removeEventListener("mouseleave", () => setIsHovered(false));
};
}, [parentElement, handleMouseMove]);
return (
<motion.div
ref={containerRef}
className={cn(
'pointer-events-none absolute rounded-full bg-[radial-gradient(circle_at_center,var(--tw-gradient-stops),transparent_80%)] blur-xl transition-opacity duration-200',
'from-zinc-50 via-zinc-100 to-zinc-200',
isHovered ? 'opacity-100' : 'opacity-0',
className
)}
style={{
width: size,
height: size,
left: spotlightLeft,
top: spotlightTop,
}}
/>
);
return (
<motion.div
ref={containerRef}
className={cn(
"pointer-events-none absolute rounded-full bg-[radial-gradient(circle_at_center,var(--tw-gradient-stops),transparent_80%)] blur-xl transition-opacity duration-200",
"from-zinc-50 via-zinc-100 to-zinc-200",
isHovered ? "opacity-100" : "opacity-0",
className
)}
style={{
width: size,
height: size,
left: spotlightLeft,
top: spotlightTop,
}}
/>
);
}