117 lines
3.3 KiB
TypeScript
117 lines
3.3 KiB
TypeScript
import { FC } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
import { useLangStore } from "@/store/lang";
|
|
|
|
interface Props {
|
|
className?: string;
|
|
index: number;
|
|
name: string;
|
|
image?: {
|
|
path: string;
|
|
};
|
|
image_country: {
|
|
path?: string;
|
|
};
|
|
country: string;
|
|
about: string;
|
|
arr: number;
|
|
}
|
|
|
|
export const ParticipantItem: FC<Props> = ({
|
|
className,
|
|
index,
|
|
name,
|
|
image,
|
|
image_country,
|
|
country,
|
|
about,
|
|
arr,
|
|
}) => {
|
|
const lang = useLangStore((state) => state.lang);
|
|
|
|
return (
|
|
<>
|
|
{/* MOBILE */}
|
|
<div
|
|
key={index}
|
|
className={cn(
|
|
"flex border-b md:hidden py-2 border-outline_v",
|
|
className
|
|
)}
|
|
>
|
|
<div className="flex flex-1 flex-col items-start gap-4">
|
|
<div className="flex items-center w-full">
|
|
<div className="flex items-center flex-[0_0_80%] gap-3">
|
|
<h3 className="text-xs normal flex-[0_0_90px]">
|
|
{{ ru: "Название", en: "Company", tm: "Kompaniýa" }[lang]}:
|
|
</h3>
|
|
<h4 className="text-xs flex-[0_0_70%]">{name}</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex items-center w-full">
|
|
<div className="flex items-center flex-[0_0_80%] gap-3">
|
|
<h3 className="text-xs normal flex-[0_0_90px]">
|
|
{{ ru: "Страна", en: "Country", tm: "Ýurt" }[lang]}:
|
|
</h3>
|
|
|
|
<div className="flex items-center flex-[0_0_50%] gap-2">
|
|
<img
|
|
src={image_country?.path}
|
|
alt="flag"
|
|
className="size-4 flex-[0_0_16px] object-contain"
|
|
/>
|
|
<h4 className="text-xs flex-1">{country}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center ">
|
|
<div className="flex items-center flex-[0_0_80%] gap-3">
|
|
<h3 className="text-xs normal flex-[0_0_90px]">
|
|
{{ ru: "Сфера", en: "Industry", tm: "Pudak" }[lang]}:
|
|
</h3>
|
|
<h4 className="text-xs flex-1">{about}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-[0_0_88px] size-[88px] bg-white ">
|
|
<img
|
|
src={image?.path}
|
|
alt="company"
|
|
className="size-full object-contain"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/* DESKTOP */}
|
|
<div
|
|
className={cn(
|
|
"md:flex hidden p-4 ",
|
|
arr !== index + 1 && "border-b border-outline_v"
|
|
)}
|
|
>
|
|
<div className="flex-[0_0_45.54%] flex gap-8">
|
|
<div className="flex-[0_0_88px] sm:flex-[0_0_128px] size-[88px] bg-white sm:size-[128px]">
|
|
<img
|
|
src={image?.path}
|
|
alt="company"
|
|
className="size-full object-contain"
|
|
/>
|
|
</div>
|
|
<h3 className="text-lg xl:mr-20 mr-10">{name}</h3>
|
|
</div>
|
|
|
|
<div className="flex-[0_0_19.80%] flex gap-2.5">
|
|
<img src={image_country?.path} alt="flag" className="size-4" />
|
|
<h4 className="text-sm normal">{country}</h4>
|
|
</div>
|
|
|
|
<h3 className="text-sm normal md:ml-1 flex-[0_0_34.65%]">{about}</h3>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|