63 lines
2.7 KiB
TypeScript
63 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import { ExperienceItem, Language } from '../types';
|
|
import { Calendar } from 'lucide-react';
|
|
|
|
interface Props {
|
|
experience: ExperienceItem[];
|
|
lang: Language;
|
|
}
|
|
|
|
const ExperienceList: React.FC<Props> = ({ experience, lang }) => {
|
|
return (
|
|
<div className="relative space-y-12">
|
|
{/* Central Line */}
|
|
<div className="absolute left-4 top-4 bottom-4 w-0.5 bg-slate-200 md:left-1/2 md:-ml-[1px]"></div>
|
|
|
|
{experience.map((job, index) => (
|
|
<div key={index} className={`relative flex flex-col md:flex-row gap-8 ${index % 2 === 0 ? 'md:flex-row-reverse' : ''} group`}>
|
|
|
|
{/* Timeline Dot */}
|
|
<div className="absolute left-4 -translate-x-1/2 top-6 w-4 h-4 rounded-full border-4 border-white bg-indigo-500 shadow-md z-10 md:left-1/2 transition-transform group-hover:scale-125 group-hover:bg-indigo-600"></div>
|
|
|
|
{/* Date for Desktop (Opposite side) */}
|
|
<div className="hidden md:block w-1/2 pt-4 px-8 text-right group-hover:text-indigo-600 transition-colors">
|
|
<div className={`flex items-center gap-2 text-sm font-bold tracking-wider text-slate-400 uppercase ${index % 2 === 0 ? 'justify-start' : 'justify-end'}`}>
|
|
{index % 2 !== 0 && <span>{job.period}</span>}
|
|
<Calendar size={14} />
|
|
{index % 2 === 0 && <span>{job.period}</span>}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content Card */}
|
|
<div className="ml-12 md:ml-0 md:w-1/2 md:px-8">
|
|
<div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 group-hover:shadow-lg group-hover:border-indigo-100 transition-all duration-300 relative">
|
|
{/* Mobile Date */}
|
|
<div className="md:hidden text-xs font-bold text-indigo-500 mb-2 uppercase tracking-wide flex items-center gap-1">
|
|
<Calendar size={12} />
|
|
{job.period}
|
|
</div>
|
|
|
|
<h3 className="text-lg font-bold text-slate-900 group-hover:text-indigo-700 transition-colors">
|
|
{job.company[lang]}
|
|
</h3>
|
|
<div className="text-sm font-semibold text-slate-500 mb-4">
|
|
{job.role[lang]}
|
|
</div>
|
|
|
|
<ul className="space-y-3">
|
|
{job.description.map((desc, i) => (
|
|
<li key={i} className="text-sm text-slate-600 leading-relaxed flex items-start gap-3">
|
|
<span className="mt-1.5 w-1.5 h-1.5 bg-indigo-400 rounded-full shrink-0"></span>
|
|
<span>{desc[lang]}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ExperienceList; |