franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix feature card

Browse Source
This commit is contained in:
Aman Varshney
2025-05-20 13:52:03 +05:30
parent f9712ef751
commit aa037e07ca
1 changed files with 30 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
apps/web/src/app/(home)/_components/FeatureCard.tsx
View File

@@ -2,9 +2,8 @@
import { ScrollArea } from "@/components/ui/scroll-area"; import { ScrollArea } from "@/components/ui/scroll-area";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { AnimatePresence, motion } from "framer-motion"; import { motion } from "motion/react";
import Image from "next/image"; import Image from "next/image";
import { useState } from "react";
interface TechOption { interface TechOption {
id: string; id: string;
@@ -24,34 +23,21 @@ const FeatureCard: React.FC<FeatureCardProps> = ({
options, options,
className, className,
}) => { }) => {
const [isHovered, setIsHovered] = useState(false);
return ( return (
<motion.div <motion.div
className={cn( className={cn(
"relative flex h-36 flex-col justify-between overflow-hidden rounded-lg border border-border bg-card p-4 shadow-sm", "relative flex h-36 flex-col overflow-hidden rounded-lg border border-border bg-card p-2 shadow-sm",
className, className,
)} )}
onHoverStart={() => setIsHovered(true)}
onHoverEnd={() => setIsHovered(false)}
layout layout
> >
<div> <div>
<h4 className="mb-1 font-mono font-semibold text-foreground text-lg"> <h4 className="pb-2 text-center font-mono font-semibold text-foreground text-sm">
{title} {title}
</h4> </h4>
</div> </div>
<div className="flex-1 overflow-hidden">
<AnimatePresence> <ScrollArea className="h-full w-full">
{isHovered && (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.2 }}
className="absolute inset-0 bg-card/90 p-3 backdrop-blur-sm"
>
<ScrollArea className="h-full">
<ul className="grid grid-cols-3 gap-2 p-1"> <ul className="grid grid-cols-3 gap-2 p-1">
{options.map((option) => ( {options.map((option) => (
<li <li
@@ -65,18 +51,18 @@ const FeatureCard: React.FC<FeatureCardProps> = ({
alt={option.name} alt={option.name}
width={24} width={24}
height={24} height={24}
className="object-contain " className="h-6 w-6 object-contain"
/> />
) : ( ) : (
<span className="text-2xl">{option.icon}</span> <span className="flex h-6 w-6 items-center justify-center text-2xl">
{option.icon}
</span>
)} )}
</li> </li>
))} ))}
</ul> </ul>
</ScrollArea> </ScrollArea>
</motion.div> </div>
)}
</AnimatePresence>
</motion.div> </motion.div>
); );
}; };