2024-04-18 21:46:59 +03:00
|
|
|
<template>
|
|
|
|
|
<div class="app-card">
|
|
|
|
|
<p class="app-card__title">
|
|
|
|
|
{{ title }}
|
|
|
|
|
</p>
|
|
|
|
|
|
2024-04-22 21:40:49 +03:00
|
|
|
<img :src="img" :alt="title" class="app-card__image" draggable="false">
|
2024-04-18 21:46:59 +03:00
|
|
|
|
|
|
|
|
<AppButton class="app-card__action" :href="href">
|
|
|
|
|
{{ action }}
|
|
|
|
|
</AppButton>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
defineOptions({
|
|
|
|
|
name: 'AppCard',
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
defineProps<{
|
|
|
|
|
title: string
|
|
|
|
|
action: string
|
|
|
|
|
href: string
|
|
|
|
|
img: string
|
|
|
|
|
}>()
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
.app-card {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: 1fr auto;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-items: flex-start;
|
|
|
|
|
border-radius: 16px;
|
|
|
|
|
padding: 16px;
|
|
|
|
|
gap: 16px;
|
|
|
|
|
background-image: linear-gradient(135deg, var(--chocolate-cosmos), var(--black));
|
|
|
|
|
|
|
|
|
|
&__title {
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&__image {
|
|
|
|
|
width: 80px;
|
|
|
|
|
grid-row: span 2;
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&__action {
|
|
|
|
|
grid-row: 2;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
