feat: rendez-vous agenda for admin and user

This commit is contained in:
Mohamed Maoulainine Maoulainine
2025-02-10 15:15:58 +01:00
parent 4080cee818
commit 5145b833ae
3 changed files with 69 additions and 13 deletions

View File

@ -1,31 +1,38 @@
<template>
<div class="project">
<div class="project-header">
<h2>{{ projectName }}</h2>
<h2 @click="goToLink">{{ projectName }}</h2>
<div class="project-buttons">
<button class="info-btn"><a href="./project-example.html">more infos</a></button>
<button class="contact-btn">Contact</button>
<button class="contact-btn">Contact</button>
</div>
</div>
<div class="project-body">
<ul>
<li v-for="(name, index) in listName" :key="index">{{ name }}</li>
</ul>
</ul>
</div>
</div>
</template>
<script lang="ts">
export default {
name: 'Project',
props: {
projectName: String,
listName: Array as() => String[], //something isn't working
<script setup lang="ts">
import { defineProps } from "vue";
const props = defineProps<{
projectName: string;
listName: string[];
projectLink: string;
}>();
const goToLink = () => {
if (props.projectLink) {
window.location.href = props.projectLink;
}
}
};
</script>
<style scoped>
.project {
background: linear-gradient(to right, #f4f4f4, #ffffff);
@ -57,4 +64,52 @@ export default {
}
.info-btn {
background-color: #4CAF50;
color: #fff;
}
.info-btn:hover {
background-color: #45a049;
transform: scale(1.05);
}
.contact-btn {
background-color: #007BFF;
color: #fff;
}
.contact-btn:hover {
background-color: #0056b3;
transform: scale(1.05);
}
.project-body {
margin-top: 15px;
}
.project-body p {
font-size: 16px;
color: #555;
margin-bottom: 10px;
}
.project-body ul {
list-style-type: disc;
margin: 0;
padding-left: 20px;
}
.project-body ul li {
font-size: 14px;
color: #666;
line-height: 1.6;
}
</style>