39 lines
1.1 KiB
JavaScript
39 lines
1.1 KiB
JavaScript
// SituationCard.jsx
|
|
import React from 'react';
|
|
import { Card, CardContent } from './card.js';
|
|
import { cn } from '../../utils/cn.js';
|
|
|
|
const SituationCard = ({ title, description, selected, onClick, isPremiumFocus, premiumNote }) => (
|
|
<Card
|
|
className={cn(
|
|
'cursor-pointer transition-shadow duration-200 hover:shadow-lg',
|
|
selected ? 'border-blue-600 ring-2 ring-blue-500' : 'border-gray-300'
|
|
)}
|
|
onClick={onClick}
|
|
>
|
|
<CardContent>
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<h3 className="text-lg font-semibold">{title}</h3>
|
|
<p className="text-sm text-gray-600 mt-1">{description}</p>
|
|
|
|
{/* Show premium note if provided */}
|
|
{isPremiumFocus && premiumNote && (
|
|
<p className="text-xs text-yellow-600 mt-2 italic">
|
|
{premiumNote}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{isPremiumFocus && (
|
|
<span className="ml-2 inline-flex items-center px-2 py-1 rounded-full bg-yellow-400 text-xs font-bold">
|
|
Premium
|
|
</span>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
|
|
export default SituationCard;
|