120 lines
3.8 KiB
TypeScript
120 lines
3.8 KiB
TypeScript
"use client";
|
||
|
||
import type { Experience } from "../types";
|
||
import { getTypeColor, getTypeIcon } from "./utils";
|
||
|
||
export function ExperienceModal({
|
||
experience,
|
||
onClose,
|
||
}: {
|
||
experience: Experience;
|
||
onClose: () => void;
|
||
}) {
|
||
return (
|
||
<div
|
||
className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-fade-in"
|
||
onClick={onClose}
|
||
>
|
||
<div
|
||
className="relative max-w-2xl w-full max-h-[90vh] overflow-y-auto bg-gradient-to-br from-gray-900 to-black border border-purple-500/30 rounded-2xl shadow-2xl animate-scale-in"
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
{/* Close Button */}
|
||
<button
|
||
onClick={onClose}
|
||
className="absolute top-4 right-4 p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors z-10"
|
||
>
|
||
<svg
|
||
className="w-6 h-6"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth="2"
|
||
d="M6 18L18 6M6 6l12 12"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
|
||
{/* Content */}
|
||
<div className="p-8 space-y-6">
|
||
<div className="flex items-center gap-4">
|
||
<div
|
||
className={`text-4xl p-3 rounded-lg ${getTypeColor(experience.type)} flex items-center justify-center shrink-0 ${experience.image ? "w-16 h-16" : ""}`}
|
||
>
|
||
{experience.image ? (
|
||
<img
|
||
src={experience.image}
|
||
alt={experience.name}
|
||
className="w-full h-full object-contain"
|
||
/>
|
||
) : (
|
||
getTypeIcon(experience.type)
|
||
)}
|
||
</div>
|
||
<div>
|
||
<h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-500">
|
||
{experience.name}
|
||
</h2>
|
||
<p className="text-sm text-gray-400 mt-1">
|
||
{getTypeIcon(experience.type)}{" "}
|
||
{experience.type.charAt(0).toUpperCase() +
|
||
experience.type.slice(1)}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
{experience.description && (
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-purple-400 mb-2">
|
||
Description
|
||
</h3>
|
||
<p className="text-gray-300 leading-relaxed">
|
||
{experience.description}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{experience.learned_at && (
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-purple-400 mb-2">
|
||
📅 When I Learned It
|
||
</h3>
|
||
<p className="text-gray-300 leading-relaxed">
|
||
{experience.learned_at}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{experience.learned_from && (
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-purple-400 mb-2">
|
||
👨🏫 How I Learned It
|
||
</h3>
|
||
<p className="text-gray-300 leading-relaxed">
|
||
{experience.learned_from}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{experience.learned_because && (
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-purple-400 mb-2">
|
||
💡 Why I Learned It
|
||
</h3>
|
||
<p className="text-gray-300 leading-relaxed">
|
||
{experience.learned_because}
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|