92 lines
3.1 KiB
TypeScript
92 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import { Calendar, ChevronDown, ChevronUp } from 'lucide-react';
|
|
import { useState } from 'react';
|
|
|
|
import { HistoryItems } from '@/app/api-utlities/@types';
|
|
|
|
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
|
import { Button } from '@/shared/shadcn-ui/button';
|
|
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
|
|
|
export interface CompanyTimelineProps {
|
|
timeline: HistoryItems;
|
|
}
|
|
|
|
export function CompanyTimeline({ timeline }: CompanyTimelineProps) {
|
|
const [expanded, setExpanded] = useState(false);
|
|
const displayEvents = expanded ? timeline : timeline.slice(0, 4);
|
|
|
|
const { t } = useTextController();
|
|
|
|
return (
|
|
<div className='relative'>
|
|
<div className='absolute left-1/2 -z-10 -ml-0.5 hidden h-full w-0.5 bg-gradient-to-b from-red-200 via-red-200 to-transparent md:block' />
|
|
|
|
<div className='space-y-8'>
|
|
{displayEvents.map((event, index) => (
|
|
<div key={index} className='relative'>
|
|
<div className='items-center md:grid md:grid-cols-2 md:gap-8'>
|
|
<div
|
|
className={`mb-4 md:mb-0 ${index % 2 === 0 ? 'md:pr-10 md:text-right' : 'md:order-last md:pl-10'}`}
|
|
data-aos='zoom-in-down'
|
|
>
|
|
<div className='mb-2 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
|
<Calendar className='size-5 text-red-600' />
|
|
</div>
|
|
<h3 className='text-xl font-bold'>{event.year}</h3>
|
|
<h4 className='mb-2 text-lg font-semibold'>{event.name}</h4>
|
|
</div>
|
|
|
|
<div
|
|
className={
|
|
index % 2 === 0
|
|
? 'md:pl-10'
|
|
: 'md:order-first md:pr-10 md:text-right'
|
|
}
|
|
>
|
|
<Card
|
|
className='overflow-hidden transition-all hover:shadow-md'
|
|
data-aos={'fade-up'}
|
|
>
|
|
<CardContent className='p-4'>
|
|
<p className='text-gray-600'>{event.description}</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='absolute top-5 left-1/2 -ml-3 hidden size-6 items-center justify-center rounded-full bg-red-600 md:flex'>
|
|
<div className='size-3 rounded-full bg-white'></div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{timeline.length > 4 && (
|
|
<div className='mt-8 text-center'>
|
|
<Button
|
|
variant='outline'
|
|
onClick={() => {
|
|
setExpanded(!expanded);
|
|
}}
|
|
className='inline-flex items-center'
|
|
>
|
|
{expanded ? (
|
|
<>
|
|
{t('about.companyTimeline.rollUp.button')}{' '}
|
|
<ChevronUp className='ml-2 size-4' />
|
|
</>
|
|
) : (
|
|
<>
|
|
{t('about.companyTimeline.show.button')}{' '}
|
|
<ChevronDown className='ml-2 size-4' />
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|