Card.vue — Hostinger Tools 3.0.72

hostinger / vue-frontend / src / components / Card.vue

hostinger / vue-frontend / src / components Last commit date

Card.vue

83 lines

1	<script setup lang="ts">
2	import { defineEmits, defineProps, useSlots } from "vue";
3
4	interface Props {
5	header?: string;
6	}
7
8	type Emits = {
9	(eventName: "click"): void;
10	};
11
12	defineProps<Props>();
13
14	const emit = defineEmits<Emits>();
15	const slots = useSlots();
16	</script>
17
18	<template>
19	<div
20	class="card"
21	@click="emit('click')"
22	>
23	<div class="card__header">
24	<slot
25	v-if="slots.header"
26	name="header"
27	/>
28	<h2
29	v-else-if="header"
30	class="h-m-0"
31	>
32	{{ header }}
33	</h2>
34	</div>
35	<div class="card__body">
36	<slot v-if="slots.default" />
37	</div>
38
39	<div
40	v-if="slots.footer"
41	class="card__footer"
42	>
43	<slot name="footer" />
44	</div>
45	</div>
46	</template>
47
48	<style lang="scss" scoped>
49	.card {
50	border-radius: 16px;
51	border: 1px solid var(--gray-border);
52	background: var(--light);
53	display: flex;
54	padding: 24px;
55	flex-direction: column;
56	align-items: center;
57	gap: 16px;
58	align-self: stretch;
59	text-align: left;
60	max-width: unset;
61	width: 100%;
62
63	&__header,
64	&__body,
65	&__footer {
66	display: flex;
67	width: 100%;
68	}
69
70	&__body {
71	display: flex;
72	flex-direction: column;
73	flex-grow: 1;
74	}
75
76	&__footer {
77	padding: 16px;
78	cursor: pointer;
79	text-align: right;
80	}
81	}
82	</style>
83