38 lines
1.2 KiB
JavaScript
38 lines
1.2 KiB
JavaScript
import { Card, Grid, Text, Image, Button, Center } from '@mantine/core';
|
|
import { useState } from 'react';
|
|
|
|
const SelectorItem = ({ file, clickHandler }) => {
|
|
const [selected, setSelected] = useState(false);
|
|
const handleClick = () => {
|
|
setSelected(!selected);
|
|
clickHandler(file);
|
|
};
|
|
|
|
return (
|
|
<Grid.Col span={1} key={file.id}>
|
|
<Card shadow="sm">
|
|
<Card.Section>
|
|
<Image
|
|
src={"/api/file/"+file.id}
|
|
alt={file.name}
|
|
height={100}
|
|
fit="cover"
|
|
radius="md"
|
|
withPlaceholder
|
|
/>
|
|
</Card.Section>
|
|
<Center>
|
|
<Text order={4} mt="md">
|
|
{file.name}
|
|
</Text>
|
|
</Center>
|
|
<Button mt="sm" color={selected ? 'red' : 'blue'} fullWidth variant="light" onClick={handleClick}>
|
|
{selected ? 'Unselect' : 'Select'}
|
|
</Button>
|
|
</Card>
|
|
</Grid.Col>
|
|
);
|
|
};
|
|
|
|
export default SelectorItem;
|