You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
2.1 KiB
84 lines
2.1 KiB
import { createStyles, Card, Image, Stack, Text, Group, Flex } from '@mantine/core';
|
|
import globe from './assets/globe.png'
|
|
|
|
|
|
const useStyles = createStyles((theme) => ({
|
|
card: {
|
|
backgroundColor: theme.white,
|
|
},
|
|
|
|
title: {
|
|
fontWeight: 700,
|
|
fontFamily: theme.fontFamily,
|
|
lineHeight: 1.2,
|
|
'&:hover': {
|
|
color: '#eb7b1a'
|
|
}
|
|
},
|
|
|
|
body: {
|
|
padding: theme.spacing.md,
|
|
},
|
|
|
|
address: {
|
|
"&:hover": {
|
|
cursor: "pointer",
|
|
filter: 'brightness(0) saturate(100%) invert(50%) sepia(92%) saturate(1223%) hue-rotate(352deg) brightness(97%) contrast(91%)'
|
|
}
|
|
}
|
|
}));
|
|
|
|
interface ArticleCardVerticalProps {
|
|
id: number;
|
|
image: string;
|
|
category: string;
|
|
title: string;
|
|
address: string;
|
|
longitude: number;
|
|
latitude: number;
|
|
selected: number;
|
|
// author: {
|
|
// name: string;
|
|
// avatar: string;
|
|
// };
|
|
}
|
|
|
|
export function ArticleCardVertical({
|
|
id,
|
|
image,
|
|
category,
|
|
title,
|
|
address,
|
|
longitude,
|
|
latitude,
|
|
// author,
|
|
selected,
|
|
clickAddressAction
|
|
}: ArticleCardVerticalProps) {
|
|
const { classes } = useStyles();
|
|
return (
|
|
<Card withBorder shadow="sm" radius="md" p={0} w={'100%'} className={classes.card}>
|
|
<Group noWrap spacing={0}>
|
|
<Image src={image} height={180} width={140} component='a' href={`/article/${id}`}/>
|
|
<Stack p='md'>
|
|
{/* <Text transform="uppercase" color="dimmed" size="xs">
|
|
{category}
|
|
</Text> */}
|
|
<Text component='a' href={`/article/${id}`} className={classes.title} mt="xs" mb="md" color={id === selected ? '#e66a5a' : 'black'}>
|
|
{title}
|
|
</Text>
|
|
<Flex align='center' onClick={() => clickAddressAction(id)} className={classes.address}>
|
|
{/* <IconCurrentLocation style={{ width: rem(12), height: rem(12) }} /> */}
|
|
<Image src={globe} style={{ width: 32, height: 32 }} />
|
|
<Text size="xs" pl={5} pb={2}>
|
|
{address}
|
|
<br/>
|
|
{`${longitude.toFixed(3).replace('.', ',')}° ${latitude.toFixed(3).replace('.', ',')}°`}
|
|
</Text>
|
|
</Flex>
|
|
</Stack>
|
|
</Group>
|
|
</Card>
|
|
);
|
|
}
|