49 lines
2.0 KiB
TypeScript
49 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { ArrowRight, Sparkles } from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
/**
|
|
* Forge Insight — AI Career Insight Card
|
|
*/
|
|
interface ForgeInsightProps {
|
|
headline?: any;
|
|
detail?: any;
|
|
highlight?: any;
|
|
actionLabel?: any;
|
|
onAction?: (...args: any[]) => void;
|
|
}
|
|
|
|
export function ForgeInsight({ headline, detail, highlight, actionLabel, onAction }: ForgeInsightProps) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<aside className="relative overflow-hidden rounded-2xl border border-blue-500/30 bg-gradient-to-r from-blue-50/80 via-surface to-indigo-50/30 dark:from-blue-950/40 dark:via-surface dark:to-indigo-950/30 p-5 shadow-xs">
|
|
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div className="min-w-0 space-y-1">
|
|
<div className="flex items-center gap-2">
|
|
<Sparkles className="h-4 w-4 text-blue-600 dark:text-blue-400" />
|
|
<span className="text-[11px] font-bold uppercase tracking-wider text-blue-600 dark:text-blue-400">
|
|
{t('forgeInsight.krowForgeInsight')}
|
|
</span>
|
|
</div>
|
|
<p className="font-heading text-body-lg font-bold text-ink-1">{headline}</p>
|
|
<p className="max-w-2xl text-body-sm leading-relaxed text-ink-3">
|
|
{t('forgeInsight.nextBestSkill')} <span className="font-semibold text-blue-600 dark:text-blue-400">{highlight}</span>. {detail}
|
|
</p>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={onAction}
|
|
className="group inline-flex shrink-0 items-center gap-2 self-start rounded-xl bg-blue-600 px-4 py-2 text-caption font-semibold text-white shadow-md shadow-blue-500/20 transition-all hover:bg-blue-700 active:scale-[0.98] sm:self-auto"
|
|
>
|
|
<span>{actionLabel}</span>
|
|
<ArrowRight
|
|
className="h-3.5 w-3.5 transition-transform duration-200 group-hover:translate-x-1"
|
|
aria-hidden="true"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|