56 lines
1.5 KiB
JavaScript
56 lines
1.5 KiB
JavaScript
import {
|
|
ActionIcon,
|
|
Card,
|
|
Group,
|
|
Text,
|
|
TypographyStylesProvider,
|
|
} from '@mantine/core'
|
|
import { modals } from '@mantine/modals'
|
|
import { IconPencil, IconTrash } from '@tabler/icons-react'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
export default function AreaItem({ data, onEdit, onDelete }) {
|
|
const { t } = useTranslation()
|
|
|
|
const openConfirmModal = () =>
|
|
modals.openConfirmModal({
|
|
title: t('message_confirm_delete'),
|
|
centered: true,
|
|
children: (
|
|
<TypographyStylesProvider fz={'sm'}>
|
|
<div
|
|
dangerouslySetInnerHTML={{
|
|
__html: t('message_confirm_delete_note'),
|
|
}}
|
|
/>
|
|
</TypographyStylesProvider>
|
|
),
|
|
labels: { confirm: t('ui_delete'), cancel: t('ui_cancel') },
|
|
confirmProps: { color: 'red' },
|
|
onConfirm: () => onDelete(data),
|
|
})
|
|
|
|
const onClickEdit = () => onEdit(data)
|
|
|
|
return (
|
|
<Card withBorder>
|
|
<Text mb="sm" fz="sm">
|
|
{data.name}
|
|
</Text>
|
|
<Text mb="sm" fz="sm">
|
|
{data.desc}
|
|
</Text>
|
|
<Card.Section withBorder inheritPadding py="xs">
|
|
<Group justify="flex-end">
|
|
<ActionIcon variant="subtle" color="blue" onClick={onClickEdit}>
|
|
<IconPencil size={20} />
|
|
</ActionIcon>
|
|
<ActionIcon variant="subtle" color="red" onClick={openConfirmModal}>
|
|
<IconTrash size={20} />
|
|
</ActionIcon>
|
|
</Group>
|
|
</Card.Section>
|
|
</Card>
|
|
)
|
|
}
|