119 lines
6.8 KiB
JavaScript
119 lines
6.8 KiB
JavaScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import { useLongPress } from "@uidotdev/usehooks";
|
|
|
|
const Buttonbriz = ({
|
|
title,
|
|
color,
|
|
buttonEvent,
|
|
icon,
|
|
subButton,
|
|
subButtonTitle,
|
|
subButtonEvent,
|
|
}) => {
|
|
const [subButtonAction, setSubButtonAction] = useState(false);
|
|
const attrs = useLongPress(subButtonEvent, {
|
|
onStart: (event) => setSubButtonAction(true),
|
|
onFinish: (event) => subButtonEvent,
|
|
onCancel: (event) => setSubButtonAction(false),
|
|
threshold: 1000,
|
|
});
|
|
const icons = [
|
|
{
|
|
iconName: "PHONE",
|
|
icon: (
|
|
<svg
|
|
width="25"
|
|
height="24"
|
|
viewBox="0 0 25 24"
|
|
fill="#b9b9b9"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto mt-2"
|
|
>
|
|
<path
|
|
d="M16.7969 14.9715L16.1395 14.3695L16.7969 14.9727V14.9715ZM20.9608 21.6297L20.3022 21.0265L20.9596 21.6297H20.9608ZM19.3585 22.458L19.4479 23.3272L19.3585 22.4568V22.458ZM2.5337 6.07917C2.52727 5.96441 2.4975 5.852 2.44608 5.74836C2.39466 5.64472 2.3226 5.55187 2.23401 5.47511C2.14543 5.39836 2.04205 5.3392 1.92979 5.30102C1.81752 5.26284 1.69857 5.24638 1.57972 5.25258C1.46086 5.25879 1.34444 5.28753 1.2371 5.33718C1.12975 5.38683 1.03359 5.4564 0.954089 5.54193C0.874592 5.62746 0.813322 5.72727 0.773777 5.83567C0.734232 5.94406 0.717186 6.05891 0.723612 6.17367L2.5337 6.07917ZM3.70095 1.60733C3.54225 1.77666 3.4584 1.99918 3.46731 2.22739C3.47622 2.45559 3.57718 2.67138 3.74863 2.8287C3.92008 2.98601 4.14843 3.07238 4.38493 3.06935C4.62143 3.06632 4.84733 2.97414 5.0144 2.8125L3.70095 1.60733ZM10.8857 21.114C10.9865 21.1767 11.0991 21.2195 11.2171 21.2398C11.3351 21.2602 11.4562 21.2578 11.5732 21.2327C11.6902 21.2076 11.8009 21.1603 11.8989 21.0936C11.9969 21.0269 12.0802 20.942 12.144 20.844C12.2077 20.746 12.2508 20.6368 12.2705 20.5226C12.2902 20.4084 12.2863 20.2916 12.259 20.1789C12.2316 20.0662 12.1814 19.9599 12.1112 19.866C12.041 19.7722 11.9522 19.6928 11.8499 19.6323L10.8857 21.114ZM16.2616 21.401C16.0262 21.3535 15.7809 21.3982 15.5797 21.5254C15.3784 21.6525 15.2378 21.8516 15.1886 22.0788C15.1394 22.3061 15.1857 22.5429 15.3174 22.7372C15.449 22.9315 15.6552 23.0673 15.8906 23.1148L16.2616 21.401ZM16.9044 16.1347L17.4542 15.5747L16.1395 14.3695L15.5897 14.9295L16.9044 16.1347ZM19.2655 15.339L21.5734 16.6223L22.4772 15.1057L20.1693 13.8223L19.2655 15.339ZM22.0193 19.2823L20.3022 21.0265L21.6169 22.2328L23.3327 20.4875L22.0193 19.2823ZM8.10049 16.6188C3.41699 11.8577 2.63157 7.84083 2.5337 6.07917L0.723612 6.17367C0.844446 8.332 1.79178 12.7467 6.78703 17.824L8.10049 16.6188ZM9.76315 8.87567L10.1087 8.52333L8.79528 7.31817L8.44849 7.6705L9.76315 8.87567ZM10.3818 4.13667L8.85811 2.0565L7.3779 3.06683L8.9004 5.147L10.3818 4.13667ZM9.10461 8.2725C8.88714 8.07015 8.66761 7.86986 8.44607 7.67167L8.44365 7.674L8.44003 7.6775C8.41858 7.69893 8.39841 7.72152 8.37961 7.74517C8.26117 7.89654 8.16744 8.06455 8.10169 8.24333C7.98328 8.56417 7.92045 8.98883 8.0002 9.5185C8.15728 10.5592 8.86415 11.958 10.7093 13.8352L12.0239 12.6288C10.2984 10.8753 9.87311 9.79617 9.79336 9.26417C9.7547 9.0075 9.79336 8.87333 9.80907 8.83017L9.81874 8.808C9.80885 8.82336 9.79753 8.83781 9.7849 8.85117C9.77782 8.85909 9.77057 8.86803 9.76315 8.87567L9.10461 8.2725ZM10.7093 13.834C12.5496 15.7053 13.9392 16.4403 14.9989 16.6072C15.5438 16.6923 15.9849 16.6235 16.3184 16.4963C16.5031 16.4263 16.6749 16.3278 16.8271 16.2047L16.8706 16.165L16.8875 16.1487C16.8903 16.1464 16.8932 16.144 16.8959 16.1417L16.8996 16.1382L16.9008 16.1358C16.9008 16.1358 16.9032 16.1347 16.2459 15.5315C15.5885 14.9295 15.5897 14.9283 15.5897 14.9272L15.5922 14.926L15.5946 14.9225L15.6018 14.9167C15.6201 14.8996 15.639 14.8833 15.6586 14.8677C15.6695 14.8607 15.6683 14.863 15.6526 14.8688C15.6284 14.8782 15.5197 14.9155 15.2901 14.8793C14.8043 14.8023 13.7555 14.3893 12.0239 12.6288L10.7093 13.834ZM8.85811 2.0565C7.63286 0.383499 5.18236 0.0999991 3.70095 1.60733L5.0144 2.8125C5.64636 2.17083 6.75924 2.221 7.3779 3.06683L8.85811 2.0565ZM20.3022 21.0265C19.9651 21.3695 19.6135 21.5538 19.2703 21.5865L19.4479 23.3272C20.3506 23.242 21.0816 22.7777 21.6169 22.2328L20.3022 21.0277V21.0265ZM10.1087 8.52333C11.2784 7.3345 11.3606 5.47483 10.3818 4.13667L8.90161 5.147C9.41153 5.8435 9.33299 6.77217 8.79528 7.31817L10.1087 8.52333ZM21.5734 16.6223C22.5654 17.1742 22.76 18.5298 22.0193 19.2823L23.3327 20.4875C24.9096 18.8845 24.4492 16.2023 22.4772 15.1057L21.5734 16.6223ZM17.4542 15.5747C17.9194 15.101 18.6456 14.9948 19.2655 15.339L20.1693 13.8223C18.8414 13.085 17.1968 13.2962 16.1395 14.3695L17.4542 15.5747ZM11.8499 19.6323C10.6622 18.9113 9.39703 17.936 8.10049 16.6188L6.78703 17.824C8.18144 19.2415 9.56257 20.3113 10.8857 21.114L11.8499 19.6323ZM19.2691 21.5865C18.2626 21.6718 17.2486 21.6093 16.2616 21.401L15.8906 23.1148C17.0584 23.3591 18.2579 23.4307 19.4479 23.3272L19.2703 21.5865H19.2691Z"
|
|
fill="#b9b9b9"
|
|
/>
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
iconName: "CHECK",
|
|
icon: (
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 12 10"
|
|
fill="#b9b9b9"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto mt-2"
|
|
>
|
|
<path
|
|
d="M4.243 9.314L0 5.07L1.414 3.656L4.243 6.484L9.899 0.826996L11.314 2.242L4.243 9.312V9.314Z"
|
|
fill="#b9b9b9"
|
|
/>
|
|
</svg>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="flex rtl mt-4 ">
|
|
<div className=" w-full">
|
|
<button
|
|
className={`btn w-full rounded-xl mt-2 flex rtl justify-between p-2 ${
|
|
color === "PRIMARY"
|
|
? "btn-primary"
|
|
: color === "SECONDARY"
|
|
? "btn-primary"
|
|
: color === "INFO"
|
|
? "btn-primary"
|
|
: ""
|
|
} `}
|
|
onClick={buttonEvent}
|
|
>
|
|
<div
|
|
className={`w-[40px] h-[40px] rounded-xl ${
|
|
color === "PRIMARY"
|
|
? "bg-secondary-950"
|
|
: color === "SECONDARY"
|
|
? "bg-secondary-950"
|
|
: color === "INFO"
|
|
? "bg-secondary-950"
|
|
: ""
|
|
}`}
|
|
>
|
|
{icons.find((e) => e.iconName == icon)?.icon}
|
|
</div>
|
|
<span className="text-center mt-2 text-sm font-medium ">{title}</span>
|
|
<div className="w-[40px] h-[40px] rounded-xl "></div>
|
|
</button>
|
|
</div>
|
|
|
|
{subButton && (
|
|
<div
|
|
{...attrs}
|
|
className={`tr03 ${
|
|
subButtonAction
|
|
? "delete"
|
|
: "w-[200px] mr-[10px] p-[17px] mt-[5px]"
|
|
}`}
|
|
>
|
|
<p
|
|
className={`mb-0 tr03 ${
|
|
subButtonAction
|
|
? "text-white font-medium text-sm"
|
|
: "text-red-500"
|
|
} `}
|
|
>
|
|
{subButtonTitle}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Buttonbriz;
|