119 lines
2.8 KiB
TypeScript
119 lines
2.8 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import Link from "next/link";
|
|
import { useState } from "react";
|
|
import { IconType } from 'react-icons';
|
|
|
|
export const HoverEffect = ({
|
|
items,
|
|
className,
|
|
}: {
|
|
items: {
|
|
title: string;
|
|
description: string;
|
|
link: string;
|
|
icon: IconType; // adding icon type
|
|
}[];
|
|
className?: string;
|
|
}) => {
|
|
let [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 py-10",
|
|
className
|
|
)}
|
|
>
|
|
{items.map((item, idx) => (
|
|
<Link
|
|
target="_blank"
|
|
href={item?.link}
|
|
key={item?.link}
|
|
className="relative group block p-2 h-full w-full"
|
|
onMouseEnter={() => setHoveredIndex(idx)}
|
|
onMouseLeave={() => setHoveredIndex(null)}
|
|
>
|
|
<AnimatePresence>
|
|
{hoveredIndex === idx && (
|
|
<motion.span
|
|
className="absolute inset-0 h-full w-full bg-neutral-200 dark:bg-black block rounded-3xl"
|
|
layoutId="hoverBackground"
|
|
initial={{ opacity: 0 }}
|
|
animate={{
|
|
opacity: 1,
|
|
transition: { duration: 0.15 },
|
|
}}
|
|
exit={{
|
|
opacity: 0,
|
|
transition: { duration: 0.15, delay: 0.2 },
|
|
}}
|
|
/>
|
|
)}
|
|
</AnimatePresence>
|
|
<Card icon={item.icon}>
|
|
<CardTitle>{item.title}</CardTitle>
|
|
<CardDescription>{item.description}</CardDescription>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const Card = ({
|
|
className,
|
|
children,
|
|
icon
|
|
}: {
|
|
className?: string;
|
|
children: React.ReactNode;
|
|
icon: IconType;
|
|
}) => {
|
|
const Icon = icon;
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"rounded-2xl h-[300px] w-full p-4 overflow-hidden border-transparent dark:border-white/[0.2] relative z-20 flex flex-col justify-between", // Added flex layout
|
|
className
|
|
)}
|
|
>
|
|
<div className="relative z-50">
|
|
<div className="p-4">{children}</div>
|
|
</div>
|
|
{<Icon className="text-4xl text-white absolute bottom-8 right-8 opacity-70" />}
|
|
</div>
|
|
);
|
|
};
|
|
export const CardTitle = ({
|
|
className,
|
|
children,
|
|
}: {
|
|
className?: string;
|
|
children: React.ReactNode;
|
|
}) => {
|
|
return (
|
|
<h4 className={cn("text-zinc-100 font-bold tracking-wide mt-4", className)}>
|
|
{children}
|
|
</h4>
|
|
);
|
|
};
|
|
export const CardDescription = ({
|
|
className,
|
|
children,
|
|
}: {
|
|
className?: string;
|
|
children: React.ReactNode;
|
|
}) => {
|
|
return (
|
|
<p
|
|
className={cn(
|
|
"mt-8 text-zinc-400 tracking-wide leading-relaxed text-sm",
|
|
className
|
|
)}
|
|
>
|
|
{children}
|
|
</p>
|
|
);
|
|
};
|