91 lines
3.4 KiB
TypeScript
91 lines
3.4 KiB
TypeScript
import { Link } from 'react-router-dom';
|
||
import { MiniTitle } from '../../ui/MiniTitle';
|
||
import { PropsWithChildren, useRef } from 'react';
|
||
import AppearanceHr from '../../ui/AppearanceHr';
|
||
import { useHover } from 'usehooks-ts';
|
||
import { AnimatePresence } from 'framer-motion';
|
||
|
||
export function Events() {
|
||
return (
|
||
<div
|
||
className="desktop:py-[70px] desktop:px-10 tablet:py-14 tablet:px-6 mobile:px-4"
|
||
id="events"
|
||
>
|
||
<AppearanceHr className="mobile:max-desktop:hidden" />
|
||
<div className="flex mobile:max-desktop:flex-col pt-5 gap-x-4 w-full">
|
||
<MiniTitle text="события" className="mobile:max-tablet:mb-2" />
|
||
<div className="desktop:max-desktop-figma:min-w-[clamp(688px,688px+(100vw-1024px)/576*425,1133px)] desktop-figma:min-w-[70.9vw]">
|
||
<AppearanceHr className="tablet:hidden" />
|
||
<div className="desktop:py-7 tablet:max-desktop:py-6 mobile:max-tablet:py-5 flex justify-between mobile:max-tablet:flex-col items-start gap-x-4">
|
||
<div className="w-fit">
|
||
<EventTitle className="tablet:mb-8 w-fit">
|
||
Макет кабины машиниста «Иволга» на выставке ВДНХ
|
||
</EventTitle>
|
||
<div className="flex items-start gap-2 mobile:max-tablet:mt-5 w-fit">
|
||
<img
|
||
src="src/assets/ivolga.png"
|
||
className="rounded-2xl w-[calc(584/1133*100%)]"
|
||
alt=""
|
||
/>
|
||
<img
|
||
src="src/assets/ivolga_mini.png"
|
||
className="rounded-2xl mobile:max-tablet-figma:hidden w-[calc(286/1133*100%)]"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
<LinkButton href="/" />
|
||
</div>
|
||
<AppearanceHr />
|
||
<div className="py-7 flex mobile:max-tablet:flex-col tablet:items-center justify-between gap-x-4">
|
||
<EventTitle>Победа на BuildUP 2023 в номинации IT</EventTitle>
|
||
<LinkButton href="/" />
|
||
</div>
|
||
<AppearanceHr />
|
||
<div className="py-7 flex mobile:max-tablet:flex-col tablet:items-center justify-between gap-x-4">
|
||
<EventTitle>
|
||
Транспортное и специальное тренажеростроение — 2023
|
||
</EventTitle>
|
||
<LinkButton href="/" />
|
||
</div>
|
||
<AppearanceHr />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function EventTitle({
|
||
className = '',
|
||
children,
|
||
}: PropsWithChildren<{ className?: string }>) {
|
||
return (
|
||
<h3 className={'text-[#ffffff] font-medium h3 ' + className}>{children}</h3>
|
||
);
|
||
}
|
||
|
||
function LinkButton({ href }: { href: string }) {
|
||
const ref = useRef<HTMLAnchorElement>(null);
|
||
const hovered = useHover(ref);
|
||
|
||
return (
|
||
<div className="w-fit self-start">
|
||
<Link
|
||
to={href}
|
||
ref={ref}
|
||
className="text-[#ffffff] text-nowrap opacity-60 uppercase flex items-center w-fit desktop:min-w-[min(133px,fit)] gap-x-2 tablet:max-desktop:min-w-[140px] mobile:max-tablet:self-end link mobile:max-tablet:mt-4"
|
||
>
|
||
как это было <img src="src/assets/arrow_insert.svg" alt="" />
|
||
</Link>
|
||
<AnimatePresence>
|
||
{hovered && (
|
||
<AppearanceHr
|
||
delay={0}
|
||
className="w-full border-[#ffffff] opacity-60"
|
||
/>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
);
|
||
}
|