Function Resource

apps/baseai.dev/src/components/Resources.tsx:146–181

({ resource }: { resource: Resource })

}

function Resource({ resource }: { resource: Resource }) {
	let mouseX = useMotionValue(0);
	let mouseY = useMotionValue(0);

	function onMouseMove({
		currentTarget,
		clientX,
		clientY
	}: React.MouseEvent<HTMLDivElement>) {
		let { left, top } = currentTarget.getBoundingClientRect();
		mouseX.set(clientX - left);
		mouseY.set(clientY - top);
	}

	return (
		<div
			key={resource.href}
			onMouseMove={onMouseMove}
			className="group relative flex rounded-2xl transition-shadow dark:hover:shadow-md dark:hover:shadow-black/5"
		>
			<div className="absolute inset-0 rounded-2xl ring-1 ring-inset ring-zinc-900/7.5 transition duration-300 group-hover:ring-[#7d79d8] dark:ring-white/10" />
			<div className="relative rounded-2xl px-4 pb-4 pt-16">
				<ResourceIcon icon={resource.icon} />
				<h3 className="leading-7mb-2 mt-4 flex items-center text-lg font-semibold text-black dark:text-white">
					<Link href={resource.href}>
						<span className="absolute inset-0 rounded-2xl" />
						{resource.name}
					</Link>
				</h3>
				<p className="mt-1 text-base text-zinc-600 dark:text-zinc-400">
					{resource.description}
				</p>
			</div>
		</div>
	);
}

export function Resources() {
	return (