66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
import {
|
|
ActionIcon,
|
|
Button,
|
|
Card,
|
|
Collapse,
|
|
Group,
|
|
Text,
|
|
Tooltip,
|
|
} from "@mantine/core";
|
|
import { Dispatch, SetStateAction, useState } from "react";
|
|
import SecureImage from "../display/secure-img";
|
|
import { randomId } from "@mantine/hooks";
|
|
import { IconMinus, IconPlus, IconTrash } from "@tabler/icons-react";
|
|
|
|
export default function ImageListInput({
|
|
label,
|
|
imageIds,
|
|
setImageIds,
|
|
collapsible = false,
|
|
startCollapsed = true,
|
|
}: {
|
|
label: string;
|
|
imageIds: string[];
|
|
setImageIds: Dispatch<SetStateAction<string[]>>;
|
|
collapsible?: boolean;
|
|
startCollapsed?: boolean;
|
|
}) {
|
|
const [collapsed, setCollapsed] = useState(startCollapsed);
|
|
return (
|
|
<>
|
|
<Group gap="0">
|
|
<Text size="sm" fw={700} span>
|
|
{label}
|
|
</Text>
|
|
|
|
{collapsible ? (
|
|
<Tooltip label={collapsed ? "Expand" : "Collapse"}>
|
|
<ActionIcon
|
|
variant="transparent"
|
|
onClick={() => setCollapsed(!collapsed)}
|
|
>
|
|
{collapsed ? <IconPlus size="1rem" /> : <IconMinus size="1rem" />}
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
) : null}
|
|
</Group>
|
|
<Collapse in={!collapsed}>
|
|
<Group variant="column">
|
|
{imageIds.map((id) => (
|
|
<Card key={randomId()} padding="md" shadow="md" withBorder>
|
|
<SecureImage id={id} />
|
|
<Button
|
|
mt="md"
|
|
leftSection={<IconTrash />}
|
|
onClick={() => setImageIds(imageIds.filter((i) => i !== id))}
|
|
>
|
|
Remove
|
|
</Button>
|
|
</Card>
|
|
))}
|
|
</Group>
|
|
</Collapse>
|
|
</>
|
|
);
|
|
}
|