59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
import { useTranslations } from 'next-intl';
|
|
|
|
type CompanyProps = {
|
|
readonly description: string;
|
|
readonly href: string;
|
|
readonly period: string;
|
|
readonly title: string;
|
|
};
|
|
|
|
export function Work() {
|
|
const t = useTranslations('Work');
|
|
|
|
const companies: CompanyProps[] = [
|
|
{
|
|
description: t('evolution.description'),
|
|
href: 'https://evoleasing.ru/',
|
|
period: t('evolution.period'),
|
|
title: t('evolution.title'),
|
|
},
|
|
{
|
|
description: t('carcade.description'),
|
|
href: 'https://carcade.com/',
|
|
period: t('carcade.period'),
|
|
title: t('carcade.title'),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section id="work">
|
|
<div className="flex min-h-0 flex-col gap-y-3">
|
|
<h2 className="text-xl font-bold">{t('experience')}</h2>
|
|
{companies.map((company) => (
|
|
<Company key={company.title} {...company} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function Company({ description, href, period, title }: CompanyProps) {
|
|
return (
|
|
<div>
|
|
<a href={href}>
|
|
<div className="flex">
|
|
<div className="grow flex-col items-center">
|
|
<div className="flex items-center justify-between gap-x-2 text-base">
|
|
<h3 className="text-sm font-medium leading-none">{title}</h3>
|
|
<div className="text-right text-xs tabular-nums text-muted-foreground sm:text-sm">
|
|
{period}
|
|
</div>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">{description}</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
);
|
|
}
|