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" 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" data-testid="template-selection-grid"
> >
{templates.map((template) => ( {templates.map((template) => {
const isComingSoon = template.id === 'existing-template';
const isDisabled = isComingSoon;
return (
<motion.div <motion.div
key={template.id} key={template.id}
whileHover={{ scale: 1.03 }} whileHover={!isDisabled ? { scale: 1.03 } : {}}
whileTap={{ scale: 0.98 }} whileTap={!isDisabled ? { scale: 0.98 } : {}}
transition={{ type: "spring", stiffness: 300, damping: 20 }} transition={{ type: "spring", stiffness: 300, damping: 20 }}
data-testid={`template-card-${template.id}`} data-testid={`template-card-${template.id}`}
> >
<Card <Card
className={`cursor-pointer h-full transition-all duration-300 border-2 ${ className={`h-full transition-all duration-300 border-2 ${
selectedTemplate?.id === template.id isDisabled
? 'border-blue-500 shadow-xl bg-blue-50/50 ring-2 ring-blue-200' ? 'border-gray-200 bg-gray-50/50 opacity-85 cursor-not-allowed'
: 'border-gray-200 hover:border-blue-300 hover:shadow-lg' : 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`} data-testid={`template-card-${template.id}-clickable`}
> >
<CardHeader className="space-y-4 pb-4"> <CardHeader className="space-y-4 pb-4">
@ -108,9 +114,20 @@ export function TemplateSelectionStep({
)} )}
</div> </div>
<div className="text-left"> <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} {template.name}
</CardTitle> </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"> <div className="flex items-center gap-2">
<Badge variant="secondary" className="text-xs" data-testid={`template-card-${template.id}-category`}> <Badge variant="secondary" className="text-xs" data-testid={`template-card-${template.id}-category`}>
{template.category} {template.category}
@ -140,7 +157,8 @@ export function TemplateSelectionStep({
</CardContent> </CardContent>
</Card> </Card>
</motion.div> </motion.div>
))} );
})}
</div> </div>
{/* Template Details Card */} {/* Template Details Card */}