117 lines
2.8 KiB
TypeScript
117 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
import { cn } from "../utils/cn";
|
|
|
|
export const BackgroundGrid: React.FC = () => (
|
|
<div className="fixed inset-0 pointer-events-none -z-20" aria-hidden="true">
|
|
<div
|
|
className="absolute inset-0 opacity-[0.015]"
|
|
style={{
|
|
backgroundImage: `
|
|
linear-gradient(#94a3b8 1px, transparent 1px),
|
|
linear-gradient(90deg, #94a3b8 1px, transparent 1px)
|
|
`,
|
|
backgroundSize: "80px 80px",
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
interface CardProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
variant?: "white" | "dark" | "gray" | "glass";
|
|
hover?: boolean;
|
|
padding?: "none" | "small" | "normal" | "large";
|
|
techBorder?: boolean;
|
|
}
|
|
|
|
export const Card: React.FC<CardProps> = ({
|
|
children,
|
|
className = "",
|
|
variant = "white",
|
|
hover = true,
|
|
padding = "normal",
|
|
techBorder = false,
|
|
}) => {
|
|
const variants = {
|
|
white: "bg-white border-slate-100 text-slate-900 shadow-sm",
|
|
dark: "bg-slate-900 border-white/5 text-white shadow-xl",
|
|
gray: "bg-slate-50/50 border-slate-100 text-slate-900",
|
|
glass: "glass text-slate-900",
|
|
};
|
|
|
|
const paddings = {
|
|
none: "p-0",
|
|
small: "p-4 md:p-8",
|
|
normal: "p-5 md:p-10",
|
|
large: "p-6 md:p-12",
|
|
};
|
|
|
|
const [hexId, setHexId] = React.useState("0x0000");
|
|
|
|
React.useEffect(() => {
|
|
setHexId(
|
|
`0x${Math.floor(Math.random() * 0xffff)
|
|
.toString(16)
|
|
.padStart(4, "0")
|
|
.toUpperCase()}`,
|
|
);
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"rounded-2xl border h-full flex flex-col justify-between transition-all duration-500 ease-out relative overflow-hidden group/card",
|
|
variants[variant],
|
|
paddings[padding],
|
|
hover ? "hover:border-slate-200 hover:shadow-md" : "",
|
|
techBorder ? "tech-border" : "",
|
|
className,
|
|
)}
|
|
>
|
|
{/* Binary corner accent on hover */}
|
|
{hover && (
|
|
<span
|
|
className="absolute top-3 right-3 text-[7px] font-mono tracking-widest opacity-0 group-hover/card:opacity-100 transition-opacity duration-500 select-none pointer-events-none"
|
|
style={{
|
|
color:
|
|
variant === "dark"
|
|
? "rgba(255,255,255,0.1)"
|
|
: "rgba(148,163,184,0.2)",
|
|
}}
|
|
aria-hidden="true"
|
|
>
|
|
{hexId}
|
|
</span>
|
|
)}
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const Container: React.FC<{
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
variant?: "narrow" | "normal" | "wide";
|
|
}> = ({ children, className = "", variant = "normal" }) => {
|
|
const variants = {
|
|
narrow: "max-w-4xl",
|
|
normal: "max-w-6xl",
|
|
wide: "max-w-7xl",
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"mx-auto px-5 md:px-6 w-full",
|
|
variants[variant],
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|