pahmiudahgede
/
MIF_E31222379_WEB
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refact: optimize and refact bg box animate

This commit is contained in:
pahmiudahgede 2025-07-06 22:03:14 +07:00
parent 0e9cb1e92e
commit 83729c9950
1 changed files with 93 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
app/components/ui/background-boxes.tsx
View File

@ -1,33 +1,95 @@
"use client";
import React from "react";
import React, { useState, useEffect } from "react";
import { motion } from "motion/react";
import { cn } from "~/lib/utils";
export const BoxesCore = ({ className, ...rest }: { className?: string }) => {
const rows = new Array(150).fill(1);
const cols = new Array(100).fill(1);
let colors = [
"#93c5fd",
"#f9a8d4",
"#86efac",
"#fde047",
"#fca5a5",
"#d8b4fe",
"#93c5fd",
"#a5b4fc",
"#c4b5fd"
const [isDarkMode, setIsDarkMode] = useState(false);
useEffect(() => {
const checkTheme = () => {
const isDark = document.documentElement.classList.contains("dark");
setIsDarkMode(isDark);
};
checkTheme();
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (
mutation.type === "attributes" &&
mutation.attributeName === "class"
) {
checkTheme();
}
});
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"]
});
return () => observer.disconnect();
}, []);
const lightModeColors = [
"rgb(59 130 246)",
"rgb(236 72 153)",
"rgb(16 185 129)",
"rgb(245 158 11)",
"rgb(239 68 68)",
"rgb(139 92 246)",
"rgb(99 102 241)",
"rgb(168 85 247)",
"rgb(6 182 212)"
];
const darkModeColors = [
"rgb(30 58 138)",
"rgb(190 24 93)",
"rgb(22 101 52)",
"rgb(146 64 14)",
"rgb(153 27 27)",
"rgb(124 58 237)",
"rgb(55 48 163)",
"rgb(107 33 168)",
"rgb(22 78 99)"
];
const getRandomColor = () => {
const colors = isDarkMode ? darkModeColors : lightModeColors;
return colors[Math.floor(Math.random() * colors.length)];
};
// Theme-aware styles
const getThemeStyles = () => {
if (isDarkMode) {
return {
borderColor: "rgba(71, 85, 105, 0.3)",
strokeColor: "rgba(71, 85, 105, 0.4)",
backgroundColor: "rgba(15, 23, 42, 0.1)"
};
} else {
return {
borderColor: "rgba(148, 163, 184, 0.2)",
strokeColor: "rgba(100, 116, 139, 0.3)",
backgroundColor: "rgba(248, 250, 252, 0.1)"
};
}
};
const themeStyles = getThemeStyles();
return (
<div
style={{
transform: `translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)`
transform: `translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)`,
backgroundColor: themeStyles.backgroundColor
}}
className={cn(
"absolute -top-1/4 left-1/4 z-0 flex h-full w-full -translate-x-1/2 -translate-y-1/2 p-4",
"absolute -top-1/4 left-1/4 z-0 flex h-full w-full -translate-x-1/2 -translate-y-1/2 p-4 transition-colors duration-300",
className
)}
{...rest}
@ -35,7 +97,11 @@ export const BoxesCore = ({ className, ...rest }: { className?: string }) => {
{rows.map((_, i) => (
<motion.div
key={`row` + i}
className="relative h-8 w-16 border-l border-slate-700"
className="relative h-8 w-16"
style={{
borderLeft: `1px solid ${themeStyles.borderColor}`,
transition: "border-color 0.3s ease"
}}
>
{cols.map((_, j) => (
<motion.div
@ -47,7 +113,12 @@ export const BoxesCore = ({ className, ...rest }: { className?: string }) => {
transition: { duration: 2 }
}}
key={`col` + j}
className="relative h-8 w-16 border-t border-r border-slate-700"
className="relative h-8 w-16"
style={{
borderTop: `1px solid ${themeStyles.borderColor}`,
borderRight: `1px solid ${themeStyles.borderColor}`,
transition: "border-color 0.3s ease"
}}
>
{j % 2 === 0 && i % 2 === 0 ? (
<svg
@ -55,8 +126,12 @@ export const BoxesCore = ({ className, ...rest }: { className?: string }) => {
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="pointer-events-none absolute -top-[14px] -left-[22px] h-6 w-10 stroke-[1px] text-slate-700"
stroke={themeStyles.strokeColor}
className="pointer-events-none absolute -top-[14px] -left-[22px] h-6 w-10 stroke-[1px] transition-colors duration-300"
style={{
stroke: themeStyles.strokeColor,
transition: "stroke 0.3s ease"
}}
>
<path
strokeLinecap="round"