imagine10255 / bear-react-carousel Goto Github PK

import {formatCurrency} from 'bear-jsutils/number';
import {Flex,media} from 'bear-react-grid';
import CSS from 'csstype';
import styled from 'styled-components';

import {asset} from '@/utils/config';


export interface IRules {
    title: string
    value: any
}


interface IProps {
    style?: CSS.Properties
    className?: string
    isActive?: boolean
    level: number
    levelName: string
    totalAmount: number
    month: number
}

/**
 * VipLevelCard
 */
const VipCard = ({
    isActive = false,
    level,
    levelName,
    totalAmount,
    month,
}: IProps) => {

    return (
        <VipCardRoot data-active={isActive}>
            <StarGroup>
                {Array.from({length: level}).map((row, index) => {
                    return <StarImage src={asset('/images/vip/star.svg')} key={`star_${index}`}/>;
                })}
            </StarGroup>

            <Flex col="column" className="gap-1">
                <Flex className="gap-2 align-items-center">
                    <LevelIconImage src={asset('/images/vip/vip_icon.svg')}/>
                    <LevelName>{levelName}</LevelName>
                </Flex>

                <Flex className="gap-2 align-items-center">
                    <LevelIconImage src={asset('/images/vip/lightning.svg')} style={{height: '40px'}}/>
                    <LevelName>
                        <TotalAmount>
                            {formatCurrency(totalAmount)}
                        </TotalAmount>
                        <TotalAmountTitle>
                            需求
                        </TotalAmountTitle>
                    </LevelName>
                </Flex>

                <Flex className="gap-2 align-items-center">
                    <LevelIconImage src={asset('/images/vip/heart.svg')}/>
                    <LevelDesc>{month}</LevelDesc>
                </Flex>
            </Flex>




        </VipCardRoot>
    );
};

export default VipCard;



const TotalAmountTitle = styled.div`
    color: #fff;
    font-family: "Noto Sans TC";
    font-size: 12px;
    font-weight: 700;
`;

const TotalAmount = styled.div`
    color: #FFF;
    font-family: Righteous;
    font-size: 24px;
    font-weight: 400;
`;


const LevelDesc = styled.div`
    color: #fff;
    font-family: "Noto Sans TC";
    font-size: 14px;
    font-weight: 700;
`;


const LevelIconImage = styled.img`
  width: 35px;
`;


const LevelName = styled.div`
    color: #FFF;
    font-family: Righteous;
    font-size: 19.64px;
    font-weight: 400;
`;


const StarImage = styled.img`

`;

const StarGroup = styled(Flex)`
    justify-content: flex-end;
`;



const VipCardRoot = styled.div<{
    'data-active': boolean,
}>`
    width: 100%;
    height: 171px;
    padding: 12px 22px;

    border-radius: 13.597px;
    box-shadow: 0px 10.198px 20.395px 0px rgba(224, 164, 77, 0.30), 0px -4px 0px 0px rgba(0, 0, 0, 0.15) inset;
    //border: 1px solid #A4A4A4;
    //background: linear-gradient(285deg, #CFCACA 0.06%, #A1A1A1 90.84%);
    border: 1px solid #E1B400;
    background: linear-gradient(90deg, rgba(240, 155, 76, 0.90) 0%, rgba(245, 211, 91, 0.90) 100%);
    transition: background .3s;
    position: relative;

    :before{
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: transparent no-repeat center right;
        background-position-x: 30px;
        background-size: 100%;
      background-image: url("${asset('/images/vip/card_bg.svg')}");
        z-index: 1;
    }

    &[data-active="false"]{
        border-radius: 13.597px;
        border: 1px solid #A4A4A4;
        background: linear-gradient(285deg, #CFCACA 0.06%, #A1A1A1 90.84%);
        box-shadow: none;
    }
`;