Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | import { rewardTypeToString } from '@lib/constants/reward';
import { ManageRewardResponseDtoRewardTypeEnum } from '@uniquegood/realworld-adventure-interface';
import { Card, Divider, Tag } from 'antd';
import styled from 'styled-components';
type RewardCardProps = {
title: string;
description: string;
rewardType: ManageRewardResponseDtoRewardTypeEnum;
imageUrl: string;
remainingCount: number;
expirationPeriod: string;
memo: string;
onClick: () => unknown;
};
export default function RewardCard({
title,
description,
rewardType,
imageUrl,
remainingCount,
expirationPeriod,
memo,
onClick
}: RewardCardProps) {
return (
<StyledCard title={title} onClick={onClick}>
<CardContainer>
<RewardImageContainer>
<RewardImage src={imageUrl} alt={title} />
</RewardImageContainer>
<Info>
<Description>{description}</Description>
<Divider />
<Tag>{rewardTypeToString[rewardType]}</Tag>
<span>남은 수량: {remainingCount}</span> <br />
<span>만료 기간: {expirationPeriod}</span> <br />
<span>메모: {memo || '-'}</span> <br />
</Info>
</CardContainer>
</StyledCard>
);
}
const StyledCard = styled(Card)`
margin-bottom: 16px;
word-break: break-word;
cursor: pointer;
`;
const CardContainer = styled.div`
display: flex;
align-items: center;
gap: 8px;
position: relative;
width: 100%;
@media screen and (max-width: 576px) {
flex-direction: column;
}
`;
const RewardImageContainer = styled.div`
position: relative;
width: 200px;
height: 200px;
`;
const RewardImage = styled.img`
width: 100%;
height: 100%;
object-fit: contain;
`;
const Info = styled.div`
width: 100%;
`;
const Description = styled.p`
text-align: center;
word-break: keep-all;
`;
|