96 lines
3.6 KiB
TypeScript
96 lines
3.6 KiB
TypeScript
import { TimelineEvent } from '../data/timelineEvents'
|
|
import Link from './Link'
|
|
|
|
const dateFormat = (date: string) => {
|
|
const parsedDate = new Date(date)
|
|
|
|
return Intl
|
|
? new Intl.DateTimeFormat('sv-SE', {
|
|
month: 'long',
|
|
year: 'numeric',
|
|
}).format(parsedDate)
|
|
: `${parsedDate.getFullYear()}-${parsedDate.getMonth()}`
|
|
}
|
|
|
|
interface TimelineProps {
|
|
events: TimelineEvent[]
|
|
}
|
|
|
|
const Timeline = ({ events }: TimelineProps): JSX.Element => {
|
|
return (
|
|
<ul className="max-w-2xl border-gray-200 md:mx-auto md:border-l-2 space-y-4 md:space-y-12">
|
|
{events.map(({ date, media, importantDates, overview }) => (
|
|
<li className="relative" key={date}>
|
|
<div className="absolute top-0 items-center justify-center hidden w-10 h-10 text-white bg-indigo-400 border-4 border-white rounded-full md:flex -left-5 -top-2 dark:border-gray-600">
|
|
<svg
|
|
className="w-5 h-5"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div className="hidden mb-4 ml-8 text-sm font-bold text-gray-700 dark:text-gray-500 capitalize md:block">
|
|
{dateFormat(date)}
|
|
</div>
|
|
<div className="p-4 text-sm leading-relaxed bg-white border-t-4 border-indigo-300 rounded-b shadow-md md:p-5 md:ml-8 dark:bg-gray-800">
|
|
<div className="block mb-4 text-lg font-bold text-gray-700 capitalize md:hidden">
|
|
{dateFormat(date)}
|
|
</div>
|
|
{overview}
|
|
{importantDates.length > 0 && (
|
|
<div className="mt-4 text-sm">
|
|
<div className="font-bold">Viktiga händelser</div>
|
|
<ul className="pl-5 mt-2 list-disc space-y-2">
|
|
{importantDates.map((important, i) => (
|
|
<li key={`${important.description}-${i}`}>
|
|
{important.link ? (
|
|
<Link.External href={important.link}>
|
|
{important.description}
|
|
</Link.External>
|
|
) : (
|
|
important.description
|
|
)}
|
|
<div className="text-xs text-gray-500 dark:text-gray-400">
|
|
{important.date}
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
{media.length > 0 && (
|
|
<div className="mt-4 text-sm">
|
|
<div className="font-bold">Media</div>
|
|
<ul className="pl-5 mt-2 list-disc space-y-2">
|
|
{media.map((m) => (
|
|
<li key={m.description}>
|
|
{m.link ? (
|
|
<Link.External href={m.link}>
|
|
{m.description}
|
|
</Link.External>
|
|
) : (
|
|
m.description
|
|
)}
|
|
<div className="text-xs text-gray-500 dark:text-gray-400">
|
|
{m.date}
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)
|
|
}
|
|
|
|
export default Timeline
|