aida_front/src/views/AwardPage/components/Success.vue

<template>
	<div class="success-container flex flex-col align-center">
		<img
			:src="info.icon"
			alt=""
			class="icon-img"
		/>
		<div class="title">{{ info.title }}</div>
		<div class="desc">
			{{ info.desc }}
			<!-- <div>
				Please review your submitted information in the AiDA in-platform message.
			</div>
			<div>
				You may edit it if needed. Competition updates and results will be sent
				via email.
			</div> -->
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed } from 'vue'
	import { useI18n } from 'vue-i18n'
	import successIcon from '@/assets/images/award/successful.png'
	import expiredIcon from '@/assets/images/award/expired.png'

	const { t } = useI18n()
	const props = defineProps({
		isExpired: {
			type: Boolean,
			default: false
		}
	})

	const info = computed(() => {
		if (props.isExpired) {
			return {
				icon: expiredIcon,
				title: t('AwardsPage.deadlinePassed'),
				desc: t('AwardsPage.deadlinePassedDesc')
			}
		} else {
			return {
				icon: successIcon,
				title: t('AwardsPage.submissionSuccessful'),
				desc: t('AwardsPage.submissionSuccessfulDesc')
			}
		}
	})
</script>
<style lang="less" scoped>
	.success-container {
		margin: 0 21.5rem;
		padding: 10.6rem 27.3rem 0;
		height: 50rem;
		position: relative;
		top: -16.8rem;
		background-color: #fff;
		border-radius: 0.8rem;
		.icon-img {
			width: 12rem;
			height: 12rem;
		}
		.title {
			font-family: 'PoppinsBold';
			font-weight: 600;
			font-size: 3rem;
			color: #232323;
			text-align: center;
			margin: 2rem 0 4rem;
		}
		.desc {
			color: #585858;
			font-family: Arial;
			font-weight: 400;
			font-size: 2.4rem;
			text-align: center;
		}
	}
</style>