Untitled
unknown
javascript
2 years ago
6.7 kB
7
Indexable
import { Link } from "react-router-dom"
const CustomBtn = ({ btnWidth, btnHeight, btnActive, btnText, type }) => {
return (
<>
{(type === "sliderCard") &&
<Link to="/" className={`group z-50 relative w-[${btnWidth}] h-[${btnHeight}]`}>
<svg className="absolute" width="111" height="47" viewBox="0 0 111 47" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.03674 17.2937C2.03674 17.2937 8.65601 1.00026 21.8945 1.00007C35.1331 0.999883 89 1.00007 89.0001 1.00007C89.0001 1.00007 89.0001 1.00007 89.0001 1.00007C100.711 1.00008 109.982 17.8028 109.982 17.8028" stroke="white" strokeWidth="1.01835" className={`transition-all duration-300 group-hover:stroke-[#E28F52] ${btnActive && "stroke-[#E28F52]"}`}/>
<path d="M108.963 30.0276C108.963 30.0276 102.344 46.321 89.1055 46.3212C75.8669 46.3214 22 46.3212 21.9999 46.3212C21.9999 46.3212 21.9999 46.3212 21.9999 46.3212C10.2889 46.3212 1.01831 29.5184 1.01831 29.5184" className={`transition-all duration-300 group-hover:stroke-[#E28F52] ${btnActive && "stroke-[#E28F52]"}`} stroke="white" strokeWidth="1.01835"/>
<circle cx="1.52753" cy="30.0277" r="1.52752" transform="rotate(-180 1.52753 30.0277)" fill="white" className={`transition-all duration-300 group-hover:fill-[#E28F52] ${btnActive && "fill-[#E28F52]"}`}/>
<circle cx="109.472" cy="30.0277" r="1.52752" transform="rotate(-180 109.472 30.0277)" fill="white" className={`transition-all duration-300 group-hover:fill-[#E28F52] ${btnActive && "fill-[#E28F52]"}`}/>
<circle cx="1.52753" cy="41.0277" r="1.52752" transform="rotate(-180 1.52753 30.0277)" fill="white" className={`transition-all duration-300 group-hover:fill-[#E28F52] ${btnActive && "fill-[#E28F52]"}`}/>
<circle cx="109.072" cy="41.0277" r="1.52752" transform="rotate(-180 109.472 30.0277)" fill="white" className={`transition-all duration-300 group-hover:fill-[#E28F52] ${btnActive && "fill-[#E28F52]"}`}/>
</svg>
<div className={`font-semibold text-[14px] pt-[2px] flex justify-center items-center m-[7px] rounded-full border text-white w-[98px] h-[34px] transition-all duration-300 group-hover:bg-gradient-to-r from-[#FF9944] to-[#FAFA37] group-hover:text-[#040303] group-hover:border-0 ${btnActive && 'text-[#040303] bg-gradient-to-r border-0'}`}>{btnText}</div>
</Link>
}
{(type === 'heroSection') &&
<Link to="/" className={`group z-50 relative w-[${btnWidth}] h-[${btnHeight}] bg-[#060505] rounded-full`}>
<svg className={`absolute`} width={btnWidth} height={btnHeight} viewBox="0 0 181 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.24817 23.0798C2.24817 23.0798 6.19552 0.999999 26.4962 1C46.7968 1 132.5 1.00002 153.939 1.00001C175.378 1.00001 178.751 23.0798 178.751 23.0798" stroke="white" className={`transition-all duration-300 group-hover:stroke-[#FF9944] ${btnActive && 'stroke-[#FF9944]'}`} strokeWidth="1.08"/>
<ellipse cx="1.68633" cy="23.5601" rx="1.68633" ry="1.43999" fill="white" className={`transition-all duration-300 group-hover:fill-[#E28F52] ${btnActive && "fill-[#E28F52]"}`} />
<ellipse cx="179.314" cy="23.5601" rx="1.68633" ry="1.43999" fill="white" className={`transition-all duration-300 group-hover:fill-[#E28F52] ${btnActive && "fill-[#E28F52]"}`} />
<path d="M2.24817 36.9202C2.24817 36.9202 6.19552 59 26.4962 59C46.7968 59 132.5 59 153.939 59C175.378 59 178.751 36.9202 178.751 36.9202" stroke="white" className={`transition-all duration-300 group-hover:stroke-[#FF9944] ${btnActive && 'stroke-[#FF9944]'}`} strokeWidth="1.08"/>
<ellipse rx="1.68633" ry="1.43999" transform="matrix(1 0 0 -1 1.68633 36.4399)" fill="white" className={`transition-all duration-300 group-hover:fill-[#E28F52] ${btnActive && "fill-[#E28F52]"}`} />
<ellipse rx="1.68633" ry="1.43999" transform="matrix(1 0 0 -1 179.314 36.4399)" fill="white" className={`transition-all duration-300 group-hover:fill-[#E28F52] ${btnActive && "fill-[#E28F52]"}`} />
</svg>
<div className={`font-semibold flex justify-center items-center m-[7px] rounded-full border text-white w-[167px] h-[46px] transition-all duration-300 group-hover:bg-gradient-to-r from-[#FF9944] to-[#FAFA37] group-hover:text-[#040303] group-hover:border-0 ${btnActive && 'text-[#040303] bg-gradient-to-r border-0'}`}>{btnText}</div>
</Link>
}
{(type === 'subscribe') &&
<Link to="/" className={`group z-50 relative w-[${btnWidth}] h-[${btnHeight}]`}>
<svg width="145" height="60" viewBox="0 0 145 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.80109 23.0798C1.80109 23.0798 4.96333 0.999999 21.2263 1C37.4893 1 106.146 1.00002 123.322 1.00001C140.497 1.00001 143.198 23.0798 143.198 23.0798" stroke="url(#paint0_linear_13_896)" strokeWidth="1.08"/>
<ellipse cx="1.35093" cy="23.5601" rx="1.35093" ry="1.43999" fill="#E28F52"/>
<ellipse cx="143.649" cy="23.5601" rx="1.35093" ry="1.43999" fill="#E28F52"/>
<path d="M143.199 36.9202C143.199 36.9202 140.037 59 123.774 59C107.511 59 38.8536 59 21.6785 59C4.50343 59 1.80156 36.9202 1.80156 36.9202" stroke="url(#paint1_linear_13_896)" strokeWidth="1.08"/>
<ellipse cx="143.649" cy="36.4399" rx="1.35093" ry="1.43999" transform="rotate(-180 143.649 36.4399)" fill="#E28F52"/>
<ellipse cx="1.35091" cy="36.4399" rx="1.35093" ry="1.43999" transform="rotate(-180 1.35091 36.4399)" fill="#E28F52"/>
<rect x="8" y="6" width="130" height="48" rx="24" fill="url(#paint2_linear_13_896)"/>
<defs>
<linearGradient id="paint0_linear_13_896" x1="-5.60757" y1="1" x2="133.384" y2="0.999988" gradientUnits="userSpaceOnUse">
<stop stopColor="#FF9944"/>
<stop offset="1" stopColor="#FAFA37"/>
</linearGradient>
<linearGradient id="paint1_linear_13_896" x1="150.608" y1="59" x2="11.6159" y2="59" gradientUnits="userSpaceOnUse">
<stop stopColor="#FF9944"/>
<stop offset="1" stopColor="#FAFA37"/>
</linearGradient>
<linearGradient id="paint2_linear_13_896" x1="8" y1="30" x2="138" y2="30" gradientUnits="userSpaceOnUse">
<stop stopColor="#FF9944"/>
<stop offset="1" stopColor="#FAFA37"/>
</linearGradient>
</defs>
</svg>
<div className="absolute -left-[9px] font-semibold flex justify-center items-center rounded-full text-black w-[160px] -mt-[42px] transition-all duration-300">{btnText}</div>
</Link>
}
</>
);
}
export default CustomBtn;
Editor is loading...