This commit is contained in:
nkhangg 2025-06-01 20:37:19 +07:00
commit 933bed2c81
3 changed files with 42 additions and 16 deletions

View File

@ -156,12 +156,6 @@ function App(): React.JSX.Element {
</Box> </Box>
) : ( ) : (
newItems?.map((item: Product) => { newItems?.map((item: Product) => {
console.log({
hotItem,
item,
is_host: isHotItem(item)
})
return ( return (
<CardItem <CardItem
key={item?.id} key={item?.id}

View File

@ -1,18 +1,18 @@
@keyframes borderPulse { @keyframes borderPulse {
0% { 0% {
border-color: red; border-color: #e03131;
} }
50% { 50% {
border-color: black; border-color: black;
} }
100% { 100% {
border-color: red; border-color: #e03131;
} }
} }
.item-card { .item-card {
animation: borderPulse 1s infinite; animation: borderPulse 1s infinite;
border: 4px solid red; border: 4px solid #e03131;
border-radius: 4px; border-radius: 4px;
transition: border-color 0.3s ease; transition: border-color 0.3s ease;
padding: 10px; padding: 10px;

View File

@ -1,4 +1,4 @@
import { Card, Grid, Title, Text, Badge, Button, Anchor } from '@mantine/core' import { Anchor, Box, Button, Card, Grid, Text, Title } from '@mantine/core'
import { Product } from '@renderer/types/Product' import { Product } from '@renderer/types/Product'
import moment from 'moment' import moment from 'moment'
import TimeCounter from './TimeCounter' import TimeCounter from './TimeCounter'
@ -10,13 +10,45 @@ interface CardItemProps {
const CardItem: React.FC<CardItemProps> = ({ item, hotItem }) => { const CardItem: React.FC<CardItemProps> = ({ item, hotItem }) => {
return ( return (
<Card className="item-card" mb={4} p={8}> <Card className="item-card" bg={'#f1f3f5'} mb={8} px={8} py={'xl'}>
<Grid> <Grid>
<Grid.Col span={2}> <Grid.Col
{hotItem ? ( span={2}
<Badge size="md" color="red" pos="absolute" radius={0}> style={{
Hot display: 'flex',
</Badge> alignItems: 'center',
justifyContent: 'center'
}}
>
{true ? (
<Box
style={{
position: 'absolute',
top: 0,
right: 0,
width: 80,
height: 80,
backgroundColor: '#e03131',
clipPath: 'polygon(100% 0, 100% 100%, 0 0)',
display: 'flex',
justifyContent: 'end',
alignItems: 'flex-start',
paddingTop: 10
}}
>
<Text
c="white"
fw={700}
size="xs"
style={{
transform: 'rotate(45deg)',
paddingTop: '10px',
paddingRight: '8px'
}}
>
HOT
</Text>
</Box>
) : ( ) : (
'' ''
)} )}