27 lines
745 B
Vue
27 lines
745 B
Vue
|
<script lang="ts" setup>
|
||
|
|
defineProps<{
|
||
|
|
title: string
|
||
|
|
mainColor: string
|
||
|
|
subColor: string
|
||
|
|
url: string
|
||
|
|
icon: string[]
|
||
|
|
}>()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="mb-4 flex justify-between text-2xl font-bold text-white">
|
||
|
|
<div :class="[mainColor]" class="flex w-max items-center justify-center overflow-hidden rounded-2xl">
|
||
|
|
<div :class="[subColor]" class="flex h-full w-14 items-center justify-center rounded-2xl px-4 py-2 text-center">
|
||
|
|
<font-awesome-icon :icon="icon"/>
|
||
|
|
</div>
|
||
|
|
<span class="px-4">{{ title }}</span>
|
||
|
|
</div>
|
||
|
|
<a :class="[mainColor]" :href="url" class="rounded-2xl px-4 py-2">
|
||
|
|
<font-awesome-icon :icon="['fas', 'chevron-right']"/>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
</style>
|