vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update pay function

Browse Source
This commit is contained in:
zzlgreat
2025-11-22 11:41:56 +08:00
parent a4b634abff
commit d8e4c737c5
397 changed files with 19572 additions and 9326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
boilerplate-chakra-pro-main/components/ratings/index.tsx Normal file
View File

@@ -0,0 +1,88 @@
import { IoIosStar } from 'react-icons/io';
import { Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react';
export default function Ratings(props: {
dark?: boolean;
stats: string;
stars?: 1 | 2 | 3 | 4 | 5;
rating: string | number;
}) {
const { rating, stats, stars } = props;
const gray = useColorModeValue('whiteAlpha.300', 'gray.200');
const textColor = useColorModeValue('navy.900', 'white');
return (
<Flex direction="column" align="center" justify="center">
<Text color={gray} mt={{base:"12px", lg:"40px"}} mb="10px" justifySelf={'center'} fontWeight='500'
>
{stats}
</Text>
{stars === 1 ? (
<Flex align="center" justify={{ base: 'center', md: 'flex-start' }}>
<Icon as={IoIosStar} h="22px" w="22px" color="#F6AD55" />
<Icon as={IoIosStar} h="22px" w="22px" color={gray} />
<Icon as={IoIosStar} h="22px" w="22px" color={gray} />
<Icon as={IoIosStar} h="22px" w="22px" color={gray} />
<Icon as={IoIosStar} h="22px" w="22px" me="8px" color={gray} />
<Text fontWeight="bold" my="2px" fontSize="lg" color={textColor}>
{rating}
</Text>
</Flex>
) : stars === 2 ? (
<Flex align="center" justify={{ base: 'center', md: 'flex-start' }}>
<Icon as={IoIosStar} h="22px" w="22px" color="#F6AD55" />
<Icon as={IoIosStar} h="22px" w="22px" color="#F6AD55" />
<Icon as={IoIosStar} h="22px" w="22px" color={gray} />
<Icon as={IoIosStar} h="22px" w="22px" color={gray} />
<Icon as={IoIosStar} h="22px" w="22px" me="8px" color={gray} />
<Text fontWeight="bold" my="2px" fontSize="lg" color={textColor}>
{rating}
</Text>
</Flex>
) : stars === 3 ? (
<Flex align="center" justify={{ base: 'center', md: 'flex-start' }}>
<Icon as={IoIosStar} h="22px" w="22px" color="#F6AD55" />
<Icon as={IoIosStar} h="22px" w="22px" color="#F6AD55" />
<Icon as={IoIosStar} h="22px" w="22px" color="#F6AD55" />
<Icon as={IoIosStar} h="22px" w="22px" color={gray} />
<Icon as={IoIosStar} h="22px" w="22px" me="8px" color={gray} />
<Text fontWeight="bold" my="2px" fontSize="lg" color={textColor}>
{rating}
</Text>
</Flex>
) : stars === 4 ? (
<Flex align="center" justify={{ base: 'center', md: 'flex-start' }}>
<Icon as={IoIosStar} h="22px" w="22px" color="#F6AD55" />
<Icon as={IoIosStar} h="22px" w="22px" color="#F6AD55" />
<Icon as={IoIosStar} h="22px" w="22px" color="#F6AD55" />
<Icon as={IoIosStar} h="22px" w="22px" color="#F6AD55" />
<Icon as={IoIosStar} h="22px" w="22px" me="8px" color={gray} />
<Text fontWeight="bold" my="2px" fontSize="lg" color={textColor}>
{rating}
</Text>
</Flex>
) : stars === 5 ? (
<Flex align="center" justify={{ base: 'center', md: 'flex-start' }}>
<Icon as={IoIosStar} h="22px" w="22px" color="#F6AD55" />
<Icon as={IoIosStar} h="22px" w="22px" color="#F6AD55" />
<Icon as={IoIosStar} h="22px" w="22px" color="#F6AD55" />
<Icon as={IoIosStar} h="22px" w="22px" color="#F6AD55" />
<Icon as={IoIosStar} h="22px" w="22px" me="8px" color="#F6AD55" />
<Text fontWeight="bold" my="2px" fontSize="lg" color={textColor}>
{rating}
</Text>
</Flex>
) : (
<Flex align="center" justify={{ base: 'center', md: 'flex-start' }}>
<Icon as={IoIosStar} h="22px" w="22px" color="#F6AD55" />
<Icon as={IoIosStar} h="22px" w="22px" color="#F6AD55" />
<Icon as={IoIosStar} h="22px" w="22px" color="#F6AD55" />
<Icon as={IoIosStar} h="22px" w="22px" color="#F6AD55" />
<Icon as={IoIosStar} h="22px" w="22px" me="8px" color="#F6AD55" />
<Text fontWeight="bold" my="2px" fontSize="lg" color={textColor}>
{rating}
</Text>
</Flex>
)}
</Flex>
);
}