Spaces:
Runtime error
Runtime error
File size: 2,509 Bytes
92189dd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import GradientBorder from '@/common/components/button/GradientBorder';
import useScreenSize from '@/common/screen/useScreenSize';
import {BLUE_PINK_FILL_BR} from '@/theme/gradientStyle';
import type {CarbonIconType} from '@carbon/icons-react';
import {Loading} from 'react-daisyui';
type Props = {
variant?: 'default' | 'flat' | 'gradient';
title: string | React.ReactNode;
Icon: CarbonIconType;
isActive?: boolean;
isDisabled?: boolean;
loadingProps?: {
loading: boolean;
label?: string;
};
onClick: () => void;
};
export default function OptionButton({
variant = 'default',
title,
Icon,
isActive = false,
isDisabled = false,
loadingProps,
onClick,
}: Props) {
const {isMobile} = useScreenSize();
const isLoading = loadingProps?.loading === true;
function handleClick() {
if (isDisabled) {
return;
}
onClick();
}
const ButtonBase = (
<div
onClick={handleClick}
className={`relative rounded-lg h-full flex items-center justify-center
${variant === 'default' ? 'bg-graydark-700' : ''}
${!isDisabled && 'cursor-pointer'}
${isDisabled ? 'text-gray-300' : ''}
${isActive && BLUE_PINK_FILL_BR}`}>
<div className="flex gap-2 items-center py-4 md:py-6">
{isLoading ? (
<Loading size="md" className="mx-auto mt-1" />
) : (
<Icon
size={isMobile ? 24 : 28}
className={`mx-auto ${isDisabled ? 'text-gray-300' : 'text-white'}`}
/>
)}
<div className="text-base font-medium text-white">
{isLoading && loadingProps?.label != null
? loadingProps.label
: title}
</div>
</div>
</div>
);
return variant === 'gradient' ? (
<GradientBorder rounded={false} className={'rounded-lg md:rounded-full'}>
{ButtonBase}
</GradientBorder>
) : (
ButtonBase
);
}
|