File size: 1,661 Bytes
ff974fe c2d9a67 ff974fe | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | // frontend/src/components/admin/AIProgramSuggestion.jsx
import React from "react";
import { Clock, Users, DollarSign, ArrowRight } from "lucide-react";
export default function AIProgramSuggestion({ program }) {
return (
<div className="bg-white border border-stone-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow">
<div className="flex gap-4">
{program.image && (
<img
src={program.image}
alt={program.name}
className="w-20 h-20 rounded-lg object-cover flex-shrink-0"
/>
)}
<div className="flex-1">
<h3 className="font-semibold text-stone-900 mb-1">{program.name}</h3>
<p className="text-sm text-stone-600 mb-3">{program.description}</p>
<div className="flex flex-wrap gap-3 text-xs text-stone-500 mb-3">
<div className="flex items-center gap-1">
<Users className="w-3 h-3" />
{program.targetAudience}
</div>
<div className="flex items-center gap-1">
<Clock className="w-3 h-3" />
{program.duration}
</div>
<div className="flex items-center gap-1 text-green-600 font-medium">
<DollarSign className="w-3 h-3" />
{program.potentialRevenue}
</div>
</div>
<button
type="button"
className="inline-flex items-center gap-1 text-sm font-medium text-purple-600 hover:text-purple-700"
>
Review and Implement <ArrowRight className="w-4 h-4" />
</button>
</div>
</div>
</div>
);
}
|