51 lines
2.0 KiB
TypeScript
51 lines
2.0 KiB
TypeScript
|
|
||
|
|
import React from 'react';
|
||
|
|
import { StyleOption } from '../types';
|
||
|
|
import { Check } from 'lucide-react';
|
||
|
|
|
||
|
|
interface StyleCardProps {
|
||
|
|
styleOption: StyleOption;
|
||
|
|
isSelected: boolean;
|
||
|
|
onSelect: (style: StyleOption) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const StyleCard: React.FC<StyleCardProps> = ({ styleOption, isSelected, onSelect }) => {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
onClick={() => onSelect(styleOption)}
|
||
|
|
className={`glass-card relative group cursor-pointer rounded-2xl overflow-hidden transition-all duration-300 hover:-translate-y-1 h-[340px] flex flex-col ${
|
||
|
|
isSelected ? 'ring-2 ring-indigo-500 shadow-[0_0_30px_rgba(99,102,241,0.3)]' : 'hover:bg-white/5'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<div className="h-48 overflow-hidden relative">
|
||
|
|
<div className="absolute inset-0 bg-gradient-to-t from-[#0f0f11] via-transparent to-transparent z-10" />
|
||
|
|
<img
|
||
|
|
src={styleOption.previewImage}
|
||
|
|
alt={styleOption.name}
|
||
|
|
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
|
||
|
|
/>
|
||
|
|
{isSelected && (
|
||
|
|
<div className="absolute top-4 right-4 z-20 bg-indigo-500/80 backdrop-blur-md rounded-full p-1.5 shadow-lg shadow-indigo-500/50">
|
||
|
|
<Check className="w-4 h-4 text-white" />
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="p-6 flex flex-col flex-1 relative z-20">
|
||
|
|
<h3 className={`text-xl font-bold mb-2 ${isSelected ? 'text-indigo-400 text-glow' : 'text-white group-hover:text-indigo-300'} transition-colors`}>
|
||
|
|
{styleOption.name}
|
||
|
|
</h3>
|
||
|
|
<p className="text-sm text-zinc-400 leading-relaxed line-clamp-3 font-light">{styleOption.description}</p>
|
||
|
|
|
||
|
|
<div className="mt-auto pt-4 flex">
|
||
|
|
<span className="text-[10px] font-bold uppercase tracking-widest text-zinc-600 border border-zinc-700/50 px-2 py-1 rounded group-hover:border-indigo-500/30 group-hover:text-indigo-400 transition-colors">
|
||
|
|
Visual DNA
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default StyleCard;
|