gorb/frontend
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat: button components
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
JustTemmie 2025-06-01 06:13:00 +02:00
parent 5012517e9b
commit 705b37fa06
2 changed files with 86 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

43
components/buttons/Button.vue Normal file
View file

@ -0,0 +1,43 @@
<!--if you want a button with a different colour, you have to inline CSS or do something similar
<Button text="Reset Password" :callback=reset_password style="color: purple; background-color: blue"></Button>
if you have multiple buttons with the same style, feel free to make another component
this is because i couldn't find a way of dynamically taking in colours without using javascript
to update the colour during runtime, i REFUSE to do this due to performance -->
<template>
<div id="button" @click="props.callback()">
{{ props.text }}
</div>
</template>
<script lang="ts" setup>
const props = defineProps<{
text: string,
callback: CallableFunction,
}>();
</script>
<style scoped>
#button {
cursor: pointer;
background-color: #b35719;
color: #ffffff;
padding: 8px 16px;
font-size: 16px;
transition: background-color 0.2s;
border-radius: 16px;
text-decoration: none;
display: inline-block;
}
#button:hover {
background-color: #934410;
}
</style>

43
components/buttons/ButtonScary.vue Normal file
View file

@ -0,0 +1,43 @@
<!--if you want a button with a different colour, you have to inline CSS or do something similar
<Button text="Reset Password" :callback=reset_password style="color: purple; background-color: blue"></Button>
if you have multiple buttons with the same style, feel free to make another component
this is because i couldn't find a way of dynamically taking in colours without using javascript
to update the colour during runtime, i REFUSE to do this due to performance -->
<template>
<div id="button" @click="props.callback()">
{{ props.text }}
</div>
</template>
<script lang="ts" setup>
const props = defineProps<{
text: string,
callback: CallableFunction,
}>();
</script>
<style scoped>
#button {
cursor: pointer;
background-color: #f02f2f;
color: #ffffff;
padding: 8px 16px;
font-size: 16px;
transition: background-color 0.2s;
border-radius: 16px;
text-decoration: none;
display: inline-block;
}
#button:hover {
background-color: #ff0000;
}
</style>