Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/horizon-ui/horizon-ui-chakr…
Browse files Browse the repository at this point in the history 
…a-nextjs
  • Loading branch information
@simmmpleweb
simmmpleweb committed Feb 6, 2024
2 parents 756e48b + 7e10a09 commit ad524c8
Show file tree
Hide file tree
Showing 14 changed files with 352 additions and 438 deletions.
4 changes: 2 additions & 2 deletions src/app/rtl/rtl-default/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@

// Chakra imports
import {
Avatar,
Box,
Flex,
Icon,
Expand All @@ -36,7 +37,6 @@ import Usa from '/public/img/dashboards/usa.png';
// import MiniCalendar from 'components/calendar/MiniCalendar';
import MiniStatistics from 'components/card/MiniStatistics';
import IconBox from 'components/icons/IconBox';
import { ChakraNextAvatar } from 'components/image/Avatar';
import {
MdAddTask,
MdAttachMoney,
Expand Down Expand Up @@ -97,7 +97,7 @@ export default function UserReports() {
<MiniStatistics
startContent={
<Box height={'56px'} width={'56px'}>
<ChakraNextAvatar src={Usa} height={'56px'} width={'56px'} />
<Avatar src={Usa.src} height={'56px'} width={'56px'} />
</Box>
}
endContent={
Expand Down
310 changes: 159 additions & 151 deletions src/components/card/NFT.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,163 +1,171 @@
// Chakra imports
import {
AvatarGroup,
Avatar,
Box,
Button,
Flex,
Icon,
Link,
Text,
useColorModeValue,
Spacer,
AspectRatio
AvatarGroup,
Avatar,
Box,
Button,
Flex,
Icon,
Image,
Link,
Text,
useColorModeValue,
AspectRatio,
} from '@chakra-ui/react';
// Custom components
import Card from 'components/card/Card';
import { NextAvatar } from 'components/image/Avatar';
import { Image } from 'components/image/Image';
// Assets
import { useState } from 'react';
import { IoHeart, IoHeartOutline } from 'react-icons/io5';

export default function NFT(props: {
image: string;
name: string;
author: string;
bidders: string[];
download: string;
currentbid: string | number;
image: string | any;
name: string;
author: string;
bidders: string[] | any[];
download: string;
currentbid: string | number;
}) {
const { image, name, author, bidders, download, currentbid } = props;
const [ like, setLike ] = useState(false);
const textColor = useColorModeValue('navy.700', 'white');
const textColorBid = useColorModeValue('brand.500', 'white');
return (
<Card p='20px'>
<Flex direction={{ base: 'column' }} justify='center'>
<Box mb={{ base: '20px', '2xl': '20px' }} position='relative'>
<AspectRatio ratio={7 / 5}>
<Image src={image} w={'100%'} borderRadius='20px' alt='' />
</AspectRatio>
<Button
position='absolute'
bg='white'
_hover={{ bg: 'whiteAlpha.900' }}
_active={{ bg: 'white' }}
_focus={{ bg: 'white' }}
p='0px !important'
top='14px'
right='14px'
borderRadius='50%'
minW='36px'
h='36px'
onClick={() => {
setLike(!like);
}}>
<Icon
transition='0.2s linear'
w='20px'
h='20px'
as={like ? IoHeart : IoHeartOutline}
color='brand.500'
/>
</Button>
</Box>
<Flex flexDirection='column' justify='space-between' h='100%'>
<Flex
justify='space-between'
direction={{
base: 'row',
md: 'column',
lg: 'row',
xl: 'column',
'2xl': 'row'
}}
mb='auto'>
<Flex direction='column'>
<Text
color={textColor}
fontSize={{
base: 'xl',
md: 'lg',
lg: 'lg',
xl: 'lg',
'2xl': 'md',
'3xl': 'lg'
}}
mb='5px'
fontWeight='bold'
me='14px'>
{name}
</Text>
<Text
color='secondaryGray.600'
fontSize={{
base: 'sm'
}}
fontWeight='400'
me='14px'>
{author}
</Text>
</Flex>
<AvatarGroup
max={3}
color={textColorBid}
size='sm'
mt={{
base: '0px',
md: '10px',
lg: '0px',
xl: '10px',
'2xl': '0px'
}}
fontSize='12px'>
{bidders.map((avt, key) => <NextAvatar key={key} h={'32px'} w={'32px'} src={avt} />)}
</AvatarGroup>
</Flex>
<Flex
align={{
base: 'center',
md: 'start',
lg: 'center',
xl: 'start',
'2xl': 'center'
}}
justify='space-between'
direction={{
base: 'row',
md: 'column',
lg: 'row',
xl: 'column',
'2xl': 'row'
}}
mt='25px'>
<Text fontWeight='700' fontSize='sm' color={textColorBid}>
Current Bid: {currentbid}
</Text>
<Link
href={download}
mt={{
base: '0px',
md: '10px',
lg: '0px',
xl: '10px',
'2xl': '0px'
}}>
<Button
variant='darkBrand'
color='white'
fontSize='sm'
fontWeight='500'
borderRadius='70px'
px='24px'
py='5px'>
Place Bid
</Button>
</Link>
</Flex>
</Flex>
</Flex>
</Card>
);
const { image, name, author, bidders, download, currentbid } = props;
const [like, setLike] = useState(false);
const textColor = useColorModeValue('navy.700', 'white');
const textColorBid = useColorModeValue('brand.500', 'white');
return (
<Card p="20px">
<Flex direction={{ base: 'column' }} justify="center">
<Box mb={{ base: '20px', '2xl': '20px' }} position="relative">
<AspectRatio ratio={7 / 5}>
<Image src={image.src} w={'100%'} borderRadius="20px" alt="" />
</AspectRatio>
<Button
position="absolute"
bg="white"
_hover={{ bg: 'whiteAlpha.900' }}
_active={{ bg: 'white' }}
_focus={{ bg: 'white' }}
p="0px !important"
top="14px"
right="14px"
borderRadius="50%"
minW="36px"
h="36px"
onClick={() => {
setLike(!like);
}}
>
<Icon
transition="0.2s linear"
w="20px"
h="20px"
as={like ? IoHeart : IoHeartOutline}
color="brand.500"
/>
</Button>
</Box>
<Flex flexDirection="column" justify="space-between" h="100%">
<Flex
justify="space-between"
direction={{
base: 'row',
md: 'column',
lg: 'row',
xl: 'column',
'2xl': 'row',
}}
mb="auto"
>
<Flex direction="column">
<Text
color={textColor}
fontSize={{
base: 'xl',
md: 'lg',
lg: 'lg',
xl: 'lg',
'2xl': 'md',
'3xl': 'lg',
}}
mb="5px"
fontWeight="bold"
me="14px"
>
{name}
</Text>
<Text
color="secondaryGray.600"
fontSize={{
base: 'sm',
}}
fontWeight="400"
me="14px"
>
{author}
</Text>
</Flex>
<AvatarGroup
max={3}
color={textColorBid}
size="sm"
mt={{
base: '0px',
md: '10px',
lg: '0px',
xl: '10px',
'2xl': '0px',
}}
fontSize="12px"
>
{bidders.map((avt, key) => (
<Avatar key={key} h={'32px'} w={'32px'} src={avt.src} />
))}
</AvatarGroup>
</Flex>
<Flex
align={{
base: 'center',
md: 'start',
lg: 'center',
xl: 'start',
'2xl': 'center',
}}
justify="space-between"
direction={{
base: 'row',
md: 'column',
lg: 'row',
xl: 'column',
'2xl': 'row',
}}
mt="25px"
>
<Text fontWeight="700" fontSize="sm" color={textColorBid}>
Current Bid: {currentbid}
</Text>
<Link
href={download}
mt={{
base: '0px',
md: '10px',
lg: '0px',
xl: '10px',
'2xl': '0px',
}}
>
<Button
variant="darkBrand"
color="white"
fontSize="sm"
fontWeight="500"
borderRadius="70px"
px="24px"
py="5px"
>
Place Bid
</Button>
</Link>
</Flex>
</Flex>
</Flex>
</Card>
);
}
Loading

0 comments on commit ad524c8

Please sign in to comment.