73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
import Button from "./Button";
|
|
import ArrowIcon from "./icons/ArrowIcon";
|
|
import ArrowRightIcon from "./icons/ArrowRightIcon";
|
|
|
|
interface StreamButton {
|
|
icon: string;
|
|
title: string;
|
|
location: string;
|
|
background: string;
|
|
link: string;
|
|
}
|
|
|
|
function StreamButton({
|
|
icon,
|
|
title,
|
|
location,
|
|
background,
|
|
link,
|
|
}: StreamButton) {
|
|
return (
|
|
<>
|
|
<a
|
|
href={link}
|
|
target="_blank"
|
|
className="group relative xl:grid hidden grid-cols-4 gap-4 h-36 border-b border-[#3D425C] cursor-pointer"
|
|
>
|
|
<div className="col-span-2 flex items-center xl:gap-12 gap-6">
|
|
<img src={icon} alt="" />
|
|
<p className="xl:text-2xl text-xl font-gilroy font-medium">{title}</p>
|
|
</div>
|
|
<div className="flex items-center xl:text-base text-sm">
|
|
<p>{location}</p>
|
|
</div>
|
|
<div className="xl:flex hidden items-center justify-between">
|
|
<p>Demo version</p>
|
|
<ArrowIcon />
|
|
</div>
|
|
<div
|
|
className="group-hover:opacity-100 opacity-0 transition-opacity duration-300 absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
|
|
style={{
|
|
backgroundImage: `linear-gradient(90deg, #14161F 1.07%, rgba(20, 22, 31, 0.30) 49.98%, #14161F 98.78%), url(${background})`,
|
|
}}
|
|
>
|
|
<div className="w-full h-full flex flex-col gap-2 justify-center items-center">
|
|
<p className="text-2xl font-gilroy font-medium">Start the demonstration</p>
|
|
<p>{title}</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<div className="xl:hidden grid sm:grid-cols-2 sm:gap-3 gap-6 border-b border-[#3D425C] py-6">
|
|
<div className="flex items-center gap-6">
|
|
<img src={icon} alt="" />
|
|
<div className="">
|
|
<p className="xl:text-2xl text-xl font-gilroy font-medium">
|
|
{title}
|
|
</p>
|
|
<p className="text-sm sm:hidden block">{location}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between gap-3">
|
|
<p className="text-sm sm:block hidden">{location}</p>
|
|
<Button icon={<ArrowRightIcon />}>
|
|
<a href={link}>Demo version</a>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default StreamButton;
|