85 lines
3.2 KiB
TypeScript
85 lines
3.2 KiB
TypeScript
import React from 'react';
|
||
import { University1415Dimension } from '../../types/futures';
|
||
import { toPersianDigits } from '../../utils/persianNumbers';
|
||
import { Target, ArrowLeft, Lightbulb, ArrowUpRight } from 'lucide-react';
|
||
|
||
interface Dimension1415CardProps {
|
||
dimension: University1415Dimension;
|
||
onClick: () => void;
|
||
}
|
||
|
||
export const Dimension1415Card: React.FC<Dimension1415CardProps> = ({ dimension, onClick }) => {
|
||
return (
|
||
<div
|
||
onClick={onClick}
|
||
className="intel-card interactive flex flex-col justify-between gap-3 text-right bg-white border border-slate-200 rounded-3xl p-5 shadow-sm hover:shadow-md"
|
||
style={{ borderTop: `4px solid ${dimension.pillarColor}` }}
|
||
>
|
||
<div>
|
||
{/* Header Badges */}
|
||
<div className="flex items-center justify-between gap-2 mb-2">
|
||
<span className="text-[10.5px] text-slate-400 font-bold">
|
||
{dimension.titleEn}
|
||
</span>
|
||
<span
|
||
className="text-[11px] font-bold px-2.5 py-0.5 rounded-full"
|
||
style={{
|
||
backgroundColor: `${dimension.pillarColor}15`,
|
||
color: dimension.pillarColor
|
||
}}
|
||
>
|
||
آمادگی: {toPersianDigits(dimension.readinessPercentage)}٪
|
||
</span>
|
||
</div>
|
||
|
||
{/* Title */}
|
||
<h4 className="text-slate-900 font-extrabold text-base mb-1.5 flex items-center justify-between">
|
||
<span>{dimension.title}</span>
|
||
<div className="circle-action-btn text-slate-700 w-7 h-7 text-xs">
|
||
<ArrowUpRight size={14} />
|
||
</div>
|
||
</h4>
|
||
|
||
{/* Definition */}
|
||
<p className="text-slate-600 text-xs leading-relaxed line-clamp-2">
|
||
{dimension.definition}
|
||
</p>
|
||
|
||
{/* Strategic Recommendation Preview */}
|
||
{dimension.strategicRecommendations[0] && (
|
||
<div className="mt-3 p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-[11px] text-slate-700 flex items-start gap-2">
|
||
<Lightbulb size={14} className="text-amber-500 shrink-0 mt-0.5" />
|
||
<span className="line-clamp-2">{dimension.strategicRecommendations[0]}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Scores & Gap Meter */}
|
||
<div className="pt-3 border-t border-slate-100 flex flex-col gap-2">
|
||
<div className="flex items-center justify-between text-xs font-bold">
|
||
<span className="text-amber-600">
|
||
موجود: {toPersianDigits(dimension.currentScore)}
|
||
</span>
|
||
<span className="text-teal-600">
|
||
هدف: {toPersianDigits(dimension.targetScore)}
|
||
</span>
|
||
<span className="text-rose-600 bg-rose-50 px-2 py-0.5 rounded-full text-[11px]">
|
||
شکاف: {toPersianDigits(dimension.gap)}
|
||
</span>
|
||
</div>
|
||
|
||
{/* Readiness Bar */}
|
||
<div className="w-full h-2 bg-slate-100 rounded-full overflow-hidden flex">
|
||
<div
|
||
className="h-full rounded-full transition-all duration-500"
|
||
style={{
|
||
width: `${dimension.readinessPercentage}%`,
|
||
backgroundColor: dimension.pillarColor
|
||
}}
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|