bbell / src / components / Composer / AltTextModal.vue

<script setup lang="ts">
import { ref } from 'vue'

import { useModalStore } from '@/stores/modal'
import BaseModal from '@/components/UI/BaseModal.vue'
import BaseButton from '@/components/UI/BaseButton.vue'
import TextArea from '@/components/UI/TextArea.vue'

const props = defineProps<{ initialText: string; imageSrc: string }>()
const text = ref(props.initialText)

function handleSave() {
	const modals = useModalStore()
	modals.close(text.value)
}
</script>

<template>
	<BaseModal title="Add Image Description" @close="$emit('close')">
		<div class="alt-editor">
			<div class="image-preview">
				<img :src="imageSrc" alt="Preview" />
			</div>
			<div class="input-area">
				<p class="helper-text">
					Alt text describes images for people with various disabilities and helps give context to
					everyone! Good alt text is concise, descriptive, and communicates the purpose of the
					image.
				</p>
				<TextArea
					v-model="text"
					placeholder="Describe this image..."
					:rows="4"
					autoresize
					class="alt-input"
				/>
			</div>
		</div>

		<template #footer>
			<BaseButton @click="$emit('close')">Cancel</BaseButton>
			<BaseButton @click="handleSave">Save</BaseButton>
		</template>
	</BaseModal>
</template>

<style scoped lang="scss">
.alt-editor {
	display: flex;
	flex-direction: column;
	gap: 1rem;

	@media (min-width: 768px) {
		flex-direction: row;
		align-items: flex-start;
	}
}

.image-preview {
	flex-shrink: 0;
	width: 100%;
	max-height: 200px;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: hsl(var(--surface0));
	border: 1px solid hsla(var(--surface2) / 0.5);
	display: flex;
	align-items: center;
	justify-content: center;

	@media (min-width: 768px) {
		width: 200px;
		height: 200px;
	}

	img {
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}
}

.input-area {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;

	.helper-text {
		font-size: 0.85rem;
		color: hsl(var(--subtext0));
		margin: 0;
	}

	.alt-input {
		width: 100%;
		font-size: 0.95rem;

		:deep(textarea) {
			padding: 0.5rem;
		}

		&:focus {
			background: hsla(var(--surface1) / 0.5);
		}
	}
}
</style>