laxmanhalaki/Re_Figma_Code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

non templatized card disabled

Browse Source
This commit is contained in:
laxmanhalaki 2025-12-30 09:46:17 +05:30
parent b9a8c5bf52
commit c7ffc475f9
1 changed files with 38 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/workflow/CreateRequest/TemplateSelectionStep.tsx
View File

@ -59,21 +59,27 @@ export function TemplateSelectionStep({
className="w-full max-w-6xl grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"
data-testid="template-selection-grid"
>
{templates.map((template) => (
{templates.map((template) => {
const isComingSoon = template.id === 'existing-template';
const isDisabled = isComingSoon;
return (
<motion.div
key={template.id}
whileHover={{ scale: 1.03 }}
whileTap={{ scale: 0.98 }}
whileHover={!isDisabled ? { scale: 1.03 } : {}}
whileTap={!isDisabled ? { scale: 0.98 } : {}}
transition={{ type: "spring", stiffness: 300, damping: 20 }}
data-testid={`template-card-${template.id}`}
>
<Card
className={`cursor-pointer h-full transition-all duration-300 border-2 ${
selectedTemplate?.id === template.id
? 'border-blue-500 shadow-xl bg-blue-50/50 ring-2 ring-blue-200'
: 'border-gray-200 hover:border-blue-300 hover:shadow-lg'
className={`h-full transition-all duration-300 border-2 ${
isDisabled
? 'border-gray-200 bg-gray-50/50 opacity-85 cursor-not-allowed'
: selectedTemplate?.id === template.id
? 'border-blue-500 shadow-xl bg-blue-50/50 ring-2 ring-blue-200 cursor-pointer'
: 'border-gray-200 hover:border-blue-300 hover:shadow-lg cursor-pointer'
}`}
onClick={() => onSelectTemplate(template)}
onClick={!isDisabled ? () => onSelectTemplate(template) : undefined}
data-testid={`template-card-${template.id}-clickable`}
>
<CardHeader className="space-y-4 pb-4">
@ -108,9 +114,20 @@ export function TemplateSelectionStep({
)}
</div>
<div className="text-left">
<CardTitle className="text-xl mb-2" data-testid={`template-card-${template.id}-name`}>
<div className="flex items-start justify-between gap-2 mb-2">
<CardTitle className="text-xl" data-testid={`template-card-${template.id}-name`}>
{template.name}
</CardTitle>
{isComingSoon && (
<Badge
variant="outline"
className="text-xs bg-yellow-100 text-yellow-700 border-yellow-300 font-semibold"
data-testid={`template-card-${template.id}-coming-soon-badge`}
>
Coming Soon
</Badge>
)}
</div>
<div className="flex items-center gap-2">
<Badge variant="secondary" className="text-xs" data-testid={`template-card-${template.id}-category`}>
{template.category}
@ -140,7 +157,8 @@ export function TemplateSelectionStep({
</CardContent>
</Card>
</motion.div>
))}
);
})}
</div>
{/* Template Details Card */}