Completed Change to ReactJS

frontend/src/components/AreaItem.jsx

@@ -0,0 +1,55 @@
+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>
+  )
+}