Modrinth-plus/apps/frontend/src/components/ui/servers/FilesDeleteItemModal.vue

<template>
	<NewModal ref="modal" danger :header="`Deleting ${item?.type}`">
		<form class="flex flex-col gap-4 md:w-[600px]" @submit.prevent="handleSubmit">
			<div
				class="relative flex w-full items-center gap-2 rounded-2xl border border-solid border-[#cb224436] bg-[#f57b7b0e] p-6 shadow-md dark:border-0 dark:bg-[#0e0e0ea4]"
			>
				<div
					class="flex h-9 w-9 items-center justify-center rounded-full bg-[#3f1818a4] p-[6px] group-hover:bg-brand-highlight group-hover:text-brand"
				>
					<FolderOpenIcon v-if="item?.type === 'directory'" class="h-5 w-5" />
					<FileIcon v-else-if="item?.type === 'file'" class="h-5 w-5" />
				</div>
				<div class="flex flex-col">
					<span class="font-bold group-hover:text-contrast">{{ item?.name }}</span>
					<span
						v-if="item?.type === 'directory'"
						class="text-xs text-secondary group-hover:text-primary"
					>
						{{ item?.count }} items
					</span>
					<span v-else class="text-xs text-secondary group-hover:text-primary">
						{{ ((item?.size ?? 0) / 1024 / 1024).toFixed(2) }} MB
					</span>
				</div>
			</div>
			<div class="flex justify-start gap-4">
				<ButtonStyled color="red">
					<button type="submit">
						<TrashIcon class="h-5 w-5" />
						Delete {{ item?.type }}
					</button>
				</ButtonStyled>
				<ButtonStyled>
					<button type="button" @click="hide">
						<XIcon class="h-5 w-5" />
						Cancel
					</button>
				</ButtonStyled>
			</div>
		</form>
	</NewModal>
</template>

<script setup lang="ts">
import { FileIcon, FolderOpenIcon, TrashIcon, XIcon } from '@modrinth/assets'
import { ButtonStyled, NewModal } from '@modrinth/ui'

defineProps<{
	item: {
		name: string
		type: string
		count?: number
		size?: number
	} | null
}>()

const emit = defineEmits<{
	(e: 'delete'): void
}>()

const modal = ref<typeof NewModal>()

const handleSubmit = () => {
	emit('delete')
	hide()
}

const show = () => {
	modal.value?.show()
}

const hide = () => {
	modal.value?.hide()
}

defineExpose({ show, hide })
</script>